VitePress fenced code block syntax highlighting quirks with .NET or other languages.

This post was originally published at https://mysticmind.dev/vitepress-fenced-code-block-syntax-highlighting-quirks-with-net-or-other-languages

VitePress uses Shiki for syntax highlighting which is a fantastic library. Shiki automatically fetches language grammar from VSCode so the language names etc for the fenced code block comes from it.

For .NET, the language names captured are csharp and fsharp by default. This means that the syntax highlighting will work only if you use csharp or fsharp. But idiomatic usage use the file extensions cs and fs for syntax highlighting so this tends to be an issue. I did send a PR to Shiki to resolve this. But there are many moving parts i.e. Shiki will need to do a release with the fix then VitePress picking it up and in turn do a release.

If you are stuck, not only with .NET languages or any other language as well, there is a easy fix under your control. Edit your VitePress config.js file and add the following:

import { BUNDLED_LANGUAGES } from 'shiki'

// Include `cs` as alias for csharp
BUNDLED_LANGUAGES
  .find(lang => lang.id === 'csharp').aliases.push('cs');

// Include `fs` as alias for fsharp
BUNDLED_LANGUAGES
  .find(lang => lang.id === 'fsharp').aliases.push('fs');