可怜大胆的Javascript代码高亮插件,Ghost参加Pris

作者: 科技展览  发布:2019-08-17

出于官方网址的排版难点,部分剧情只怕未有截图完整,下边再看一下它协理的插件

2. 下载prism css和js文件

挑选甘休之后,点击上边2个大开关:Download JS Download CSS ,然后会下载获得三个文件:

prism.css
prism.js

将prism.css放在核心文件夹的assets/css/目录中,将prism.js放到assets/js/目录中。

图片 1

常见的代码高亮展现的框架有Prism和highlight.js,highlight以前使用过,略微显得有个别麻烦,然后这一次选用时,看了下prism,感到使用仿佛尤其轻松。而至于包容性,作者认为:

引言

4. 重启ghost服务

重启ghost服务,然后就顺理成章来。

funky主题Okaidia宗旨样式

3. 修改模板代码

在宗旨文件夹中,找到default.hbs张开,在</head>踏入以下代码

{{# if post}}
    <link rel="stylesheet" type="text/css" href="/assets/css/prism.css" />  
{{/if}}

接下来找到post.hbs张开,在{{/post}}末尾加入上边代码

<script src="/assets/js/prism.js" type="text/javascript"></script>

宗旨接纳

下面来探视,ghost中,如何进入prism。

言语帮衬

1. 探访官方网站生成css和js文件

官方网站链接:http://prismjs.com/download.html

主要有多少个选项:

  1. 选料大旨
  2. 选拔需求辅助高亮的言语
  3. 选料须求的插件

核心得以友善预览,然后选取自个儿喜欢的宗旨。别的的,假如有选用纠结症的同桌,能够一直全选。坏处是,正是生育的js和css大学一年级点而已嘛:)

图片 2

不用chrome的费用,不是四个好技士。

骨干用法规范的写法大家须求选拔pre和code标签,就好像上面那样,code的class能够钦命显示的言语<pre>

由此,包容性作为叁个技艺类博客来讲,基本不用多思索。

// 你想使用高亮的代码片段

5. 日常什么运用

比方,我们要让一段java代码高亮展现,则按如下格局写:

```java
public class Test{
//.......
}
# ``` //把#号去掉,这里是因为避免转义,所以加了个#号

语言协助

大家这里运用React的一段代码举行事必躬亲,它是帮助JSX代码高亮的暗中认可的主旨样式

Solarized Light主旨Torrow Night主旨样式

图片 3

Twilight大旨coy主旨样式

图片 4

import Prism from 'prismjs';

</pre>

图片 5

图片 6

前些天要介绍的是一款在Web开荒中的轻量级代码高亮插件——PCRUISERISM,它是三个基于当代Web开垦语言专门的学业塑造的,在众多网址都应用到了它。比如大家纯熟的React官方网址,就用到了它,上面截图就足以见到效果。

图片 7

插件援救

<code >p { color: red }</code>

Okaidia主旨Twilight核心样式

笔者这里分别选拔JavaScript、Java、C#和Python语言举办了差不离的测验,使用的是官方网站提供的Coy大旨,效果如下图,还可能有太多的言语就不一一测量检验了。

Prism援助的语言实在是太多了,小编那边就不在一一演示,我们感兴趣的可以自身去商讨研讨,官方网站提供了总体的Demo,还协理各类增加,比方展现行号那样的须要,它都得以兑现,代码高亮的插件有这一个,我们能够在争论区留下您自个儿行使的哪二个,每款插件都只是一种选用,选用二个顺应本身的只怕本人垂怜的就足以了,希望本文对你有着帮忙,多谢扶助!

图片 8

图片 9

实例常见语言测量检验

prism提供了差十分的少全体语言的支撑,大家截图大约看一下它协助的言语:

图片 10

笔者们来品尝稍微复杂点的,右上角会展现语言和复制,非常的实用,例如大家搭建本人的博客也许记录笔记等气象。

宗旨预览

呈现的意义如下,那是三个最简便易行的实例

本条地点也许需要Babel-plugin-prmjs插件来管理你的语言等等配置。在nodejs中央银行使var Prism = require('prismjs');

图片 11

大面积语言ES6或然其余用法$ npm install prismjs

react官网

var code = "var data = 1;";

图片 12

图片 13

图片 14

Dark主旨funky大旨样式

语言辅助

// 再次回到贰个html字符串

图片 15

coy主旨Solarized Light宗旨样式

作者选取的是压缩版,然后勾选上了具有插件和富有帮忙的言语,prism.js和prism.css合在共同大小是370.62k。实际上大家历来用持续这么多,由此我们在用的时候从比不上此大。基本采纳方法首先我们得在页面援用我们的css和js文件

实例

图片 16

图片 17

官方网站给大家提供了自定义的下载prism的艺术,即大家得以分主旨,分帮助的语言、分扩张插件、以及分开荒版和压缩版,如下图所示:

var html = Prism.highlight(code, Prism.languages.javascript, 'javascript');

图片 18

Torrow Night总结

图片 19

暗中同意宗旨Dark主旨样式

本文由香港最快开奖结果发布于科技展览,转载请注明出处:可怜大胆的Javascript代码高亮插件,Ghost参加Pris

关键词: 今晚最快开