要设置代码高亮,你需要确保以下几点:
- 使用支持代码高亮的组件(如
mp-html
) - 提供正确的代码高亮样式
- 配置正确的属性
在你的代码中,mp-html
组件已经有一些代码高亮相关的属性了,比如 :showLineNumber="true"
和 :showLanguageName="true"
。要完善代码高亮,你可以这样做:
<view v-else>
<mp-html
class="evan-markdown"
lazy-load
:domain="markdownConfig.domain"
:loading-img="markdownConfig.loadingGif"
:scroll-table="true"
:selectable="true"
:tag-style="markdownConfig.tagStyle"
:container-style="markdownConfig.containStyle"
:content="result.content.raw"
:markdown="true"
:showLineNumber="true"
:showLanguageName="true"
:copyByLongPress="true"
:highlight="true" <!-- 确保启用高亮 -->
/>
</view>
然后在你的 markdownConfig
中,确保有代码高亮相关的样式配置:
markdownConfig: {
domain: 'your-domain',
loadingGif: 'loading-gif-path',
tagStyle: {
// 代码高亮相关样式
pre: 'background-color: #f6f8fa; border-radius: 6px; padding: 16px;',
code: 'font-family: Menlo, Monaco, Consolas, "Courier New", monospace;',
// 其他标签样式...
},
containStyle: 'your-container-style'
}
另外,确保你已经引入了代码高亮的 CSS 样式文件。如果你需要自定义高亮主题,可以在全局 CSS 中添加类似这样的样式:
/* 代码高亮主题样式 */
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #f6f8fa;
color: #333;
}
.hljs-comment,
.hljs-quote {
color: #6a737d;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
color: #d73a49;
}
/* 更多语法高亮颜色规则... */