👩🎓 Level: Intermediate
patternplate supports Markdown for global as well as component documentation.
Markdown in patternplate supports all features of GitHub flavored markdown.
Additionally you can configure the order and display of documentation via frontmatter blocks.
Documentation that is independent of components is picked according to the docs glob pattern
in patternplate.config.js. The default is ["docs/**/*.md", "README.md"].
This means in the tree below README.md, docs/readme.md and docs/design/colors.md
is picked up.
tree .
.
├── CHANGELOG.md
├── README.md
└── docs
├── design
│ └── colors.md
└── readme.md
2 directories, 4 files
By default the first # headline in the document is the name of the doc item in patternplate's sidebar. If no # headline is found the filename is used instead.
Documentation that relates to a single pattern is placed next to the pattern sources.
The supported file names are README.md, readme.md and index.md.
Those files are rendered below the demo of their pattern.
Documentation in patternplate entries support frontmatter blocks. Supported
properties are: order and options.displayName.
–––
displayName: Read this first
options:
order: 0 # first in sidebar
–––
Markdown codeblocks with an explicit language are hightlighted automatically.
E.g. the following markdown snippet
```js
console.log("Hello world");
```
renders to the following code block with syntax highlighting.
console.log("Hello world");
Markdown in patternplate can highlight the following languages:
html, xmlcssjs, jsxts, tsxjsonmdbashdiff, patch