youys
/
DocNet

<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Markdown extensions - DocNet Documentation</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/theme.css" type="text/css" />
    <link rel="stylesheet" href="css/theme_colors.css" type="text/css" />
    <link rel="stylesheet" href="css/styles/vs.css">
    <link rel="stylesheet" href="css/font-awesome.4.5.0.min.css">
</head>
<body role="document">
    <div class="grid-for-nav">
        <nav data-toggle="nav-shift" class="nav-side stickynav">
            <div class="side-nav-search">
                <a href="index.htm"><i class="fa fa-home"></i> DocNet Documentation</a>
                <div role="search">
                    <form id="search-form" class="form" action="Docnet_search.htm" method="get">
                        <input type="text" name="q" placeholder="Search docs" />
                    </form>
                </div>
            </div>
            <div class="menu menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
<ul>
<li class="tocentry"><a href="index.htm">Home</a>
</li>

<li class="tocentry"><a href="usage.htm">Usage</a>
</li>
<li class="tocentry">
<span class="navigationgroup"><i class="fa fa-caret-right"></i> <a href="Configuration.htm">Configuration</a></span>
</li>
<li class="tocentry">
<ul>
<li><span class="navigationgroup"><i class="fa fa-caret-down"></i> <a href="Authoringcontent.htm">Authoring content</a></span></li>
<li class="tocentry"><a href="themes.htm">Themes</a>
</li>
<li class="tocentry">
<ul>
<li><span class="navigationgroup"><i class="fa fa-caret-down"></i> <a href="WritingcontentusingMarkdown.htm">Writing content using Markdown</a></span></li>
<li class="tocentry"><a href="markdownsupport.htm">Markdown support</a>
</li>
<li class="tocentry current"><a class="current" href="markdownextensions.htm">Markdown extensions</a>
<ul class="currentrelative">
<li class="tocentry"><a href="#Alertboxes">Alert boxes</a></li>
<li class="tocentry"><a href="#FontAwesomeicons">Font Awesome icons</a></li>
<li class="tocentry"><a href="#Tabs">Tabs</a></li>
</ul>

</ul>
</li>

</ul>
</li>
<li class="tocentry"><a href="search.htm">Search</a>
</li>
<li class="tocentry"><a href="acknowledgements.htm">Acknowledgements</a>
</li>
<li class="tocentry"><a href="license.htm">License</a>
</li>
</ul>
				<div class="toc-footer">
					<span class="text-small">
						<hr/>
						<a href="https://github.com/FransBouma/DocNet" target="_blank">Made with <i class="fa fa-github"></i> DocNet</a>
					</span>
				</div>	
			</div>
            &nbsp;
        </nav>
        <section data-toggle="nav-shift" class="nav-content-wrap">
            <nav class="nav-top" role="navigation" aria-label="top navigation">
                <i data-toggle="nav-top" class="fa fa-bars"></i>
                <a href="index.htm">DocNet Documentation</a>
            </nav>
            <div class="nav-content">
                <div role="navigation" aria-label="breadcrumbs navigation">
                    <div class="breadcrumbs">
<ul><li><a href="index.htm">Home</a></li> / <li><a href="Authoringcontent.htm">Authoring content</a></li> / <li><a href="WritingcontentusingMarkdown.htm">Writing content using Markdown</a></li> / <li><a href="markdownextensions.htm">Markdown extensions</a></li></ul>
					
                    </div>
                    <hr />
                </div>
                <div role="main">
                    <div class="section">
<p><h1>Markdown extensions</h1></p>

<p><code>Docnet</code> defines the following markdown extensions to make writing  </p>

<p><a name="Alertboxes"></a><h2>Alert boxes</h2></p>

<p>To quickly define alert boxes, <code>Docnet</code> defines the <code>&#64;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>&#64;alert</code> statement using &#64;alert <em>name</em>. Close the <code>&#64;alert</code> with <code>&#64;end</code>. </p>

<p>Below are examples for each alert box and the markdown used to create them. </p>

<p>The markdown: </p>

<p><pre class="nocode">&#64;alert danger
This is a dangerous text, it will be displayed in a danger alert box!
&#64;end
</pre></p>

<p>results in</p>

<p>

<div class="alert alert-danger"><span class="alert-title"><i class="fa fa-times-circle"></i> Danger!</span>This is a dangerous text, it will be displayed in a danger alert box!</div></p>

<p>The markdown: </p>

<p><pre class="nocode">&#64;alert warning
This is a warning text, it will be displayed in a warning alert box!
&#64;end
</pre></p>

<p>results in</p>

<p>

<div class="alert alert-warning"><span class="alert-title"><i class="fa fa-warning"></i> Warning!</span>This is a warning text, it will be displayed in a warning alert box!</div></p>

<p>The markdown: </p>

<p><pre class="nocode">&#64;alert info
This is an info text, it will be displayed in an info alert box!
&#64;end
</pre></p>

<p>Results in</p>

<p>

<div class="alert alert-info"><span class="alert-title"><i class="fa fa-info-circle"></i> Info</span>This is an info text, it will be displayed in an info alert box!</div></p>

<p><a name="FontAwesomeicons"></a><h2>Font Awesome icons</h2></p>

<p>To specify a font-awesome icon, use <code>&#64;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>&#64;fa-github</code>, which will result in: <i class="fa fa-github"></i>  </p>

<p><a name="Tabs"></a><h2>Tabs</h2></p>

<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">Joseph Fusco</a>.</p>

<p>To start a Tab control, start with <code>&#64;tabs</code> and end the tabs definition with <code>&#64;endtabs</code>. Between those two statements, which each need to be suffixed with a newline, you define one or more tabs using <code>&#64;tab</code> followed by the label text for that tab, followed by a newline. End your tab contents with <code>&#64;end</code>.</p>

<p>The following example shows two tabs, one with label 'First Tab' and one with 'Second Tab':</p>

<p><pre class="nocode">&#64;tabs
&#64;tab First Tab
This is the text for the first tab. It's nothing special</p>

<p>As you can see, it can deal with newlines as well. 
&#64;end
&#64;tab Second Tab
Now, the second tab however is very interesting. At least let's pretend it is!
&#64;end
&#64;endtabs
</pre></p>

<p>will result in: </p>

<p><div class="tab-wrap"><input type="radio" id="tab0_1" name="tabGroup1" class="tab" checked><label for="tab0_1">First Tab</label><input type="radio" id="tab1_1" name="tabGroup1" class="tab"><label for="tab1_1">Second Tab</label><div class="tab-content">This is the text for the first tab. It's nothing special</p>

<p>As you can see, it can deal with newlines as well. </div><div class="tab-content">Now, the second tab however is very interesting. At least let's pretend it is!</div></div></p>

                    </div>
                </div>
                <footer>
                    <hr />
                    <div role="contentinfo">
Made with DocNet. Get your copy at: <a href='https://github.com/FransBouma/DocNet' target='_blank'>https://github.com/FransBouma/DocNet</a>.
                    </div>
                </footer>
            </div>
        </section>
    </div>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/modernizr-2.8.3.min.js"></script>
    <script src="js/highlight.pack.js"></script>
    <script src="js/theme.js"></script>
{{ExtraScript}}
</body>
</html>