How to use the Marked NPM package (https://www.npmjs.com/package/marked) in the GOV.UK prototype kit based on @joelanman's gist https://gist.github.com/joelanman/263cbe51c6a33712f1ebfa697fa36d13

example.md

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, sodales a lacus et, venenatis ullamcorper elit. Nunc cursus pellentesque leo. Nulla viverra sapien ac tortor feugiat finibus.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, sodales a lacus et, venenatis ullamcorper elit. Nunc cursus pellentesque leo. Nulla viverra sapien ac tortor feugiat finibus.

Nullam vestibulum risus non odio sollicitudin cursus. Maecenas ultrices neque massa, nec ullamcorper elit hendrerit nec. Duis quis nibh ultrices libero bibendum mollis eu et nunc. Sed tincidunt eu nisl in ornare.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, sodales a lacus et, venenatis ullamcorper elit. Nunc cursus pellentesque leo. Nulla viverra sapien ac tortor feugiat finibus.

Nullam vestibulum risus non odio sollicitudin cursus. Maecenas ultrices neque massa, nec ullamcorper elit hendrerit nec. Duis quis nibh ultrices libero bibendum mollis eu et nunc. Sed tincidunt eu nisl in ornare.

$ something
$ something
$ something

Unorder list

• Bullet 1
• Bullet 2
  • Bullet 2.1
  • Bullet 2.2
• Bullet 3

Ordered list

1. Number 1
2. Number 2
   • Bullet 2.1
   • Bullet 2.2
3. Number 3
   • Bullet 3.1
   • Bullet 3.2

---

Heading

Cras metus turpis, sodales a lacus et, venenatis ullamcorper elit. Nunc cursus pellentesque leo. Nulla viverra sapien ac tortor feugiat finibus.

Column 1	Column 2
Row 1 Column 1	Row 1 Column 2
Row 2 Column 1	Row 2 Column 2
Row 3 Column 1	Row 3 Column 2

index.html

{% extends "layout.html" %}

{% block page_title %}
  {% if serviceName %} {{ serviceName }} {% endif %}
{% endblock %}

{% block content %}

<main id="content" role="main" class="markdown">
  <div class="grid-row">
    <div class="column-full">

		<a class="link-back" href="../">Back</a>

		<h1 class="heading-xlarge">
		  Page heading
		</h1>

		{{content|safe}}

    </div>
    
  </div>
</main>

{% endblock %}

markdown.scss

.markdown {
	h1 {
		@extend .heading-xlarge;
	}

	h2 {
		@extend .heading-large;
	}

	h3 {
		@extend .heading-medium;
	}

	h4 {
		@extend .heading-small;
	}

	code {
		background: $grey-4;
		padding: 3px;
		font-size: 1em;
	}

	pre > code {
		@extend .code;
		display: block;
		@extend .panel;
		@extend .panel-border-wide;
		margin-bottom: 15px;
	}

	img {
		max-width: 100%;
	}

	ul {
		@extend .list;
		@extend .list-bullet;
	}

	ol {
		@extend .list;
		@extend .list-number;
	}

	blockquote {
		@extend .panel;
		@extend .panel-border-wide;
	}

	strong {
		font-weight: 700;
	}
}

routes.js

const express = require('express');
const router = new express.Router();
const path = require('path');
const marked = require('marked');

router.get('/', (req, res) => {

	let fs = require('fs');

	let doc = fs.readFileSync(path.join(__dirname, 'path/to/content', 'example.md'), 'utf8');
  	let html = marked(doc);

	res.render('path/to/view',
		{
			content: html
		});

});

module.exports = router;