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 (


Node.js v16 or later.


npm install govuk-markdown --save


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

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

  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>

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

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

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


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:

  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>


View Github