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

	npm install -D shiki @mdsx/rehype-custom-highlighter	

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.

mdsx.config.js
	import { getHighlighter } from 'shiki';
 
/** @type {import('@mdsx/rehype-custom-highlighter').HighlightOptions} */
const customHighlightOptions = {
	highlight: async ({ value, lang }) => {
		const highlighter = await getHighlighter({
			langs: [
				'plaintext',
				import('shikiji/langs/typescript.mjs'),
				import('shikiji/langs/svelte.mjs'),
			],
			themes: [import('shikiji/themes/github-dark.mjs')],
		});
		//...
	},
};	

We're then converting the highlighted code to HTML using the codeToHtml method from the highlighter, and returning it.

mdsx.config.js
	import { getHighlighter } from 'shiki';
 
/** @type {import('@mdsx/rehype-custom-highlighter').HighlightOptions} */
const customHighlightOptions = {
	highlight: async ({ value, lang }) => {
		const highlighter = await getHighlighter({
			langs: [
				'plaintext',
				import('shikiji/langs/typescript.mjs'),
				import('shikiji/langs/svelte.mjs'),
			],
			themes: [import('shikiji/themes/github-dark.mjs')],
		});
		const html = highlighter.codeToHtml(value, {
			lang: lang,
			theme: 'github-dark',
		});
		return html;
	},
};	

Apply the Plugin

Now that we have our customHighlightOptions defined, we just need to apply it to our MDSXConfig.

mdsx.config.js
	import { defineConfig } from 'mdsx';
import { getHighlighter } from 'shiki';
import { rehypeCustomHighlighter } from '@mdsx/rehype-custom-highlighter';
 
// ... customHighlightOptions
 
export const mdsxConfig = defineConfig({
	extensions: ['.md'],
	rehypePlugins: [[rehypeCustomHighlighter, customHighlightOptions]],
});	

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.

	npm install -D prismjs @mdsx/rehype-custom-highlighter prism-svelte	

Define HighlightOptions

PrismJS provides a few languages out of the box, but you can also import additional languages if you need them.

mdsx.config.js
	import Prism from 'prismjs';
import 'prism-svelte';
import loadLanguages from 'prismjs/components/index.js';
 
// Load the languages you want to use
loadLanguages(['typescript']);
 
/** @type {import('@mdsx/rehype-custom-highlighter').HighlightOptions} */
const customHighlightOptions = {
	highlight: async ({ value, lang }) => {
		if (value && lang) {
			return Prism.highlight(value, Prism.languages[lang], lang);
		}
	},
};	

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! 🚀

MIT

© 2025 Svecosystem Team