做网站|网站建设,就上易助科技网

前端技术文档及相关资料下载

关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载!

JS可带行号的可扩展的代码语法高亮库Prism.js
来源:易助科技网浏览量:3收藏

简介

Prism 是一个轻量级并且简单易用的 JavaScript 类库,minified 和 gzipped 压缩后只有 1.5kb 大小,即使添加语言定义代码,最大也不会超过 2kb,是目前最小的代码高亮 Javascript 类库。

Prism 使用非常简单,只需添加 Javascript 和 CSS 就能够轻易的将其整合进项目中使用。目前它已内置了 HTML\CSS\Javascript 三种语言的高亮支持,你也可以添加新的语法高亮配置文件,只需修改 Javascipt 和 CSS 文件就行。除此之外,它也提供了额外的插件功能,让你可以新增其它功能,比如自动转换链接等,你也可以自己撰写插件。


使用

1.  引入 Prism.js 文件


2. 简单使用

<head>
<link href="prism.css" rel="stylesheet" />
</head>
<body>
<pre><code class="language-css">p { color: red }</code></pre>
<script src="prism.js"></script>
</body>

注意: class 为 language-css,如果是 javascript 就是 class="language-javascript"。


3.  扩展使用,如:带行号

在目录下插件 plugins/line-numbers 这个文件夹的全部内容就指的是行号。源代码如下:  

<head>
<link href="prism-okaidia.css" rel="stylesheet" />
<link href="prism-line-numbers.css" rel="stylesheet" />
</head>
<body>
<pre class="line-numbers"><code class="language-php">namespace my\name;
$c = new \my\name\MyClass;
$arr = [1,2,3];
trait ezcReflectionReturnInfo {
function getReturnType() { /*1*/ }
function getReturnDescription() { /*2*/ }
}
function gen_one_to_three() {
for ($i = 1; $i <= 3; $i++) {
// Note that $i is preserved between yields.
yield $i;
}
}</code></pre>
<script src="prism.js"></script>
<script src="prism-php.js"></script>
<script src="prism-line-numbers.js"></script>
</body>


相关链接

官网地址 :https://prismjs.com/

官方下载地址 :https://prismjs.com/download.html

GitHub 地址 :https://github.com/PrismJS/prism

bootCDN 下载地址:https://www.bootcdn.cn/prism/