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>DocNet 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">DocNet Markdown extensions</a>
<ul class="currentrelative">
<li class="tocentry"><a href="#alert-boxes">Alert boxes</a></li>
<li class="tocentry"><a href="#font-awesome-icons">Font Awesome icons</a></li>
<li class="tocentry"><a href="#tabs">Tabs</a></li>
<li class="tocentry"><a href="#snippets">Snippets</a></li>
<li class="tocentry"><a href="#include-files">Include files</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">DocNet Markdown extensions</a></li></ul>
					
                    </div>
                    <hr />
                </div>
                <div role="main">
                    <div class="section">
<h1 id="docnet-markdown-extensions">DocNet Markdown extensions<a class="headerlink" href="#docnet-markdown-extensions" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></h1>
<p><code>Docnet</code> defines the following markdown extensions to make writing documentation easier. </p>
<h2 id="alert-boxes">Alert boxes<a class="headerlink" href="#alert-boxes" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></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> 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>
<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>
<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>
<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
</pre><p>Results in</p>
<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><p>The markdown:</p>
<pre class="nocode">@alert tip
This is a tip! It will be displayed in a tip alert box!
@end
</pre><p>Results in</p>
<div class="alert alert-tip"><span class="alert-title"><i class="fa fa-info-circle"></i> Tip</span><p>This is a tip! It will be displayed in a tip alert box!</p>
</div><h2 id="font-awesome-icons">Font Awesome icons<a class="headerlink" href="#font-awesome-icons" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></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>
<h2 id="tabs">Tabs<a class="headerlink" href="#tabs" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></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>
<p>The following example shows two tabs, one with label 'First Tab' and one with 'Second Tab':</p>
<pre class="nocode">@tabs
@tab First Tab
This is the text for the first tab. It's nothing special

As you can see, it can deal with newlines as well. 
@end
@tab Second Tab
Now, the second tab however is very interesting. At least let's pretend it is!
@end
@endtabs
</pre><p>will result in: </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"><p>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. </p>
</div><div class="tab-content"><p>Now, the second tab however is very interesting. At least let's pretend it is!</p>
</div></div><h2 id="snippets">Snippets<a class="headerlink" href="#snippets" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></h2>
<p>You can include snippets from other files as fenced code blocks using the directive <code>@snippet</code> which has the following syntax:</p>
<p><code>@snippet language [file specification] pattern</code></p>
<p>Here, <em>language</em> can be one of <code>cs</code>, <code>txt</code> or <code>xml</code>. If an unknown language is specified, <code>txt</code> is chosen. <em>Pattern</em> is used to determine which part of the file specified between <code>[]</code>
is to be embedded at the spot of the <code>@snippet</code> fragment. This code is based on <a href="http://defrancea.github.io/Projbook/projbook.html#Pageextractormd" target="_blank">Projbook's extractor feature</a> and follows the same pattern system. </p>
<p>Below, the method <code>GenerateToCFragment</code> is embedded in a C# fenced code block. This method is a DocNet method and is obtained directly from the source code. This shows the <code>@snippet</code>
feature's power as it keeps the documentation in sync with the embedded code without the necessity of updating things. </p>
<p>The following snippet, if the DocNet sourcecode is located at the spot reachable by the path below:</p>
<pre class="nocode">@snippet cs [../../DocNet/src/DocNet/NavigationLevel.cs] GenerateToCFragment
</pre><p>will result in:</p>
<pre><code class="cs">/// &lt;summary&gt;
/// Generates the ToC fragment for this element, which can either be a simple line or a full expanded menu.
/// &lt;/summary&gt;
/// &lt;param name=&quot;navigatedPath&quot;&gt;The navigated path to the current element, which doesn't necessarily have to be this element.&lt;/param&gt;
/// &lt;param name=&quot;relativePathToRoot&quot;&gt;The relative path back to the URL root, e.g. ../.., so it can be used for links to elements in this path.&lt;/param&gt;
/// &lt;returns&gt;&lt;/returns&gt;
public override string GenerateToCFragment(NavigatedPath navigatedPath, string relativePathToRoot)
{
    var fragments = new List&lt;string&gt;();
    if(!this.IsRoot)
    {
        fragments.Add(&quot;&lt;li class=\&quot;tocentry\&quot;&gt;&quot;);
    }
    if(navigatedPath.Contains(this))
    {
        // we're expanded. If we're not root and on the top of the navigated path stack, our index page is the page we're currently generating the ToC for, so 
        // we have to mark the entry as 'current'
        if(navigatedPath.Peek() == this &amp;&amp; !this.IsRoot)
        {
            fragments.Add(&quot;&lt;ul class=\&quot;current\&quot;&gt;&quot;);
        }
        else
        {
            fragments.Add(&quot;&lt;ul&gt;&quot;);
        }

        // first render the level header, which is the index element, if present or a label. The root always has an __index element otherwise we'd have stopped at load.
        var elementStartTag = &quot;&lt;li&gt;&lt;span class=\&quot;navigationgroup\&quot;&gt;&lt;i class=\&quot;fa fa-caret-down\&quot;&gt;&lt;/i&gt; &quot;;
        var indexElement = this.IndexElement;
        if(indexElement == null)
        {
            fragments.Add(string.Format(&quot;{0}{1}&lt;/span&gt;&lt;/li&gt;&quot;, elementStartTag, this.Name));
        }
        else
        {
            if(this.IsRoot)
            {
                fragments.Add(indexElement.PerformGenerateToCFragment(navigatedPath, relativePathToRoot));
            }
            else
            {
                fragments.Add(string.Format(&quot;{0}&lt;a href=\&quot;{1}{2}\&quot;&gt;{3}&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;&quot;, elementStartTag, relativePathToRoot, HttpUtility.UrlPathEncode(indexElement.TargetURL), 
                                            this.Name));
            }
        }
        // then the elements in the container. Index elements are skipped here.
        foreach(var element in this.Value)
        {
            fragments.Add(element.GenerateToCFragment(navigatedPath, relativePathToRoot));
        }
        fragments.Add(&quot;&lt;/ul&gt;&quot;);
    }
    else
    {
        // just a link
        fragments.Add(string.Format(&quot;&lt;span class=\&quot;navigationgroup\&quot;&gt;&lt;i class=\&quot;fa fa-caret-right\&quot;&gt;&lt;/i&gt; &lt;a href=\&quot;{0}{1}\&quot;&gt;{2}&lt;/a&gt;&lt;/span&gt;&quot;, 
                                    relativePathToRoot, HttpUtility.UrlPathEncode(this.TargetURL), this.Name));
    }
    if(!this.IsRoot)
    {
        fragments.Add(&quot;&lt;/li&gt;&quot;);
    }
    return string.Join(Environment.NewLine, fragments.ToArray());
}
</code></pre>

<h2 id="include-files">Include files<a class="headerlink" href="#include-files" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></h2>
<p>You can include other files in your markdown files using the directive <code>@@include(&quot;filename&quot;)</code>, where <code>filename</code> is the name of the file to include. The include system isn't recursive. 
The files to include are read from a special folder, specified under <code>IncludeSource</code> in the <a href="docnetjson.htm">docnet.json</a> file. If no <code>IncludeSource</code> directive is
specified in the <a href="docnetjson.htm">docnet.json</a> file, the folder <code>Includes</code> is assumed. </p>
<p>The directive <code>@@include(&quot;somehtmlinclude.htm&quot;)</code></p>
<p>results in the contents of <code>somehtmlinclude.htm</code> being included at the spot where the @@include statement is given, as shown below:</p>
<p>@@include(&quot;includedhtml.htm&quot;)</p>
<p>You can also include markdown, which is then processed with the other markdown as if it's part of it. </p>
<p>@@include(&quot;includedmarkdown.md&quot;)</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>

</body>
</html>