如何解决如何在 vuepress 博客中添加语法高亮?
我想在我的标记中为代码添加语法高亮
目前没有语法高亮
我希望以下标记块具有语法高亮
```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,};
如何添加插件以突出显示代码块
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。