Shiki Integration

Add syntax highlighting to your markdown code blocks using Shiki.

Problem

Your markdown code blocks render as plain text without syntax highlighting, making them hard to read and less visually appealing.

Solution

Use MDSX's @mdsx/rehype-custom-highlighter plugin with Shiki for beautiful syntax highlighting.

Implementation

Install Dependencies

		npm install -D shiki @shikijs/langs @shikijs/themes @mdsx/rehype-custom-highlighter

Setup the Highlighter

We'll use the fine-grained bundle approach to create a highlighter that only includes the languages and themes we need, as this is the recommended approach.

mdsx.config.js

		import { defineConfig } from 'mdsx';
import { createHighlighterCore } from 'shiki/core';
import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
 
const jsEngine = createJavaScriptRegexEngine();
let highlighter: Awaited<ReturnType<typeof createHighlighterCore>> | null = null;
 
const highlighterPromise = createHighlighterCore({
	themes: [import('@shikijs/themes/github-light'), import('@shikijs/themes/github-dark')],
	langs: [
		import('@shikijs/langs/javascript'),
		import('@shikijs/langs/typescript'),
		import('@shikijs/langs/svelte'),
		import('@shikijs/langs/css'),
		import('@shikijs/langs/html'),
		import('@shikijs/langs/json'),
		import('@shikijs/langs/markdown'),
	],
	engine: jsEngine,
});
 
 
export const mdsxConfig = defineConfig({
	extensions: ['.md'],
});

Use the Highlighter

We'll use the @mdsx/rehype-custom-highlighter plugin to apply the highlighter to our markdown files.

mdsx.config.js

		import { defineConfig } from 'mdsx';
import { createHighlighterCore } from 'shiki/core';
import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
 
const jsEngine = createJavaScriptRegexEngine();
let highlighter: Awaited<ReturnType<typeof createHighlighterCore>> | null = null;
 
const highlighterPromise = createHighlighterCore({
	themes: [import('@shikijs/themes/github-light'), import('@shikijs/themes/github-dark')],
	langs: [
		import('@shikijs/langs/javascript'),
		import('@shikijs/langs/typescript'),
		import('@shikijs/langs/svelte'),
		import('@shikijs/langs/css'),
		import('@shikijs/langs/html'),
		import('@shikijs/langs/json'),
		import('@shikijs/langs/markdown'),
	],
	engine: jsEngine,
});
 
const highlightOptions = {
	highlight: async ({ value, lang }) => {
		if (!lang) return value;
		if (!highlighter) {
			highlighter = await highlighterPromise;
		}
		return highlighter.codeToHtml(value, { lang });
	}
}
 
 
export const mdsxConfig = defineConfig({
	extensions: ['.md'],
	rehypePlugins: [[rehypeCustomHighlighter, highlightOptions]],
});

Usage

Now your markdown code blocks will automatically be syntax highlighted:

src/content/example.md

		# My Documentation
 
Here's some JavaScript code:
 
```js
function greet(name) {
	return `Hello, ${name}!`;
}
```

And some TypeScript:

		interface User {
	name: string;
	age: number;
}
 
const user: User = {
	name: 'John',
	age: 30,
};

CSS styling:

		.button {
	background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
	border-radius: 8px;
	padding: 12px 24px;
}

Result

Beautiful highlighting - Professional syntax highlighting with proper colors
Performance optimized - Fine-grained bundle only loads what you need
Theme support - Works with light and dark themes