前端页面,插入的代码高亮这一效果
由于用的是ecshop 这一坑货。里面仍是老的fckeditor,
连个插入代码段的功能都没有。
先是换上了ueditor,
有了插入代码块功能。javascript
但代码并无高亮呀。。。
而后就纠结。。。
碰巧,开源中国的编辑器就是用代码高亮的。。。
而后,右键,查看元素。。。
嗯,ckeditor
而后又弄掉了百度编辑器,换了上ckeditor。
。。。
而后。昨不同。。
又花费了时间,看了ckeditor用使用。。。
终于能插入代码段了。
也有那么一点点,高亮。。。
本觉得成功的时候。。。
打开前台一看。
并无。仍是那个丑样。
。。。
折折腾腾。
好吧。
前端代码高亮。
只是引入了js和css
对相应的code 进行匹配替换css
<pre> <code class="language-js"> var Prism = require('prismjs'); // The code snippet you want to highlight, as a string var code = "var data = 1;"; // Returns a highlighted HTML string var html = Prism.highlight(code, Prism.languages.javascript); </code> </pre>
根据<code class="language-js">里language相应的语言,高亮js,对其,进行相应的css来进行修饰。html