prism - Awesomes - 程序猿·D·安宇雨 DeepMind

prism - Awesomes

安宇雨 - 随手采集
2018-10-09 10:11:55
前端开发
javascript

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 定义是继承的。这就意味着，如果多个代码段是同一种语言，你就只需要在他们共同的父元素中定义一次。

Original url: Access

Created at: 2018-10-09 10:11:54

Category: default

Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到