Guides
Syntax Highlighting
Integrate popular syntax highlighters into your markdown files.
We've put together a few guides for some of the more popular syntax highlighters to help you get started. Before proceeding, we recommend reading more about our Custom Highlighter.
Shiki
Shiki is a beautiful syntax highlighter that supports many different languages and themes, and is the syntax highlighter we use for this site. It supports TextMate themes, so you can use any of the themes from VS Code's theme marketplace.
Install Shiki
Define HighlightOptions
Shiki requires you to import the languages and themes you want to use. This can be a bit cumbersome, but the benefit is that you only bundle the languages and themes you need.
In the example below, we're importing a few of the more common languages, as well as the GitHub Dark theme.
We're then converting the highlighted code to HTML using the codeToHtml
method from the highlighter, and returning it.
Apply the Plugin
Now that we have our customHighlightOptions
defined, we just need to apply it to our MDSXConfig
.
Now you're using Shiki with MDSX! 🎉
This isn't an exhaustive list of syntax highlighters supported, so if you have a syntax highlighter that you'd like to add a guide for, feel free to open a PR on GitHub.
PrismJS
Learn how to integrate PrismJS into your MDSX project.
Install PrismJS
We'll need to install PrismJS and our custom highlighter plugin. Optionally, you can also install the prism-svelte
package to support syntax highlighting Svelte.
Define HighlightOptions
PrismJS provides a few languages out of the box, but you can also import additional languages if you need them.
Add a Theme
PrismJS doesn't include a theme by default, so you'll need to grab one from the PrismJS theme repository. The themes are CSS stylesheets that you can copy and paste into your project.
Once you've applied the theme, you now have syntax highlighting with PrismJS! 🚀