Question

我想在我的标记中为代码添加语法高亮

目前没有语法高亮

我希望以下标记块具有语法高亮

```javascript
const list = [
{ color: 'white', size: 'XXL' },
{ color: 'red', size: 'XL' },
{ color: 'black', size: 'M' }
]
```

生成的 html 看起来是正确的

<div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"white"</span><span class="token punctuation">,</span> size<span class="token operator">:</span> <span class="token string">"XXL"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"red"</span><span class="token punctuation">,</span> size<span class="token operator">:</span> <span class="token string">"XL"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"black"</span><span class="token punctuation">,</span> size<span class="token operator">:</span> <span class="token string">"M"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div>

不知何故未加载棱镜插件

我的 examples/.vuepress/config.js 包含

module.exports = {
  title: "blog",
  theme: require.resolve("../../"),
  themeConfig: {
    // Please keep looking down to see the available options.
  },
};

和./index.js

const { dirname } = require("node:path");

module.exports = {
  plugins: [
    [
      "@vuepress/blog",
      {
        directories: [
          {
            id: "post",
            dirname: "_posts",
            path: "/",
            pagination: {
              lengthPerPage: 6,
            },
          },
        ],
        frontmatters: [
          {
            id: "tag",
            keys: ["tag", "tags"],
            path: "/tag/",
            layout: "Tag",
            frontmatter: { title: "Tag" },
            itemlayout: "Tag",
            pagination: {
              lengthPerPage: 3,
            },
          },
                ],
      },
    ],
    ["@maginapp/vuepress-plugin-katex", { delimiters: "dollars" }],
    [
      "@vuepress/search",
      {
        searchMaxSuggestions: 10,
      },
    ],
  ],
};

如何添加插件以突出显示代码块

如何在 vuepress 博客中添加语法高亮？

0 个答案: