SyntaxHighlighter Code Highlighting

Code Highlighters Built into the Theme Pack

This theme pack provides two built-in code highlighters for you to use:

• Prism
• Shiki

Prism is one of the most popular syntax highlighters. It inserts tags into the code text to wrap the elements that need to be highlighted and sets the highlight style through a CSS file. You can use the themes officially provided by Prism directly, or quickly create your own highlight theme through prism-theme-vars.

Shiki is a code highlighter based on TextMate syntax. It directly generates styled wrapping elements, so no additional CSS files are required. Because it is based on TextMate syntax, the generated highlight blocks are very accurate and similar to VS Code. At the same time, this also means that shiki can support any vscode theme pack. Shiki also provides many preset themes. However, shiki needs to customize the highlight through TextMate themes, which can be more troublesome.

You can choose which highlighter to use yourself:

• Prism is easier to customize the style
• Shiki generates more accurate highlight blocks

By default, this theme pack uses shiki, and you can modify the settings in frontmatter:

shiki Highlight Examples

TSX Highlighting

Diff