Prism.js实现代码高亮并添加行号

先上效果:

Prism.js实现代码高亮并添加行号_第1张图片










Prism.js实现代码高亮并添加行号_第2张图片

Prism.js

Prism 是一款轻量、可扩展的代码语法高亮库,使用现代化的 Web 标准构建。
使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁、高效的代码高亮解决方案。

为什么选Prism.js?

极致易用
引用 prism.css 和 prism.js,使用合适的 HTML5 标签(code.language-xxxx),搞定!
天生伶俐
语言的 CSS 类是可继承的,所以你只需定义一次就能应用到多个代码片段。
轻如鸿毛
代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB,主题在 1KB 左右。
快如闪电
如果可能,支持通过 Web Workers 实现并行。
轻松扩展
定义新语言或扩展现有语法,或者新增功能都非常简单。
丰富样式
所有的样式通过 CSS 完成,并使用合理的类名如:.comment, .string, .property 等



使用步骤

  • 访问官网
https://prismjs.com/download.html
  • 选择主题
    Prism.js实现代码高亮并添加行号_第3张图片

  • 选择你需要的代码高亮 (默认会带一些,自己看看需要点上就行)
    Prism.js实现代码高亮并添加行号_第4张图片

  • 添加行号插件
    Prism.js实现代码高亮并添加行号_第5张图片

  • 下载JS和CSS
    Prism.js实现代码高亮并添加行号_第6张图片


  • 项目中引入JS和CSS
DOCTYPE html>
<html>
<head>
...
<link href="prism.css" rel="stylesheet" />
head>
<body>
sungz.com
<script src="prism.js">script>
body>
html>

注意你的代码块需要遵循HTML5 标准,Prism 使用语义化的

 元素和  元素来标记代码区块:

p { color: red }


  • 根据官方文档提示,开启行号需要给pre标签的class属性添加“line-numbers”值,给 style 属性添加 “white-space: pre-wrap”值,让其自动换行

使用jQuery演示:

<script type="text/javascript">
  $('pre').addClass("line-numbers").css("white-space", "pre-wrap");
script>



效果展示:

Prism.js实现代码高亮并添加行号_第7张图片


最后鸣谢
https://www.sungz.com/prism-js-daima/

你可能感兴趣的:(javascript,开发语言,ecmascript)