开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 10 天，点击查看活动详情

前言

最近做到一个业务需求,需要将代码片段实现高亮,后来在npm和github上找了一圈,终于在掘金发现了蛛丝马迹.

开胃菜

其实社区有很多的优秀的高亮代码的插件,比如highlinght、SynctaxHightlighter等等,但是他们都不符合我的需求,本质上也是利用了textarea和pre组合而成,但是我需要的是能够将纯文本转为html代码,这时prism.js便来到我的视线,进入到我两天一夜的开发时间.

主角登场

prism.js是什么? prism.js是一款特别轻量(压缩后仅仅只有2KB)、可扩展(可以在node中使用)的代码高亮库.

为什么要选择prism.js? 遇到平时的需求都是hightlinght.js一把梭,但是遇到我上述说的那样,便不可能了.

引用prism.js和prism.js,使用合适的html标签及上一个class类,如code-language-xxx
语言的css是可以继承的,这可以使你的代码简洁,毋需写多次.
代码压缩后很小,只有2KB缩小和压缩（核心),每个语言定义大约增加 300-500 个字节。
如果可能，支持通过Web Workers实现并行。
定义新语言或扩展现有语法，或者新增功能都非常简单。
所有的样式通过 CSS 完成，并使用合理的类名如：.comment, .string, .property 等

大杀四方

下载地址:prismjs.com


    <pre class="line-numbers"><code class="language-js">require("lib/ace"); ##引入
editor.setTheme("ace/theme/solarized_dark");##设置模theme-solarized_dark.js模板文件
editor.getSession().setMode("ace/mode/javascript"); ##设置程序语言模式
editor.setValue("the new text here");##设置内容
editor.getValue(); ##取值</code></pre>

<div id="box"></div>

var text =
      '<link href="https://cdn.bootcss.com/prism/1.15.0/themes/prism.css" rel="stylesheet">\n' + '<p>js操作html数据绑定</p>';
    var text = $('#code-1').text(text)


// The code snippet you want to highlight, as a string
const code = `var data = 1;`;

// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.javascript, 'javascript');

document.querySelector('#box').innerHTML = html

如何实现代码高亮-prism.js

前言

开胃菜

主角登场

大杀四方