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/
首先进入 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