3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-10 15:47:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(mdx): add siteConfig.markdown.format to configure the default content parser (MDX / CommonMark) (#9097)

Browse source
This commit is contained in:
Sébastien Lorber 2023-06-23 18:15:05 +02:00 • committed by GitHub
parent be4e67caa9
commit cc6d9696f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 304 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

128
packages/docusaurus-mdx-loader/src/__tests__/format.test.ts
View file

@ -9,44 +9,126 @@ import {getFormat} from '../format';
describe('getFormat', () => {
it('uses frontMatter format over anything else', () => {
expect(getFormat({frontMatterFormat: 'md', filePath: 'xyz.md'})).toBe('md');
expect(getFormat({frontMatterFormat: 'md', filePath: 'xyz.mdx'})).toBe(
'md',
);
expect(getFormat({frontMatterFormat: 'mdx', filePath: 'xyz.md'})).toBe(
'mdx',
);
expect(getFormat({frontMatterFormat: 'mdx', filePath: 'xyz.mdx'})).toBe(
'mdx',
);
expect(
getFormat({
frontMatterFormat: 'md',
filePath: 'xyz.md',
markdownConfigFormat: 'mdx',
}),
).toBe('md');
expect(
getFormat({
frontMatterFormat: 'md',
filePath: 'xyz.mdx',
markdownConfigFormat: 'mdx',
}),
).toBe('md');
expect(
getFormat({
frontMatterFormat: 'mdx',
filePath: 'xyz.md',
markdownConfigFormat: 'md',
}),
).toBe('mdx');
expect(
getFormat({
frontMatterFormat: 'mdx',
filePath: 'xyz.mdx',
markdownConfigFormat: 'md',
}),
).toBe('mdx');
});
it('detects appropriate format from file extension', () => {
expect(getFormat({frontMatterFormat: 'detect', filePath: 'xyz.md'})).toBe(
'md',
);
it('supports "detects" for front matter', () => {
expect(
getFormat({frontMatterFormat: 'detect', filePath: 'xyz.markdown'}),
getFormat({
frontMatterFormat: 'detect',
filePath: 'xyz.md',
markdownConfigFormat: 'mdx',
}),
).toBe('md');
expect(
getFormat({
frontMatterFormat: 'detect',
filePath: 'xyz.markdown',
markdownConfigFormat: 'mdx',
}),
).toBe('md');
expect(
getFormat({frontMatterFormat: 'detect', filePath: 'folder/xyz.md'}),
getFormat({
frontMatterFormat: 'detect',
filePath: 'folder/xyz.md',
markdownConfigFormat: 'mdx',
}),
).toBe('md');
expect(
getFormat({frontMatterFormat: 'detect', filePath: 'folder/xyz.markdown'}),
getFormat({
frontMatterFormat: 'detect',
filePath: 'folder/xyz.markdown',
markdownConfigFormat: 'mdx',
}),
).toBe('md');
expect(getFormat({frontMatterFormat: 'detect', filePath: 'xyz.mdx'})).toBe(
'mdx',
);
expect(
getFormat({frontMatterFormat: 'detect', filePath: 'folder/xyz.mdx'}),
getFormat({
frontMatterFormat: 'detect',
filePath: 'xyz.mdx',
markdownConfigFormat: 'md',
}),
).toBe('mdx');
expect(
getFormat({
frontMatterFormat: 'detect',
filePath: 'folder/xyz.mdx',
markdownConfigFormat: 'md',
}),
).toBe('mdx');
expect(
getFormat({frontMatterFormat: 'detect', filePath: 'xyz.unknown'}),
getFormat({
frontMatterFormat: 'detect',
filePath: 'xyz.unknown',
markdownConfigFormat: 'md',
}),
).toBe('mdx');
expect(
getFormat({frontMatterFormat: 'detect', filePath: 'folder/xyz.unknown'}),
getFormat({
frontMatterFormat: 'detect',
filePath: 'folder/xyz.unknown',
markdownConfigFormat: 'md',
}),
).toBe('mdx');
});
it('fallbacks to markdown config format when front matter undefined', () => {
expect(
getFormat({
frontMatterFormat: undefined,
filePath: 'xyz.md',
markdownConfigFormat: 'mdx',
}),
).toBe('mdx');
expect(
getFormat({
frontMatterFormat: undefined,
filePath: 'xyz.mdx',
markdownConfigFormat: 'md',
}),
).toBe('md');
expect(
getFormat({
frontMatterFormat: undefined,
filePath: 'xyz.md',
markdownConfigFormat: 'detect',
}),
).toBe('md');
expect(
getFormat({
frontMatterFormat: undefined,
filePath: 'xyz.mdx',
markdownConfigFormat: 'detect',
}),
).toBe('mdx');
});
});

11
packages/docusaurus-mdx-loader/src/__tests__/frontMatter.test.ts
View file

@ -85,9 +85,18 @@ describe('MDX front matter schema', () => {
describe('validateDocFrontMatter format', () => {
testField({
prefix: 'format',
validFrontMatters: [{format: 'md'}, {format: 'mdx'}],
validFrontMatters: [
{},
{format: undefined},
{format: 'detect'},
{format: 'md'},
{format: 'mdx'},
],
invalidFrontMatters: [
[{format: 'xdm'}, '"format" must be one of [md, mdx, detect]'],
[{format: ''}, '"format" must be one of [md, mdx, detect]'],
[{format: null}, '"format" must be one of [md, mdx, detect]'],
[{unknownAttribute: 'mdx'}, '"unknownAttribute" is not allowed'],
],
});
});

20
packages/docusaurus-mdx-loader/src/format.ts
View file

@ -7,6 +7,7 @@
import path from 'path';
import type {MDXFrontMatter} from './frontMatter';
import type {Format, FormatInput} from './index';
// Copied from https://mdxjs.com/packages/mdx/#optionsmdextensions
// Although we are likely to only use .md / .mdx anyway...
@ -21,20 +22,29 @@ const mdFormatExtensions = [
'.ron',
];
function isMDFormat(filepath: string) {
return mdFormatExtensions.includes(path.extname(filepath));
function getExtensionFormat(filepath: string): Format {
const isMDFormat = mdFormatExtensions.includes(path.extname(filepath));
// Bias toward mdx if unknown extension
return isMDFormat ? 'md' : 'mdx';
}
export function getFormat({
filePath,
frontMatterFormat,
markdownConfigFormat,
}: {
filePath: string;
frontMatterFormat: MDXFrontMatter['format'];
}): 'md' | 'mdx' {
markdownConfigFormat: FormatInput;
}): Format {
if (frontMatterFormat) {
if (frontMatterFormat !== 'detect') {
return frontMatterFormat;
}
// Bias toward mdx if unknown extension
return isMDFormat(filePath) ? 'md' : 'mdx';
return getExtensionFormat(filePath);
}
if (markdownConfigFormat !== 'detect') {
return markdownConfigFormat;
}
return getExtensionFormat(filePath);
}

10
packages/docusaurus-mdx-loader/src/frontMatter.ts
View file

@ -10,18 +10,18 @@ import {
validateFrontMatter,
} from '@docusaurus/utils-validation';
import type {FormatInput} from './index';
export type MDXFrontMatter = {
format: 'md' | 'mdx' | 'detect';
format?: FormatInput;
};
export const DefaultMDXFrontMatter: MDXFrontMatter = {
format: 'detect',
format: undefined,
};
const MDXFrontMatterSchema = Joi.object<MDXFrontMatter>({
format: Joi.string()
.equal('md', 'mdx', 'detect')
.default(DefaultMDXFrontMatter.format),
format: Joi.string().equal('md', 'mdx', 'detect').optional(),
}).default(DefaultMDXFrontMatter);
export function validateMDXFrontMatter(frontMatter: unknown): MDXFrontMatter {

4
packages/docusaurus-mdx-loader/src/index.ts
View file

@ -13,6 +13,10 @@ export default mdxLoader;
export type TOCItem = TOCItemImported;
export type Format = 'md' | 'mdx';
export type FormatInput = Format | 'detect';
export type LoadedMDXContent<FrontMatter, Metadata, Assets = undefined> = {
/** As verbatim declared in the MDX document. */
readonly frontMatter: FrontMatter;

1
packages/docusaurus-mdx-loader/src/processor.ts
View file

@ -235,6 +235,7 @@ export async function createProcessorCached({
const format = getFormat({
filePath,
frontMatterFormat: mdxFrontMatter.format,
markdownConfigFormat: reqOptions.markdownConfig.format,
});
return format === 'md' ? compilers.mdProcessor : compilers.mdxProcessor;

35
packages/docusaurus-types/src/config.d.ts vendored
View file

@ -16,7 +16,34 @@ export type ThemeConfig = {
[key: string]: unknown;
};
export type MarkdownPreprocessor = (args: {
filePath: string;
fileContent: string;
}) => string;
export type MDX1CompatOptions = {
comments: boolean;
admonitions: boolean;
headingIds: boolean;
};
export type MarkdownConfig = {
/**
* The Markdown format to use by default.
*
* This is the format passed down to the MDX compiler, impacting the way the
* content is parsed.
*
* Possible values:
* - `'mdx'`: use the MDX format (JSX support)
* - `'md'`: use the CommonMark format (no JSX support)
* - `'detect'`: select the format based on file extension (.md / .mdx)
*
* @see https://mdxjs.com/packages/mdx/#optionsformat
* @default 'mdx'
*/
format: 'mdx' | 'md' | 'detect';
/**
* Allow mermaid language code blocks to be rendered into Mermaid diagrams:
*
@ -35,17 +62,13 @@ export type MarkdownConfig = {
*
* @param args
*/
preprocessor?: (args: {filePath: string; fileContent: string}) => string;
preprocessor?: MarkdownPreprocessor;
/**
* Set of flags make it easier to upgrade from MDX 1 to MDX 2
* See also https://github.com/facebook/docusaurus/issues/4029
*/
mdx1Compat: {
comments: boolean;
admonitions: boolean;
headingIds: boolean;
};
mdx1Compat: MDX1CompatOptions;
};
/**

5
packages/docusaurus/src/server/__tests__/__snapshots__/config.test.ts.snap
View file

@ -17,6 +17,7 @@ exports[`loadSiteConfig website with .cjs siteConfig 1`] = `
"path": "i18n",
},
"markdown": {
"format": "mdx",
"mdx1Compat": {
"admonitions": true,
"comments": true,
@ -64,6 +65,7 @@ exports[`loadSiteConfig website with valid async config 1`] = `
"path": "i18n",
},
"markdown": {
"format": "mdx",
"mdx1Compat": {
"admonitions": true,
"comments": true,
@ -113,6 +115,7 @@ exports[`loadSiteConfig website with valid async config creator function 1`] = `
"path": "i18n",
},
"markdown": {
"format": "mdx",
"mdx1Compat": {
"admonitions": true,
"comments": true,
@ -162,6 +165,7 @@ exports[`loadSiteConfig website with valid config creator function 1`] = `
"path": "i18n",
},
"markdown": {
"format": "mdx",
"mdx1Compat": {
"admonitions": true,
"comments": true,
@ -214,6 +218,7 @@ exports[`loadSiteConfig website with valid siteConfig 1`] = `
"path": "i18n",
},
"markdown": {
"format": "mdx",
"mdx1Compat": {
"admonitions": true,
"comments": true,

1
packages/docusaurus/src/server/__tests__/__snapshots__/index.test.ts.snap
View file

@ -91,6 +91,7 @@ exports[`load loads props for site with custom i18n path 1`] = `
"path": "i18n",
},
"markdown": {
"format": "mdx",
"mdx1Compat": {
"admonitions": true,
"comments": true,

30
packages/docusaurus/src/server/__tests__/configValidation.test.ts
View file

@ -59,6 +59,7 @@ describe('normalizeConfig', () => {
},
],
markdown: {
format: 'md',
mermaid: true,
preprocessor: ({fileContent}) => fileContent,
mdx1Compat: {
@ -501,6 +502,7 @@ describe('markdown', () => {
it('accepts valid markdown object', () => {
const markdown: DocusaurusConfig['markdown'] = {
format: 'md',
mermaid: true,
preprocessor: ({fileContent}) => fileContent,
mdx1Compat: {
@ -561,6 +563,34 @@ describe('markdown', () => {
`);
});
it('accepts undefined markdown format', () => {
expect(
normalizeConfig({markdown: {format: undefined}}).markdown.format,
).toBe('mdx');
});
it('throw for bad markdown format', () => {
expect(() =>
normalizeConfig(
// @ts-expect-error: bad value
{markdown: {format: null}},
),
).toThrowErrorMatchingInlineSnapshot(`
""markdown.format" must be one of [mdx, md, detect]
"markdown.format" must be a string
"
`);
expect(() =>
normalizeConfig(
// @ts-expect-error: bad value
{markdown: {format: 'xyz'}},
),
).toThrowErrorMatchingInlineSnapshot(`
""markdown.format" must be one of [mdx, md, detect]
"
`);
});
it('throw for null object', () => {
expect(() => {
normalizeConfig({

4
packages/docusaurus/src/server/configValidation.ts
View file

@ -65,6 +65,7 @@ export const DEFAULT_CONFIG: Pick<
baseUrlIssueBanner: true,
staticDirectories: [DEFAULT_STATIC_DIR_NAME],
markdown: {
format: 'mdx', // TODO change this to "detect" in Docusaurus v4?
mermaid: false,
preprocessor: undefined,
mdx1Compat: {
@ -276,6 +277,9 @@ export const ConfigSchema = Joi.object<DocusaurusConfig>({
.optional(),
}).optional(),
markdown: Joi.object({
format: Joi.string()
.equal('mdx', 'md', 'detect')
.default(DEFAULT_CONFIG.markdown.format),
mermaid: Joi.boolean().default(DEFAULT_CONFIG.markdown.mermaid),
preprocessor: Joi.function()
.arity(1)

4
website/_dogfooding/_pages tests/markdown-tests-md.md
View file

@ -13,13 +13,13 @@ This file should be interpreted in a more CommonMark compliant way
```md
<head>
<title>HEAD Markdown Page tests title</title>
<meta name="keywords" content="cooking, blog">
<meta name="keywords" content="cooking, blog"/>
</head>
```
<head>
<title>HEAD Markdown Page tests title</title>
<meta name="keywords" content="cooking, blog">
<meta name="keywords" content="cooking, blog"/>
</head>
:::danger

42
website/docs/api/docusaurus.config.js.mdx
View file

@ -4,6 +4,8 @@ description: API reference for Docusaurus configuration file.
slug: /api/docusaurus-config
---
import APITable from '@site/src/components/APITable';
# `docusaurus.config.js`
:::info
@ -400,8 +402,24 @@ The global Docusaurus Markdown config.
- Type: `MarkdownConfig`
```ts
type MarkdownPreprocessor = (args: {
filePath: string;
fileContent: string;
}) => string;
type MDX1CompatOptions =
| boolean
| {
comments: boolean;
admonitions: boolean;
headingIds: boolean;
};
type MarkdownConfig = {
format: 'mdx' | 'md' | 'detect';
mermaid: boolean;
preprocessor?: MarkdownPreprocessor;
mdx1Compat: MDX1CompatOptions;
};
```
@ -410,12 +428,34 @@ Example:
```js title="docusaurus.config.js"
module.exports = {
markdown: {
format: 'mdx',
mermaid: true,
preprocessor: ({filePath, fileContent}) => {
return fileContent.replaceAll('{{MY_VAR}}', 'MY_VALUE');
},
mdx1Compat: {
comments: true,
admonitions: true,
headingIds: true,
},
},
};
```
- `mermaid`: when `true`, allows Docusaurus to render Markdown code blocks with `mermaid` language as Mermaid diagrams.
```mdx-code-block
<APITable>
```
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `format` | `'mdx' \| 'md' \| 'detect'` | `'mdx'` | The default parser format to use for Markdown content. Using 'detect' will select the appropriate format automatically based on file extensions: `.md` vs `.mdx`. |
| `mermaid` | `boolean` | `false` | When `true`, allows Docusaurus to render Markdown code blocks with `mermaid` language as Mermaid diagrams. |
| `preprocessor` | `MarkdownPreprocessor` | `undefined` | Gives you the ability to alter the Markdown content string before parsing. Use it as a last-resort escape hatch or workaround: it is almost always better to implement a Remark/Rehype plugin. |
| `mdx1Compat` | `MDX1CompatOptions` | `{comments: true, admonitions: true, headingIds: true}` | Compatibility options to make it easier to upgrade to Docusaurus v3+. See the [MDX 2 PR for details](https://github.com/facebook/docusaurus/pull/8288). |
```mdx-code-block
</APITable>
```
### `customFields` {#customFields}

50
website/docs/guides/markdown-features/markdown-features-intro.mdx
View file

@ -8,13 +8,47 @@ slug: /markdown-features
import BrowserWindow from '@site/src/components/BrowserWindow';
Documentation is one of your product's interfaces with your users. A well-written and well-organized set of docs helps your users understand your product quickly. Our aligned goal here is to help your users find and understand the information they need, as quickly as possible.
Docusaurus uses **[Markdown](https://commonmark.org/)** as its main content authoring format.
Docusaurus 2 uses modern tooling to help you compose your interactive documentation with ease. You may embed React components, or build live coding blocks where your users may play with the code on the spot. Start sharing your eureka moments with the code your audience cannot walk away from. It is perhaps the most effective way of attracting potential users.
:::tip Learn Markdown
:::important
You can [learn Markdown in 10 minutes](https://commonmark.org/help/).
This section assumes you are using the official Docusaurus content plugins.
:::
Docusaurus uses modern tooling to help you create **interactive documentation**.
The **[MDX](https://mdxjs.com/)** compiler transforms **Markdown files to React components**, and allows you to use JSX in your Markdown content. This enables you to easily interleave React components within your content, and create delightful learning experiences.
:::tip Use the MDX Playground
The **[MDX playground](https://mdxjs.com/playground/)** is your new best friend!
It is a very helpful debugging tool that shows how the MDX compiler transforms Markdown to React.
**Options**: select the right format (MDX or CommonMark) and the following plugins Docusaurus uses: `remark-gfm`, `remark-directive`, `rehype-raw`.
:::
## MDX vs. CommonMark {#mdx-vs-commonmark}
Docusaurus compiles both `.md` and `.mdx` files to React components using the MDX compiler, but **the syntax can be interpreted differently** depending on your settings.
The MDX compiler supports [2 formats](https://mdxjs.com/packages/mdx/#optionsformat):
- The [MDX format](https://mdxjs.com/docs/what-is-mdx/): a powerful parser allowing the usage of JSX
- The [CommonMark format](https://commonmark.org/): a standard-compliant Markdown parser that does not allow the usage of JSX
By default, **Docusaurus v3 uses the MDX format for all files** (including `.md` files) for historical reasons.
It is possible to **opt-in for CommonMark** using the [`siteConfig.markdown.format`](../../api/docusaurus.config.js.mdx#markdown) setting or the `format: md` front matter.
:::tip how to use CommonMark
If you plan to use CommonMark, we recommend the [`siteConfig.markdown.format: 'detect'`](../../api/docusaurus.config.js.mdx#markdown) setting. The appropriate format will be selected automatically, based on file extensions:
- `.md` files will use the CommonMark format
- `.mdx` files will use the MDX format
:::
@ -22,8 +56,6 @@ This section assumes you are using the official Docusaurus content plugins.
Markdown is a syntax that enables you to write formatted content in a readable syntax.
We use [MDX](https://mdxjs.com/) as the parsing engine, which can do much more than just parsing [standard Markdown syntax](https://daringfireball.net/projects/markdown/syntax), like rendering React components inside your documents as well.
```md
### My Doc Section
@ -143,9 +175,3 @@ Markdown can embed HTML elements, and [`details`](https://developer.mozilla.org/
</BrowserWindow>
```
:::note
In practice, those are not really HTML elements, but React JSX elements, which we'll cover next!
:::

17
website/docs/guides/markdown-features/markdown-features-react.mdx
View file

@ -13,24 +13,9 @@ import TabItem from '@theme/TabItem';
import styles from './markdown-features-react.module.css';
```
## Using JSX in Markdown {#using-jsx-in-markdown}
Docusaurus has built-in support for [MDX v2](https://mdxjs.com/), which allows you to write JSX within your Markdown files and render them as React components.
:::info MDX vs. CommonMark
Docusaurus parses both `.md` and `.mdx` files using MDX, but **the syntax is interpreted differently based on the file extension**:
- With the `.md` extension, the parser is compatible with [CommonMark](https://commonmark.org/) and does not allow the usage of JSX.
- With the `.mdx` extension, the parser is stricter than [CommonMark](https://commonmark.org/) and is not 100% compatible with it, but it becomes possible to use JSX.
It is also possible to override the file extension format with front matter: `format: mdx`.
The rest of this page assumes usage of the `mdx` format.
:::
Check out the [MDX docs](https://mdxjs.com/) to see what other fancy stuff you can do with MDX.
Check out the [MDX docs](https://mdxjs.com/) to see what fancy stuff you can do with MDX.
:::tip Debugging MDX

1
website/docusaurus.config.js
View file

@ -157,6 +157,7 @@ module.exports = async function createConfigAsync() {
}),
},
markdown: {
format: 'detect',
mermaid: true,
mdx1Compat: {
// comments: false,

4
website/versioned_docs/version-2.0.1/seo.mdx
View file

@ -20,7 +20,7 @@ Provide global meta attributes for the entire site through the [site configurati
module.exports = {
themeConfig: {
metadata: [{name: 'keywords', content: 'cooking, blog'}],
// This would become <meta name="keywords" content="cooking, blog"> in the generated HTML
// This would become <meta name="keywords" content="cooking, blog"/> in the generated HTML
},
};
```
@ -37,7 +37,7 @@ Similar to [global metadata](#global-metadata), Docusaurus also allows for the a
# A cooking guide
<head>
<meta name="keywords" content="cooking, blog">
<meta name="keywords" content="cooking, blog"/>
</head>
Some content...

4
website/versioned_docs/version-2.1.0/seo.mdx
View file

@ -20,7 +20,7 @@ Provide global meta attributes for the entire site through the [site configurati
module.exports = {
themeConfig: {
metadata: [{name: 'keywords', content: 'cooking, blog'}],
// This would become <meta name="keywords" content="cooking, blog"> in the generated HTML
// This would become <meta name="keywords" content="cooking, blog"/> in the generated HTML
},
};
```
@ -37,7 +37,7 @@ Similar to [global metadata](#global-metadata), Docusaurus also allows for the a
# A cooking guide
<head>
<meta name="keywords" content="cooking, blog">
<meta name="keywords" content="cooking, blog"/>
</head>
Some content...

4
website/versioned_docs/version-2.2.0/seo.mdx
View file

@ -20,7 +20,7 @@ Provide global meta attributes for the entire site through the [site configurati
module.exports = {
themeConfig: {
metadata: [{name: 'keywords', content: 'cooking, blog'}],
// This would become <meta name="keywords" content="cooking, blog"> in the generated HTML
// This would become <meta name="keywords" content="cooking, blog"/> in the generated HTML
},
};
```
@ -37,7 +37,7 @@ Similar to [global metadata](#global-metadata), Docusaurus also allows for the a
# A cooking guide
<head>
<meta name="keywords" content="cooking, blog">
<meta name="keywords" content="cooking, blog"/>
</head>
Some content...

4
website/versioned_docs/version-2.3.1/seo.mdx
View file

@ -20,7 +20,7 @@ Provide global meta attributes for the entire site through the [site configurati
module.exports = {
themeConfig: {
metadata: [{name: 'keywords', content: 'cooking, blog'}],
// This would become <meta name="keywords" content="cooking, blog"> in the generated HTML
// This would become <meta name="keywords" content="cooking, blog"/> in the generated HTML
},
};
```
@ -37,7 +37,7 @@ Similar to [global metadata](#global-metadata), Docusaurus also allows for the a
# A cooking guide
<head>
<meta name="keywords" content="cooking, blog">
<meta name="keywords" content="cooking, blog"/>
</head>
Some content...

4
website/versioned_docs/version-2.4.1/seo.mdx
View file

@ -20,7 +20,7 @@ Provide global meta attributes for the entire site through the [site configurati
module.exports = {
themeConfig: {
metadata: [{name: 'keywords', content: 'cooking, blog'}],
// This would become <meta name="keywords" content="cooking, blog"> in the generated HTML
// This would become <meta name="keywords" content="cooking, blog"/> in the generated HTML
},
};
```
@ -37,7 +37,7 @@ Similar to [global metadata](#global-metadata), Docusaurus also allows for the a
# A cooking guide
<head>
<meta name="keywords" content="cooking, blog">
<meta name="keywords" content="cooking, blog"/>
</head>
Some content...