Keystone Docs

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.

Running the docs site in dev

Run yarn docs from the root of the repository

How is the website built?

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).

Adding code highlighting

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.

Collapsing part of 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 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]

Collapsing and highlighting together

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.