Syntax highlighting with mdsvex

Published: 2023-01-05

mdsvex has automatic, built-in syntax highlighting with Prism.js; just include the language name after the triple backticks, like so:

/* Your CSS here */

And that will render just like so:

.my-css-class {
	color: #ffd100;
	box-sizing: border-box;
	/* etc... */

Here’s how you’d do JavaScript:

// You can use js or javascript for the language

Highlighted code sample:

const invertNumberInRange = (num, range) => {
	return range - num;

invertNumberInRange(25, 100); // 75

Of course, mdsvex supports Svelte highlighting, too:

	import myComponent from '$lib/components/myComponent.svelte';

	export let myProp = undefined;

	<!-- <MyComponent prop={myProp}> -->

All these colors are in src/lib/assets/css/prism.css, if you’d like to change them.

Reinis Kromulis