Browse Source

Added alert important documentation and regenerated site with that info

pull/60/head
Frans Bouma 10 years ago
parent
commit
ef2dec2d6d
3 changed files with 32 additions and 12 deletions
  1. +20
    -6
      MarkdownSource/markdownextensions.md
  2. +11
    -5
      markdownextensions.htm
  3. +1
    -1
      search_index.json

+ 20
- 6
MarkdownSource/markdownextensions.md View File

@@ -4,11 +4,11 @@ DocNet Markdown extensions
`Docnet` defines the following markdown extensions to make writing documentation easier.

## Alert boxes
To quickly define alert boxes, `Docnet` defines the `@alert` element. Three types of alerts are defined: *danger* (displayed in red), *warning* (displayed in yellow) and *info* or *neutral*, which is displayed in blue. You specify the type of the alert after the `@alert` statement using @alert *name*. Close the `@alert` with `@end`.
To quickly define alert boxes, `Docnet` defines the `@alert` element. Three types of alerts are defined: *danger* (displayed in red), *warning* or *important* (displayed in yellow) and *info* or *neutral*, which is displayed in blue. You specify the type of the alert after the `@alert` statement using @alert *name*. Close the `@alert` with `@end`.

Below are examples for each alert box and the markdown used to create them.

The markdown:
The markdown:

```nohighlight
@alert danger
@@ -22,7 +22,7 @@ results in
This is a dangerous text, it will be displayed in a danger alert box!
@end

The markdown:
The markdown:

```nohighlight
@alert warning
@@ -36,7 +36,21 @@ results in
This is a warning text, it will be displayed in a warning alert box!
@end

The markdown:
The markdown:

```nohighlight
@alert important
This is an important text, it will be displayed in a warning/important alert box!
@end
```

results in

@alert important
This is an important text, it will be displayed in a warning/important alert box!
@end

The markdown:

```nohighlight
@alert info
@@ -45,7 +59,7 @@ This is an info text, it will be displayed in an info alert box!
```

Results in
@alert info
This is an info text, it will be displayed in an info alert box!
@end
@@ -53,7 +67,7 @@ This is an info text, it will be displayed in an info alert box!
## Font Awesome icons
To specify a font-awesome icon, use `@fa-iconname`, where _iconname_ is the name of the font-awesome icon.

Example: To specify the font awesome icon for GitHub, use `@fa-github`, which will result in: @fa-github
Example: To specify the font awesome icon for GitHub, use `@fa-github`, which will result in: @fa-github

## Tabs
It's very easy with `Docnet` to add a tab control with one or more tabs to the HTML with a simple set of markdown statements. The tab statements are converted into pure CSS3/HTML tabs, based on the work of [Joseph Fusco](http://codepen.io/fusco/pen/Wvzjrm).


+ 11
- 5
markdownextensions.htm View File

@@ -92,21 +92,27 @@
<h1 id="docnet-markdown-extensions">DocNet Markdown extensions</h1>
<p><code>Docnet</code> defines the following markdown extensions to make writing documentation easier. </p>
<h2 id="alert-boxes">Alert boxes</h2>
<p>To quickly define alert boxes, <code>Docnet</code> defines the <code>@alert</code> element. Three types of alerts are defined: <em>danger</em> (displayed in red), <em>warning</em> (displayed in yellow) and <em>info</em> or <em>neutral</em>, which is displayed in blue. You specify the type of the alert after the <code>@alert</code> statement using &#64;alert <em>name</em>. Close the <code>@alert</code> with <code>@end</code>. </p>
<p>To quickly define alert boxes, <code>Docnet</code> defines the <code>@alert</code> element. Three types of alerts are defined: <em>danger</em> (displayed in red), <em>warning</em> or <em>important</em> (displayed in yellow) and <em>info</em> or <em>neutral</em>, which is displayed in blue. You specify the type of the alert after the <code>@alert</code> statement using &#64;alert <em>name</em>. Close the <code>@alert</code> with <code>@end</code>.</p>
<p>Below are examples for each alert box and the markdown used to create them. </p>
<p>The markdown: </p>
<p>The markdown:</p>
<pre class="nocode">@alert danger
This is a dangerous text, it will be displayed in a danger alert box!
@end
</pre><p>results in</p>
<div class="alert alert-danger"><span class="alert-title"><i class="fa fa-times-circle"></i> Danger!</span><p>This is a dangerous text, it will be displayed in a danger alert box!</p>
</div><p>The markdown: </p>
</div><p>The markdown:</p>
<pre class="nocode">@alert warning
This is a warning text, it will be displayed in a warning alert box!
@end
</pre><p>results in</p>
<div class="alert alert-warning"><span class="alert-title"><i class="fa fa-warning"></i> Warning!</span><p>This is a warning text, it will be displayed in a warning alert box!</p>
</div><p>The markdown: </p>
</div><p>The markdown:</p>
<pre class="nocode">@alert important
This is an important text, it will be displayed in a warning/important alert box!
@end
</pre><p>results in</p>
<div class="alert alert-warning"><span class="alert-title"><i class="fa fa-warning"></i> Important!</span><p>This is an important text, it will be displayed in a warning/important alert box!</p>
</div><p>The markdown:</p>
<pre class="nocode">@alert info
This is an info text, it will be displayed in an info alert box!
@end
@@ -114,7 +120,7 @@ This is an info text, it will be displayed in an info alert box!
<div class="alert alert-info"><span class="alert-title"><i class="fa fa-info-circle"></i> Info</span><p>This is an info text, it will be displayed in an info alert box!</p>
</div><h2 id="font-awesome-icons">Font Awesome icons</h2>
<p>To specify a font-awesome icon, use <code>@fa-iconname</code>, where <em>iconname</em> is the name of the font-awesome icon.</p>
<p>Example: To specify the font awesome icon for GitHub, use <code>@fa-github</code>, which will result in: <i class="fa fa-github"></i> </p>
<p>Example: To specify the font awesome icon for GitHub, use <code>@fa-github</code>, which will result in: <i class="fa fa-github"></i></p>
<h2 id="tabs">Tabs</h2>
<p>It's very easy with <code>Docnet</code> to add a tab control with one or more tabs to the HTML with a simple set of markdown statements. The tab statements are converted into pure CSS3/HTML tabs, based on the work of <a href="http://codepen.io/fusco/pen/Wvzjrm" target="_blank">Joseph Fusco</a>.</p>
<p>To start a Tab control, start with <code>@tabs</code> and end the tabs definition with <code>@endtabs</code>. Between those two statements, which each need to be suffixed with a newline, you define one or more tabs using <code>@tab</code> followed by the label text for that tab, followed by a newline. End your tab contents with <code>@end</code>.</p>


+ 1
- 1
search_index.json View File

@@ -33,7 +33,7 @@
{
"location": "markdownextensions.htm",
"breadcrumbs": "Home / Authoring content / Writing content using Markdown / DocNet Markdown extensions",
"keywords": "_iconname_ 64 a add after alert Alert alerts an and are as As At awesome Awesome based be Below Between blue box boxes by can Close codepen contents control converted create CSS3 danger dangerous deal define defined defines definition displayed Docnet DocNet documentation each easier easy element end End endtabs example Example examples extensions fa first First followed following font Font for fusco Fusco github GitHub however HTML http icon iconname icons in info interesting into io is it It Joseph label least let make markdown Markdown more name need neutral newline newlines nohighlight nothing Now of on one or pen pretend pure quickly red result results Results second Second see set shows simple special specify start statement statements suffixed tab Tab tabs Tabs text that the The them This those Three to To two type types use used using very warning well where which will with work writing Wvzjrm yellow you You your",
"keywords": "_iconname_ 64 a add after alert Alert alerts an and are as As At awesome Awesome based be Below Between blue box boxes by can Close codepen contents control converted create CSS3 danger dangerous deal define defined defines definition displayed Docnet DocNet documentation each easier easy element end End endtabs example Example examples extensions fa first First followed following font Font for fusco Fusco github GitHub however HTML http icon iconname icons important in info interesting into io is it It Joseph label least let make markdown Markdown more name need neutral newline newlines nohighlight nothing Now of on one or pen pretend pure quickly red result results Results second Second see set shows simple special specify start statement statements suffixed tab Tab tabs Tabs text that the The them This those Three to To two type types use used using very warning well where which will with work writing Wvzjrm yellow you You your",
"title": "DocNet Markdown extensions"
},
{


Loading…
Cancel
Save