Nift - markdown

An excellent way to pre-render (aka convert) markdown to html at build-time on your websites is to use pandoc. If you have pandoc installed on your machine it is as simple as using, without any indenting, @system("pandoc file-path") where file-path is the path to the markdown file you want converted.

For more information on using Pandoc, like converting from and to other markup languages, check out the Pandoc User's Guide.

Note: changes to the markdown file will not be recognised by build-updated unless you manually add it as a user-defined page dependency. See the Nift commands page for how to manually add user-defined page dependencies.

Options for converting markdown to html at load-time 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 \. For example a page.template file might be:

<!DOCTYPE html>
<html>
	<head>
		<title>site title - @[title]</title>
	</head>
				
	<body>
		@content()
 
		<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 as follows:

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

Examples of using markdown

See [here](https://github.com/showdownjs/showdown/wiki/Showdown's-Markdown-syntax) for documentation on Showdown's markdown syntax, and [here](https://github.com/showdownjs/showdown#setting-options) for documentation on Showdown options.

To use emojis you need to enable the **"emoji"** option, then emojis are eg. `:smile:`, `:+1:`, `:bacon:` and `:zap:` for :smile:, :+1:, :bacon: and :zap:. See [here](https://github.com/showdownjs/showdown/wiki/emojis) for a list of Showdown supported emojis.

1. You can make text *italic* by surrounding it with \*, eg. \*text\*. 2. You can make text **bold** by surrounding it with \*\*, eg. \*\*text\*\*. 2. You can make text ~~strikethrough~~ by surrounding it with \~\~, eg. \~\~text\~\~.

You can do unordered lists using \*, \- or \+, Eg.: * list item 1 - list item 2 + list item 3 You can do ordered lists using 1., 2., 3., etc., Eg.: 1. list item 1 2. list item 2 3. list item 3

You can do links using ** $t e x t$ $u r l$ **. You can do images using ** $a l t t e x t$ $i m g u r l$ **.

Tables aren't part of the core Markdown spec, but they are part of GFM and Showdown supports them by turning on the option **tables**. Colons can be used to align columns. In the new version, the outer pipes (|) are optional, matching GFM spec. You also don't need to make the raw Markdown line up prettily. You can also use other markdown syntax inside them. The following table: | Tables | Are | Cool | | ------------- |:-------------:| -----:| | **col 3 is** | right-aligned | $1600 | | c o l 2 i s | * c e n t e r e d * |$ 12 | | zebra stripes | ~~are neat~~ | $1 | is generated using

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

You can do inline code by surrounding the code with \`, eg `print("hello, world!")`.

To do a code block just indent by 4 spaces preceded by an empty line, for example: #include <cstdio> #include <iostream> int main() { std::cout << "hello, world!" << std::endl; return 0; }