https://github.com/x-govuk/govuk-markdown

Convert Markdown into GOV.UK Frontend-compliant HTML.
https://github.com/x-govuk/govuk-markdown

design-system govuk markdown marked

Last synced: 3 months ago
JSON representation

Convert Markdown into GOV.UK Frontend-compliant HTML.

• Host: GitHub
• URL: https://github.com/x-govuk/govuk-markdown
• Owner: x-govuk
• License: mit
• Created: 2022-03-04T14:52:27.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-07T14:32:36.000Z (5 months ago)
• Last Synced: 2024-09-08T14:47:54.194Z (5 months ago)
• Topics: design-system, govuk, markdown, marked
• Language: JavaScript
• Homepage:
• Size: 457 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# GOV.UK Markdown · [![test](https://github.com/x-govuk/govuk-markdown/actions/workflows/test.yml/badge.svg)](https://github.com/x-govuk/govuk-markdown/actions/workflows/test.yml)

Convert Markdown into [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend)-compliant HTML. It’s an extension to the [marked](https://marked.js.org) renderer and is inspired by its Ruby equivalent gem [`govuk_markdown`](https://github.com/DFE-Digital/govuk_markdown).

Don’t confuse this package with [govspeak](https://github.com/alphagov/govspeak), which is a Markdown dialect specifically built for the GOV.UK publishing system.

## Requirements

Node.js v18 or later.

## Installation

`npm install govuk-markdown --save`

## Usage

```js

const { marked } = require('marked')

const govukMarkdown = require('govuk-markdown')

marked.use(govukMarkdown())

```

If you are using [ES modules](https://nodejs.org/api/esm.html#introduction), 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](/foo)')

```

Will output:

```html



  A link



```


### Code highlighting

Block code is highlighted using [highlight.js](https://highlightjs.org). For example:

````js

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

````

Will output:

```html


  

    console.log('Hello, World!')

  



```


### Additional styles

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";

```

## Options

In addition to [marked’s options](https://marked.js.org/using_advanced#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

```


## Testing

`npm test`

## Releasing a new version

`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.