Convert Markdown into GOV.UK Frontend-compliant HTML
npm install govuk-markdownConvert 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 v18 or later.
npm install govuk-markdown --save
``js
const { marked } = require('marked')
const govukMarkdown = require('govuk-markdown')
marked.use(govukMarkdown())
`
If you are using ES modules, import as follows:
`js
import { marked } from 'marked'
import govukMarkdown from 'govuk-markdown'
marked.use(govukMarkdown())
`
When you call marked, the generated HTML will include the classes from GOV.UK Frontend. For example:
`js`
marked('A link')
Will output:
`html`
Block code is highlighted using highlight.js. For example:
``js`
marked("js\nconsole.log('Hello, World!')\n`")``
Will output:
`html`
console.log('Hello, World!')
To enable the styling for inline code, block code and checkboxes in task lists, add the following to your Sass file:
`scss`
@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:
`js
const { marked } = require('marked')
const { govukMarkdown } = require('govuk-markdown')
marked.use(govukMarkdown({
headingsStartWith: 'xl'
}))
marked('# Extra large heading')
`
Will output:
`html`Extra large heading
npm test
npm run release
This command will ask you what version you want to use. It will then publish a new version on NPM, create and push a new git tag and then generate release notes ready for posting on GitHub.
> [!NOTE]
> Releasing a new version requires permission to publish packages to the @x-govuk` organisation.