共 2 条评论关于"highlight插件代码高亮-实现html转义-保留原始字符串换行格式"
最新评论
文章代码高亮,可以试试highlight.js,使用过程非常简单,支持普通引入,也支持工程化项目去使用。如下教程,从最基本的方式去感受下highlightjs的魅力,另外prism.js高亮插件大家也可以了解下,感觉大同小异。
1 2 3 4 5 6 7 | <link rel="stylesheet" type="text/css" href="./highlight/atom-one-dark-reasonable.css"> // js部分 <script src="./highlight.js"></script> <script> hljs.initHighlightingOnLoad(); </script> |
1 2 3 4 5 6 7 8 9 10 | <pre> <code class='css'> *{ margin:0; padding:0; list-style: none; font-family: "微软雅黑"; } </code> </pre> |
仅仅是这样是不够的,比如如果是一段html,你会发现会被浏览器给解析,导致代码消失
1 2 3 4 5 6 7 8 9 10 | <pre> <code class='javascript'> //组件中 <template> <div class="hello"> <v-chart ref="chart1" :options="option" :auto-resize="true"></chart> </div> </template> </code> </pre> |
1 2 3 4 5 6 7 8 9 10 11 | <link rel="stylesheet" type="text/css" href="./highlight/atom-one-dark-reasonable.css"> // js部分 <!-- lodash建议使用v4以下版本,否则反转_.unescape方法不支持 --> <script src="./lodash.min.js"></script> <script src="./highlight.pack.js"></script> <script> // obj.val(_.escape($content.val())); //转义 // obj.val(_.unescape($content.val())); 反转 hljs.initHighlightingOnLoad(); </script> |
上一篇:git commit提交代码报错husky > pre-commit hook failed (add –no-verify to bypass)(解决办法)
下一篇:油猴TamperMonkey脚本(浏览器最强插件)-Vip视频超前点播
最新评论
支付宝扫一扫打赏
微信扫一扫打赏
我也需要弄高亮,今天搞了半天 没讲成功。哎
@大川渝读者通过highlight应该很好弄吧,就是弄完了后那你以前发的文章可能都需要去改下高亮方式