在引入的md代码中，使其中的代码高亮显示

本文链接：https://blog.youkuaiyun.com/qq_52179917/article/details/127922930

本文介绍如何使用PrismJS进行代码高亮，并详细展示了配置步骤与代码示例，包括如何显示行号及自定义表格样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

结合上篇

1.装包：

cnpm i prismjs@1.24.1

cnpm i babel-plugin-prismjs@2.1.0

2. 配置babel.config.js:

module.exports = {
  presets: ["@vue/xxxxx"],
  //这里是需要配置的
  plugins: [
    [
      'prismjs',
      {
        languages: [
          'html',
          'css',
          'javascript',
          'java',
          'sql',
          'json'
        ],
        plugins: [
          'line-numbers',
          'show-language',
          'copy-to-clipboard'
        ],
        theme: 'tomorrow',
        css: true
      }
    ]
  ]
};

3. 页面中使用：

引用：

import prismjs from 'prismjs'


页面元素：
<div class="mark">
     <p v-html="ttres"></p>
</div>


js代码：
const ttres = computed(()=>{
  const res = marked(md)
  setTimeout(()=>{
    prismjs.highlightAll();
  },10)
  console.log(res)
  return res
})

【显示行号】

const ttres = computed(()=>{
  let reg = new RegExp('<pre','g');
  let content = marked(md)
  let str = content.replace(reg,`<pre class='line-numbers'`)
  const res = str
  setTimeout(()=>{
    prismjs.highlightAll();
    // prismjs.highlight(code, Prism.languages.java, 'java');
  },10)
  console.log(res)
  return res
})

【更改表格样式】

.mark {
  :deep(a) {
    color: #2A92D6;
    text-decoration:none;
  }
  height: 100%;
  overflow-y: auto;
  // overflow: scroll;
  :deep(table){
    border-spacing: 0px;
    // display: table-column;
    // background-color: rgb(105, 103, 103);
    border: 1px solid #fff;
    th {
      border-right:1px solid #fff;
      // background-color: rgb(124, 56, 56);
      background-color: #EAEAEA;
      padding: 10px;
    } 
    tr {
      background-color: #fff;
      // background-color: #EAEAEA;
      padding: 10px;
    } 
    td {
      border-right:1px solid #EAEAEA;
      border-bottom:1px solid #EAEAEA;
      padding: 10px;
    } 
    td:last-child {
      border-right:1px solid #fff;
      // border-bottom:1px solid #EAEAEA;
      padding: 10px;
    } 
  }
}