Prism.js介绍

半兽人 发表于: 2018-12-08   最后更新时间: 2020-03-28  

网页代码高亮插件真的是非常多。例如:SyntaxHighlighterGoogle Code PrettifyHighlight.js等等。

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

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

为什么选用Prism.js?

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

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

使用:

你需要引入prism.cssprism.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



您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: marked.js介绍
下一条: Github-markdown-css介绍