Markdown

How to use markdown on your websites

Options for using markdown on your websites include:

The Nift documentation covers using markdown on your websites using Showdown, for a basic example see the template markdown-site. To use Showdown on your websites you will need showdown.js or showdown.min.js (you can get v1.9.0 from here) along with process_md_blocks.js script.

To use the Showdown add includes for the above scripts along with Showdown scripts to the end of your <body>. For example a page.template file might be:

		    							<!DOCTYPE html>
		    							<html>
		    								<head>
		    									<title>site title - @pagetitle</title>
		    								</head>
		    											
		    								<body>
		    									@inputcontent
		    
		    									<script src='@pathtofile(site/js/process_md_blocks.js)'></script>
		    									<script src="@pathtofile(site/js/showdown.min.js)"></script>
		    									<script>
		    										var converter = new showdown.Converter();
		    										converter.setOption('tables', 'on');
		    										converter.setOption('strikethrough', 'on');
		    										converter.setOption('emoji', 'on');
		    										elements = document.getElementsByClassName('markdown');
		    										for(var i=0; i<elements.length; i++)
		    											elements[i].innerHTML = converter.makeHtml(elements[i].innerHTML.replace(/&lt;/g, "xwxw").replace(/&gt;/g, "pqpq")).replace(/xwxw/g, "&lt;").replace(/pqpq/g, "&gt;");
		    									</script>
		    								</body>
		    							</html>
		    						

It's also handy to add the following bit of css to one of your css files to hide visibility of textareas when pages are loading:

		    							textarea.markdown
		    							{
		    								visibility: hidden;
		    							}
		    
		    							pre.markdown
		    							{
		    								visibility: hidden;
		    							}
		    						

You can then do a block of markdown either as:

		    							<textarea class="markdown">
		    								markdown code here
		    							</textarea>
		    						

or:

		    							<pre class="markdown">
		    								markdown code here
		    							</pre>
		    						

Examples of using markdown

		    						| Tables        | Are           | Cool  |
		    						| ------------- |:-------------:| -----:|
		    						| **col 3 is**  | right-aligned | $1600 |
		    						| col 2 is      | *centered*    |   $12 |
		    						| zebra stripes | ~~are neat~~  |    $1 |