Nutritious Pumpkin Mash

    govuk-markdown

    0.3.0 • Public • Published

    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:

    const { marked } = require('marked');
    const GovukHTMLRenderer = require('govuk-markdown')
    
    marked.setOptions({
      renderer: new GovukHTMLRenderer()
    })

    If you are using ES modules, import as follows:

    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>

    Additional styles

    To enable the styling for inline code, block code and checkboxes in task lists, 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>

    Testing

    npm test

    Install

    npm i govuk-markdown

    DownloadsWeekly Downloads

    17

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    13.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • nataliecarey
    • paulrobertlloyd
    • frankieroberto
    • fofr