Prism.js介绍修订版本明细

源

采纳

编辑于

半兽人

Prism.js介绍

javascript

网页代码高亮插件真的是非常多。例如：SyntaxHighlighter，Google Code Prettify，Highlight.js等等。

今天介绍一个漂亮而且小巧的JS插件：Prism.js

官网地址：https://prismjs.com/index.html

为什么选用Prism.js？

除了简单，小巧之外，还有以下优点

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

使用：

你需要引入prism.css和prism.js文件：

<!DOCTYPE html>
<html>
<head>
    ...
    <link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
    ...
    <script src="prism.js"></script>
</body>
</html>

示例

本文就是使用的Prism.js，我们直接来一段代码示例

HTML：

<!DOCTYPE html>
<html>
<head>
    ...
    <link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
    ...
    <script src="prism.js"><//script>
</body>
</html>
CSS：

.container .content .copy-link{
    border:1px solid #E5E5E5;
    background:#f9f9f9;
    padding:15px 15px 15px 120px;
    margin-bottom:30px;
    position: relative;
    margin-top:90px;
}

PHP：

public function init()
{
    parent::init(); // TODO: Change the autogenerated stub
    if(Yii::$app->user->id)
    {
        $this->redirect(Url::home());
    }
}

当然，不止这么多。Prism.js还支持其他上百种的编程语言。

在线测试：https://prismjs.com/test.html

预览