GOV.UK Markdown · test

Convert Markdown into GOV.UK Frontend-compliant HTML. It’s an extension to the marked renderer and is inspired by its Ruby equivalent gem govuk_markdown.

Don’t confuse this package with govspeak, which is a Markdown dialect specifically built for the GOV.UK publishing system (www.gov.uk).

Requirements

Node.js v16 or later.

Installation

npm install govuk-markdown --save

Usage

Import GovukHTMLRenderer and set it as the renderer in marked’s options:

import { marked } from 'marked'
import GovukHTMLRenderer from 'govuk-markdown'

marked.setOptions({
  renderer: new GovukHTMLRenderer()
})

When you call marked, the generated HTML will include the classes from GOV.UK Frontend. For example:

marked('[A link](/foo)')

Will output:

<p class="govuk-body">
  <a class="govuk-link" href="/foo">A link</a>
</p>

Code highlighting

Block code is highlighted using highlight.js. For example:

marked('```js\nconsole.log(\'Hello, World!\')\n```')

Will output:

<pre class="x-govuk-code x-govuk-code--block" tabindex="0">
  <code class="x-govuk-code__language--js">
    <span class="x-govuk-code__variable">console</span>.<span class="x-govuk-code__title">log</span>(<span class="x-govuk-code__string">'Hello, World!'</span>)
  </code>
</pre>

To enable the styling you will need to add the following to your Sass file:

@import "govuk-markdown/x-govuk/all";

Options

In addition to marked’s options, this extension accepts additional values:

Name Type Description
headingsStartWith string Heading size to use for the top-level heading (xl or l). Default is l.

For example:

marked.setOptions({
  renderer: new GovukHTMLRenderer(),
  headerIds: false,
  headingsStartWith: 'xl',
  smartypants: true
})

marked('# This is an extra large heading -- smart!')

Will output:

<h1 class="govuk-heading-xl">This is an extra large heading – smart!</h1>

GitHub

View Github