コードブロックのカスタマイズ

import molokaiTheme from './src/styles/molokai-shiki-theme.json' with { type: 'json' };

export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: molokaiTheme,
    },
  },
});

{
  "$schema": "https://raw.githubusercontent.com/shikijs/textmate-grammar-themes/main/themes/vscode/theme.schema.json",
  "name": "molokai",
  "displayName": "Molokai",
  "type": "dark",
  "colors": {
    "editor.background": "#1B1D1E",
    "editor.foreground": "#F8F8F2"
  },
  "tokenColors": [
    {
      "name": "Comment",
      "scope": ["comment", "punctuation.definition.comment", "string.quoted.docstring"],
      "settings": {
        "fontStyle": "italic",
        "foreground": "#75715E"
      }
    },
    {
      "name": "String",
      "scope": ["string", "constant.other.symbol", "constant.character", "constant.other.key", "markup.raw.block", "markup.raw.inline"],
      "settings": {
        "foreground": "#E6DB74"
      }
    },
    {
      "name": "Number / Constant",
      "scope": ["constant.numeric", "constant.language", "constant.other", "variable.other.constant", "support.constant", "punctuation.definition.constant"],
      "settings": {
        "foreground": "#AE81FF"
      }
    },
    {
      "name": "Keyword / Operator / Statement",
      "scope": ["keyword", "keyword.control", "keyword.operator", "storage", "storage.type", "storage.modifier", "keyword.other", "keyword.control.flow", "keyword.control.import", "keyword.control.export", "keyword.control.from", "keyword.control.default"],
      "settings": {
        "foreground": "#F92672"
      }
    },
    {
      "name": "Function name",
      "scope": ["entity.name.function", "support.function", "meta.function-call", "variable.function", "entity.name.method"],
      "settings": {
        "foreground": "#A6E22E"
      }
    },
    {
      "name": "Type / Class / Support type",
      "scope": ["entity.name.type", "entity.name.class", "entity.name.namespace", "entity.other.inherited-class", "support.type", "support.class", "storage.type.class", "keyword.other.type"],
      "settings": {
        "fontStyle": "italic",
        "foreground": "#66D9EF"
      }
    },
    {
      "name": "Parameter",
      "scope": ["variable.parameter", "meta.parameter", "variable.parameter.function"],
      "settings": {
        "foreground": "#FD971F"
      }
    },
    {
      "name": "Tag",
      "scope": ["entity.name.tag", "meta.tag", "punctuation.definition.tag"],
      "settings": {
        "foreground": "#F92672"
      }
    },
    {
      "name": "Attribute",
      "scope": ["entity.other.attribute-name", "meta.attribute"],
      "settings": {
        "foreground": "#FD971F"
      }
    },
    {
      "name": "Property / Object key",
      "scope": ["variable.other.property", "variable.other.object.property", "meta.object-literal.key", "entity.name.function.constructor", "support.variable.property"],
      "settings": {
        "foreground": "#A6E22E"
      }
    },
    {
      "name": "Variable",
      "scope": ["variable", "variable.other", "variable.object.property", "meta.definition.variable"],
      "settings": {
        "foreground": "#F8F8F2"
      }
    },
    {
      "name": "Punctuation",
      "scope": ["punctuation", "punctuation.separator", "punctuation.terminator", "meta.brace", "punctuation.definition.block", "punctuation.section"],
      "settings": {
        "foreground": "#F8F8F2"
      }
    },
    {
      "name": "Decorators / PreProc",
      "scope": ["meta.preprocessor", "punctuation.definition.annotation", "meta.annotation", "entity.name.function.decorator", "keyword.control.directive"],
      "settings": {
        "foreground": "#A6E22E"
      }
    },
    {
      "name": "Markup heading",
      "scope": ["markup.heading", "markup.heading entity.name"],
      "settings": {
        "fontStyle": "bold",
        "foreground": "#A6E22E"
      }
    },
    {
      "name": "Markup link",
      "scope": ["markup.underline.link", "string.other.link", "constant.other.reference.link"],
      "settings": {
        "foreground": "#66D9EF"
      }
    },
    {
      "name": "Markup bold",
      "scope": ["markup.bold"],
      "settings": {
        "fontStyle": "bold",
        "foreground": "#F92672"
      }
    },
    {
      "name": "Invalid",
      "scope": ["invalid", "invalid.illegal"],
      "settings": {
        "foreground": "#F92672"
      }
    }
  ]
}