Skip to main content Podcasting 4 Value

Syntax highlighting with mdsvex

Published: 2021-12-01
Updated: 2021-12-01

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

```css
/* 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:

```js
// 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:

<script>
  import myComponent from '$lib/components/myComponent.svelte';

  export let myProp = undefined;
</script>

<div>
  <MyComponent prop={myProp}>
</div>

All these colors are in the _prism.scss file inside src/lib/assets/scss, if you’d like to change them.