prism

前端 代码辅助
一个轻量级的,稳健的,优雅简洁的语法高亮插件
2019-11-07 我要评论 4 我要收藏

Prism

Prism 是一个轻量级的,稳健的,优雅简洁的语法高亮插件。这是一个从 Dabblet 拆分出来的项目

注:awesomes.cn 也是使用的 Prism 的高亮插件

你可以在 http://prismjs.com/ 学习更多的东西。

为什么需要另一个高亮插件呢?: http://lea.verou.me/2012/07/introducing-prism-an-awesome-new-syntax-highlighter/#more-1841

基本用法

引入 Prism 的 CSS 和 JS 文件

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

将要高亮的代码按照如下的格式组织:

<pre>
  <code class="language-css">
    p { color: red }
    </code>
</pre>

按照上面的步骤,代码将会被自动高亮,如果你不想代码被自动高亮,你可以给引用代码的 script 标签加上 data-manual 标记:

<script src="prism.js" data-manual></script>

然后再手动调用 API

注:手动调用的场景比较常见,比如在页面上手动书写代码让其及时高亮预览就必须手动调用 Prism 的高亮方法 Prism.highlightAll,具体调用方法请查看文档。

例子

下面我们可以看看 Prism 的源码的高亮效果:

部分 prism-core.js 代码:


/* **********************************************
     Begin prism-core.js
********************************************** */

var _self = (typeof window !== 'undefined')
    ? window   // if in browser
    : (
        (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)
        ? self // if in worker
        : {}   // if in node js
    );

/**
 * Prism: Lightweight, robust, elegant syntax highlighting
 * MIT license http://www.opensource.org/licenses/mit-license.php/
 * @author Lea Verou http://lea.verou.me
 */

var Prism = (function(){
.......

页面部分的 CSS 代码:

@import url(http://fonts.googleapis.com/css?family=Questrial);
@import url(http://fonts.googleapis.com/css?family=Arvo);

@font-face {
    src: url(http://lea.verou.me/logo.otf);
    font-family: 'LeaVerou';
}

/*
 Shared styles
 */

section h1,
#features li strong,
header h2,
footer p {
    font: 100% Rockwell, Arvo, serif;
}

页面的 HTML 代码:

<!DOCTYPE html>
<html lang="en">
<head>

<script>
    // Just a lil’ script to show off that inline JS gets highlighted
    window.console && console.log('foo');
</script>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.png" />
<title>Prism</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
<script src="prefixfree.min.js"></script>

<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="http://www.google-analytics.com/ga.js" async></script>
</head>
<body>

完整功能列表

  • 压缩后仅 2kb 大小,每个语言定义包大约只有 300-500 字节。

  • Encourages good author practices. 其它的语法高亮插件会鼓励甚至强制你使用错误的语义元素,像 <pre> 或者 <script>。而 Prism 则强制你使用正确的元素来标记代码: <code>。你需要将代码写在 <code> 标签中,可以用 <pre> 来包裹 <code>。此外,language 是以HTML5 草案推荐的方式定义的:通过形如 language-xxxx 的样式名指定。

  • language 定义是继承的。这就意味着,如果多个代码段是同一种语言,你就只需要在他们共同的父元素中定义一次。

prism 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论