vue中实现代码高亮


在vue中使用prismjs


 

  1 首先在项目中安装prismjs插件:

cnpm install prismjs -S

  2 安装完成后,需要继续安装一个prismjs的编译器插件

cnpm install babel-plugin-prismjs -D

  3 在.babelrc文件中配置使用该插件:  

{
  "plugins": [
    ["prismjs", {
      "languages": ["javascript", "css", "markup"],
      "plugins": ["line-numbers"],
      "theme": "twilight",
      "css": true
    }]
  ]
}

5 prismjs 官网地址:https://prismjs.com/

 

在html中使用


首先进入 https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript 页面定制下载页面样式

然后在网页中引入

<link href="/static/prismjs/prism.css" rel="stylesheet" type="text/css">


<script src="/static/prismjs/prism.js"></script>

<script>
    //jquery版
    $('pre').each( function() {
        $(this).html('<code class="language-php">'+ $(this).html() +'</code>')
    })

</script>

 

 

发布时间 : 2023-03-01,阅读量:3427 , 分类: Vue Html
本文链接:https://upwqy.com/details/243.html
解决element-ui el-input输入框内容无法修改的问题 vue中使用v-for报错:You are binding v-model directly to a v-for iteration alias.