前端代码高亮

前端页面,插入的代码高亮这一效果
由于用的是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

相关文章
相关标签/搜索