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 support - 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 current"><a class="current" href="markdownsupport.htm">Markdown support</a>
<ul class="currentrelative">
<li class="tocentry"><a href="#standard-markdown">Standard Markdown</a></li>
<li class="tocentry"><a href="#php-markdown-extra">Php Markdown Extra</a></li>
<li class="tocentry"><a href="#highlighting-code">Highlighting code</a></li>
<li class="tocentry"><a href="#linking">Linking</a></li>
</ul>
<li class="tocentry"><a href="markdownextensions.htm">DocNet Markdown extensions</a>
</li>

</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="markdownsupport.htm">Markdown support</a></li></ul>
					
                    </div>
                    <hr />
                </div>
                <div role="main">
                    <div class="section">
<h1 id="markdown-support">Markdown support<a class="headerlink" href="#markdown-support" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></h1>
<p><code>DocNet</code> uses markdown files as input. The markdown is parsed with the markdown parser from topten software (called '<a href="http://www.toptensoftware.com/markdowndeep/" target="_blank">MarkdownDeep</a>'). It supports the default markdown statements as well as github style code block markers and specific extensions for writing documentation, which are described below.</p>
<h2 id="standard-markdown">Standard Markdown<a class="headerlink" href="#standard-markdown" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></h2>
<p>The standard markdown syntax as defined by <a href="https://daringfireball.net/projects/markdown/" target="_blank">John Gruber</a> is supported in full. </p>
<h2 id="php-markdown-extra">Php Markdown Extra<a class="headerlink" href="#php-markdown-extra" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></h2>
<p>MarkdownDeep supports <a href="https://michelf.ca/projects/php-markdown/extra/" target="_blank">PHP Markdown Extra</a>. PHP Markdown Extra comes with a set of neat extensions for markdown to define e.g. tables, footnotes and more. Please see the link above for all the syntax examples. Additionally, you can look at the <a href="https://github.com/FransBouma/DocNet/tree/master/src/MarkdownDeepTests/testfiles/extramode" target="_blank">unit test files</a> for MarkdownDeep in the <a href="https://github.com/FransBouma/DocNet" target="_blank">DocNet respository at GitHub</a>.  
</p>
<p>A couple of examples are given below</p>
<h3 id="footnotes">Footnotes<a class="headerlink" href="#footnotes" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></h3>
<p>MarkdownDeep supports Footnotes, which can be added through the following system: To specify a footnote marker, specify <code>[^1]</code>, which will result in:<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup></p>
<p>The actual footnote text is then specified with <code>[^1]:</code> following the text of the actual footnote. Click on the superscript <code>1</code> link above to go to the footnote rendered at the bottom of this page. </p>
<h3 id="definition-lists">Definition lists<a class="headerlink" href="#definition-lists" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></h3>
<p>To specify simple definition lists, simply do:</p>
<pre class="nocode">Item one
:   this is the description of item one

Item Two
:   this is the text of item 2
</pre><p>which results in: </p>
<dl>
<dt>Item one</dt>
<dd>this is the description of item one</dd>
<dt>Item Two</dt>
<dd>this is the text of item 2</dd>
</dl>
<h3 id="tables">Tables<a class="headerlink" href="#tables" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></h3>
<p>There's basic support for defining tables. </p>
<p>Specifying: </p>
<pre class="nocode">Fruit|Color
--|--
Apples|Red
Pears|Green
Bananas|Yellow
Bongo|Bongo... it's a strange color, do you have a minute? It's a bit like the sea, but also a bit like the beach. You know how it is... oh and a bit like the wind too? You see it? Hey! Where're you going?! 
</pre><p>results in:</p>
<table class="table table-bordered-all table-responsive">
<thead>
<tr>
	<th>Fruit</th>
	<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
	<td>Apples</td>
	<td>Red</td>
</tr>
<tr>
	<td>Pears</td>
	<td>Green</td>
</tr>
<tr>
	<td>Bananas</td>
	<td>Yellow</td>
</tr>
<tr>
	<td>Bongo</td>
	<td>Bongo... it's a strange color, do you have a minute? It's a bit like the sea, but also a bit like the beach. You know how it is... oh and a bit like the wind too? You see it? Hey! Where're you going?!</td>
</tr>
</tbody>
</table>
<h3 id="special-attributes">Special attributes<a class="headerlink" href="#special-attributes" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></h3>
<p>DocNet supports special attributes for Links and Images. Currently this is supported on normal links/image specifications only, e.g.:</p>
<pre class="nocode">![id text](imageurl){.cssclass1 .cssclass2 #idvalue name=value}
</pre><p>which will result in:</p>
<pre><code class="html">&lt;img src=&quot;imageurl&quot; alt=&quot;id text&quot; id=&quot;idvalue&quot; class=&quot;cssclass1 cssclass2&quot; name=&quot;value&quot; /&gt;
</code></pre>

<h3 id="image-rendering">Image rendering<a class="headerlink" href="#image-rendering" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></h3>
<p>By default images have no special rendering applied to them. To apply a shadow, specify '.shadowed' as css class in a special attribute specification. 
If you want to have an image rendered centered with a note below it, simply specify a title for the image: </p>
<pre class="nocode">![](mycenteredpicture.jpg &quot;this is a picture&quot;)
</pre><p>will be rendered as: (xxx and yyy are the width/height values of mycenteredpicture.jpg)</p>
<pre><code class="html">&lt;div class=&quot;figure&quot;&gt;
&lt;img src=&quot;mycenteredpicture.jpg&quot; title=&quot;this is a picture&quot; width=&quot;xxx&quot; height=&quot;yyy&quot;/&gt;
&lt;p&gt;this is a picture&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>All images rendered contain the width/height of the picture file included in the html.</p>
<h3 id="abbreviations">Abbreviations<a class="headerlink" href="#abbreviations" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></h3>
<p>There's also support for abbreviations, using the <code>&lt;abbr&gt;</code> HTML tag. </p>
<p>Specifying:</p>
<pre class="nocode">*[FuBar]: F**ked Up Beyond Any Repair.
</pre><p>gives an abbreviation link in the following sentence: This is a test for abbreviations: <abbr title="F**ked Up Beyond Any Repair.">FuBar</abbr>.</p>
<h2 id="highlighting-code">Highlighting code<a class="headerlink" href="#highlighting-code" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></h2>
<p>The markdown parser has been extended with GitHub code specifications, so it's easy to specify a specific code beautifying based on a language. This feature uses the <a href="https://highlightjs.org/" target="_blank">Highlight.js</a> javascript library and most popular languages are included. </p>
<p>Example: to specify a codeblock as C#, append <code>cs</code> after the first ``` marker:</p>
<pre><code class="cs">var i=42;
</code></pre>

<p>To specify a block of text in a fixed sized font but not specify any language highlighting, specify <code>nohighlight</code> as language name:</p>
<pre class="nocode">this is a simple &lt;pre&gt; block
</pre><h2 id="linking">Linking<a class="headerlink" href="#linking" title="Permalink to this headline"><i class="fa fa-link" aria-hidden="true"></i></a></h2>
<p><code>Docnet</code> doesn't transform links. This means that any link to any document in your documentation has to use the url it will get in the destination folder. Example: you want to link to the file <code>How to\AddEntity.md</code> from a page. In the result site this should be the link <code>How%20to/AddEntity.htm</code>, which you should specify in your markdown. In the future it might be <code>docnet</code> will be updated with link transformation, at the moment it doesn't convert any links besides the usual markdown ones. The markdown parser also doesn't allow spaces to be present in the urls. If you need a space in the url, escape it with <code>%20</code>. </p>

<div class="footnotes">
<hr />
<ol>
<li id="fn:1">
<p>And this is the footnote related to the example above.&nbsp;<a href="#fnref:1" rev="footnote">&#8617;</a></p>
</li>
</ol>
</div>

                    </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>