This is for information on how use the keystone website. Please check out the style guide for the style choices of how to write keystone docs.
Run yarn docs from the root of the repository
The website is a Next.js app. It is statically rendered for deploy. Documentation is spread between mdx files and some JS files (mostly for layout).
This website uses prism, with slight modifications to code blocks for code highlighting and collapse blocks.
To add line highlights, you can use curly braces {} containing numbers or ranges separated by commas after the language.
So a base JS format would look like
\`\`\`js{5}
if you want to highlight line 5.
To highlight lines 5-10 you would write
\`\`\`js{5-10}
You can include multiple numbers and ranges:
\`\`\`js{1,3,5-10,15,17-19}
You should use code highlighting to highlight new code, or the most relevant code in a code block.
Sometimes you want to include only part of a code snippet. For this, you can collapse code blocks.
The syntax for this is
\`\`\`js[4-7]
For collapsing, you must specify a range, you cannot just specify a line.
You can specify multiple ranges to collapse
\`\`\`js[1-5,8-10]
You can include collapsing and highlighting together.
\`\`\`js{1-3}[4-5]
You can provide the two lists in any order
\`\`\`js[4-5]{1-3}
You can only include one set of collapse ranges, and one set of highlight lines.