109
0
4
Mp-html代码高亮配置
要设置代码高亮，你需要确保以下几点：
- 使用支持代码高亮的组件（如
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;
}
/* 更多语法高亮颜色规则... */