| @@ -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). | |||
| @@ -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 @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 @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> | |||
| @@ -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" | |||
| }, | |||
| { | |||