Prism轻量级原生JavaScript语法高亮插件 - 资源分享

Prism轻量级原生JavaScript语法高亮插件

发布于 2017-05-04 字数 9977 浏览 2191 评论 0

说到语法高亮,很多做技术出身的博主应该不陌生,就是对特定的关键词使用不同的颜色,让我们能够更加清晰的看懂代码,可以说语法高亮是技术类博客的标配,让代码看起来更优雅。

Prism轻量级原生JavaScript语法高亮插件

Prism介绍

Prism 是一个轻量级并且简单易用的 JavaScript 类库,压缩版本只有 1.5kb 大小左右,即使添加了语言定义的CSS代码文件,最大也不会超过 2kb,是我目前使用过的最小的代码高亮 JavaScript 类库。

Prism 使用非常简单,只需添加 Javascript 和 CSS 就能够轻易的将其整合进项目中使用。目前它已内置了 HTML\CSS\Javascript 三种语言的高亮支持,你也可以添加新的语法高亮配置文件,只需修改 Javascipt 和 CSS 文件就行。除此之外,它也提供了额外的插件功能,让你可以新增其它功能,比如自动转换链接等,你也可以自己撰写插件。

目前 Prism 唯一的缺点就是不支持 IE8,看作者的博客介绍,也不想支持 IE8。

使用Prism

1、首先在页面的 head 中引入 Prism 的 CSS 样式文件

<link href="prism.css" rel="stylesheet" />

2、然后在 </body> 标签之前引入 Prism 类库:

<script src="prism.min.js"></script>

3、添加要高亮显示的代码,要放在 pre 标签中,设置 code 标签的样式类型为代码的类别,如下:

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

上面添加的 language-xxx 是需要代码高亮的类选择器,比如如果是PHP,那么就可以添加 language-php ,使用起来是不是很方便,详细的语言参数如下:

Markup – markup CSS – css C-like – clike
JavaScript – javascript ABAP – abap ActionScript – actionscript
Ada – ada Apache Configuration – apacheconf APL – apl
AppleScript – applescript AsciiDoc – asciidoc ASP.NET (C#) – aspnet
AutoIt – autoit AutoHotkey – autohotkey Bash – bash
BASIC – basic Batch – batch Bison – bison
Brainfuck – brainfuck Bro – bro C – c
C# – csharp C++ – cpp CoffeeScript – coffeescript
Crystal – crystal CSS Extras – css-extras D – d
Dart – dart Django/Jinja2 – django Diff – diff
Docker – docker Eiffel – eiffel Elixir – elixir
Erlang – erlang F# – fsharp Fortran – fortran
Gherkin – gherkin Git – git GLSL – glsl
Go – go GraphQL – graphql Groovy – groovy
Haml – haml Handlebars – handlebars Haskell – haskell
Haxe – haxe HTTP – http Icon – icon
Inform 7 – inform7 Ini – ini J – j
Jade – jade Java – java Jolie – jolie
JSON – json Julia – julia Keyman – keyman
Kotlin – kotlin LaTeX – latex Less – less
LiveScript – livescript LOLCODE – lolcode Lua – lua
Makefile – makefile Markdown – markdown MATLAB – matlab
MEL – mel Mizar – mizar Monkey – monkey
NASM – nasm nginx – nginx Nim – nim
Nix – nix NSIS – nsis Objective-C – objectivec
OCaml – ocaml Oz – oz PARI/GP – parigp
Parser – parser Pascal – pascal Perl – perl
PHP – php PHP Extras – php-extras PowerShell – powershell
Processing – processing Prolog – prolog .properties – properties
Protocol Buffers – protobuf Puppet – puppet Pure – pure
Python – python Q – q Qore – qore
R – r React JSX – jsx Reason – reason
reST (reStructuredText) – rest Rip – rip Roboconf – roboconf
Ruby – ruby Rust – rust SAS – sas
Sass (Sass) – sass Sass (Scss) – scss Scala – scala
Scheme – scheme Smalltalk – smalltalk Smarty – smarty
SQL – sql Stylus – stylus Swift – swift
Tcl – tcl Textile – textile Twig – twig
TypeScript – typescript Verilog – verilog VHDL – vhdl
vim – vim Wiki markup – wiki Xojo (REALbasic) – xojo
YAML – yaml

相关链接

官网:http://prismjs.com/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0