IWA
2025-08-05
点 赞
0
热 度
3
评 论
0

Mp-html代码高亮配置

要设置代码高亮,你需要确保以下几点:

  1. 使用支持代码高亮的组件(如 mp-html
  2. 提供正确的代码高亮样式
  3. 配置正确的属性

在你的代码中,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;
}

/* 更多语法高亮颜色规则... */

用键盘敲击出的不只是字符,更是一段段生活的剪影、一个个心底的梦想。希望我的文字能像一束光,在您阅读的瞬间,照亮某个角落,带来一丝温暖与共鸣。

IWA

estp 企业家

具有版权性

请您在转载、复制时注明本文 作者、链接及内容来源信息。 若涉及转载第三方内容,还需一同注明。

具有时效性

文章目录

IWA的艺术编程,为您导航全站动态

11 文章数
8 分类数
9 评论数
13标签数
最近评论
M丶Rock

M丶Rock


😂

M丶Rock

M丶Rock


感慨了

M丶Rock

M丶Rock


厉害了

M丶Rock

M丶Rock


6666666666666666666

M丶Rock

M丶Rock


6666666666666666666

访问统计