intro
ALL BOILERPLATE MDX AUTO-GENERATED BY SCRIPT
danger
Through painful trial and error - the following are examples of SSG rendered front matter that breaks yaml loading
Most of illegal characters can be fixed with extra quotes - APART from extra quotes being themselves!
illegal characters for YAML Front Matter
tags: ["contains:'Extra' unescaped quotes inside"]
keywords: ["contains:'Extra' unescaped quotes inside"]
keywords: []
keywords: [`wasd`]
keywords: [123]
keywords: [!_wordsbeginngingwith_!]
keywords: [>_RIGHT_ANGLE_BRACK_IS_NOT_FINE]
info
This is how the FINAL yaml should appear inside mdx - so it needs DOUBLE escaping to render correctly within SSG!
That means to output \\ it needs to be sent as \\\\!
SAFE characters for YAML Front Matter
tags: []
keywords: [`wasd`]
keywords: [123]
keywords: ["!_exclamation_in_quotes_is_fine"]
keywords: [<_LEFT_ANGLE_BRACKET_IS_FINE]
keywords: [">_RIGHT_ANGLE_BRACKET_IN_QUOTES_IS_FINE"]
tags: ['contains:\\"Extra\\" escaped quotes inside']
keywords: ['contains:\\"Extra\\" escaped quotes inside']
info
MDX is just syntactic sugar over React.createElement calls - so no unsafe characters* are allowed! Additional certain keywords are parsed by mdx-loader - so must never be mixed as plaintext.
This is even the case, if it normally works in regular React apps
UNSAFE characters for MDX (as plaintext) must be escaped!
<>
<></>
<!DOCTYPE>
Any<Typeof_TS_Generics>
import // @new line - special reserved word for mdx-loader
export // @new line - special reserved word for mdx-loader
List of safe JS keywords to start new lines with in mdx:
module
module.exports
module.exports =
module.exports = {}
require
require()
var
Import < NOT CASE SENSITIVE!
IMPORT
List of UNSAFE JS Keywords in MDX
import
export
<anyanglebracketswithoutterminating>
Any.Typescript<angleBracketNotation>
- [link back to home](/)
- [link to google](https://www.google.com)
- [link to `src/pages/intro`](/intro)
xxx
xxxLoad from docusaurus.png from @site/static/img/docusaurus.png
A random puppy avatar from Unsplash!
TITLE - H1 will not appear in TOC
Only H2 (and H3) will appear in TOC
Only H3 (and H2) will appear in TOC
ADD ALL global exports to src/theme/MDXComponents.tsx
import React from "react"
import MDXComponents from "@theme-original/MDXComponents"
import { Redirect } from "@docusaurus/router"
export default {
...MDXComponents,
Redirect,
}
Now just Add <Redirect to"\whatever" /> to mdx!
Tables
| Col1 | Col2 |
|---|---|
| A | B |
| C | D |