diff --git a/README.md b/README.md index 3491539..317c25e 100644 --- a/README.md +++ b/README.md @@ -17,16 +17,16 @@ npm install @x-govuk/marked-govspeak Import `govspeak` and and add these extensions to marked with `marked.use()`: ```js -import { marked } from 'marked' -import govspeak from '@x-govuk/marked-govspeak' +import { marked } from "marked"; +import govspeak from "@x-govuk/marked-govspeak"; -marked.use({ extensions: govspeak }) +marked.use({ extensions: govspeak }); ``` When you call `marked`, the generated HTML will include the classes to style the Govspeak Markdown extensions. For example: ```js -marked('%This is a warning callout%') +marked("%This is a warning callout%"); ``` will output: @@ -47,15 +47,36 @@ To enable the styling you will need to add the following to your Sass file: Unlike [the Govspeak gem](https://github.com/alphagov/govspeak), this package is not used to publish any part of GOV.UK. For that reason, it doesn’t support the following extensions: -* bar charts -* cross domain tracking on buttons -* embedded content and attachment links -* tables that use Kramdown syntax +- bar charts +- cross domain tracking on buttons +- embedded content and attachment links +- tables that use Kramdown syntax This package also provides its own set of CSS styles, based on [those used by GOV.UK Publishing Components](https://github.com/alphagov/govuk_publishing_components/tree/main/app/assets/stylesheets/govuk_publishing_components/components/govspeak). The class names used also differ, each prefixed with `govspeak-`. Therefore a `govspeak` or `gem-c-govspeak` class is not needed on any parent container. +### Using original Govspeak gem classes + +If you wish to generate class names that match those from the Govspeak Ruby gem, you can pass the `govspeakGemCompatibility` option to marked. For example: + +```js +marked.setOptions({ govspeakGemCompatibility: true }); + +marked("%This is a warning callout%"); +``` + +will output: + +```html +
+

This is a warning callout

+
+``` + +> [!NOTE]\ +> You will need to provide your own styles if you use this option. + ## Supported extensions ### Address @@ -72,8 +93,8 @@ $A

- HM Revenue and Customs
- Bradford
+ HM Revenue and Customs
+ Bradford
BD98 1YY

@@ -105,9 +126,23 @@ To turn a button into a [‘Start now’ button](https://design-system.service.g ``` ```html - + Start Now - + + + ``` @@ -180,11 +215,13 @@ $C ```html
-

Financial Conduct Authority
- consumer.queries@fca.org.uk
- Telephone: 0800 111 6768
- Monday to Friday, 8am to 6pm
- Saturday, 9am to 1pm
+

+ Financial Conduct Authority
+ consumer.queries@fca.org.uk
+ Telephone: 0800 111 6768
+ Monday to Friday, 8am to 6pm
+ Saturday, 9am to 1pm
Find out about call charges

@@ -200,7 +237,11 @@ $D ```html
-

Download ‘Jobcentre Plus form for employment’ (PDF, 43KB)

+

+ Download ‘Jobcentre Plus form for employment’ (PDF, 43KB) +

``` @@ -236,7 +277,7 @@ $I ```md {stat-headline} -*13.8bn* years since the big bang +_13.8bn_ years since the big bang {/stat-headline} ```