Codeblock

To use codeblock in your documentation, you can use code (single backticks) tag for inline code. And pre tag for block code. In MDX for code should be inside triple backticks (```).

Example.

Inline code: const a = 1;

Block code:

const a = 1;
const b = 2;
const c = a + b;

Specify the code language

To highlight the code syntax, you can specify the code language after the first triple backticks. For example, ```ts to use TypeScript code colors.

The full list of available languages you can find on shiki website here.

Highlight the code line

After the code language, you can specify the line number to highlight. For example, ```ts {1-3,6} to highlight row numbers 1-3 and 6.

const options = {
  getHighlighter: (options) =>
    getHighlighter({
      ...options,
      langs: [
        "plaintext",
        async () => JSON.parse(await readFile("my-grammar.json", "utf-8")),
      ],
    }),
};

Add code row number

To add row number to the code block, you can use showLineNumbers option. For example, ```ts showLineNumbers

const options = {
  getHighlighter: (options) =>
    getHighlighter({
      ...options,
      langs: [
        "plaintext",
        async () => JSON.parse(await readFile("my-grammar.json", "utf-8")),
      ],
    }),
};

Add code row number with line highlight

It's easy to do. Just use a combinations of props.

For example, ```ts {2-3} showLineNumbers

const options = {
  getHighlighter: (options) =>
    getHighlighter({
      ...options,
      langs: [
        "plaintext",
        async () => JSON.parse(await readFile("my-grammar.json", "utf-8")),
      ],
    }),
};

Advanced usage

If you need even more Advanced customization of color highlighting, you can read docs for rehype-pretty-code plugin here.