How to change font-style of comments in code block?

[gyhyfj]

font-style of comments in code block is italic by default, how to set it to font-style: normal ?

[sharpchen]

Do you mean code block in rendered markdown?

This is specified by textmate rules from xx.json. Vitepress uses shikiji to perform highlighting(built-in themes are also from shikiji). This is my solution.

• First, get the theme represented as json you desired. If you are using built-in themes from shikiji you can find them in node_modules\shikiji\dist\themes\*.mjs. The anon object in the module is the presentation of the theme. No matter what method you take, make it a json and include it in your project.
• Then find "scope": "comment" in your json like this, add or change the fontStyle. (To make it normal, delete the fontStyle property)

{
   "scope": "comment",
   "settings": {
       "foreground": "#6A9955",
       "fontStyle":"italic" // delete it!
   }
},

• Next, we find a way to register the modified theme.

import * as shikiji from 'shikiji';
import * as fs from 'fs';

// assuming that you have these theme available in somewhere. Then find its path by name.
type CustomMarkdownTheme = 'Eva-Dark' | 'Eva-Light' | 'Rider-Dark' | 'Darcula' | 'vscode-dark-plus';

export async function getRegisteredMarkdownTheme(theme: CustomMarkdownTheme): Promise<shikiji.ThemeRegistration> {
    let isThemeRegistered = (await shikiji.getSingletonHighlighter())
        .getLoadedThemes() // this method returns names of loaded themes, name is specified in each textmate rule json.
        .find(x => x === theme);
    if (!isThemeRegistered) {
        const myTheme = JSON.parse(
            fs.readFileSync(/* find the path of your json */), 'utf8')
        );
        (await shikiji.getSingletonHighlighter()).loadTheme(myTheme);
    }
    return (await shikiji.getSingletonHighlighter()).getTheme(theme);
}

• Finally we can specify the theme in config, but this solution does not support hot reload for the theme json. If you need to reload the theme, please rebuild.

// config.mts
export default defineConfig({
    markdown: {
        lineNumbers: true,
        theme: {
            light: await getRegisteredMarkdownTheme('Eva-Light'),
            dark: await getRegisteredMarkdownTheme('vscode-dark-plus'),
        },
    },...
}

• See https://vitepress.dev/reference/site-config#markdown and https://github.com/antfu/shikiji/blob/main/docs/themes.md#load-custom-themes

[gyhyfj]

Thank you!