前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

JavaScript/前端
394
0
0
2022-05-04
标签   JavaScript库
highlight.js是一个开源(BSD协议)的语法高亮显示插件,支持176中语言高亮显示(如Java、C++、C#、GO、PHP、Python等)、79中风格,支持自动检测语言,适用于任何标记,与任何js框架兼容,不依赖于任何框架。

1、快速开始

https://github.com/isagalaev/highlight.js

下载完成后解压,把解压后的文件放到项目任意位置,在页面中引入任意一种风格和highlight.pack.js。

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

在body中创建元素,highlight.js会自动检测语言,如果无法检测出正确语言,请使用class属性设置语言。

<pre><code class="java">代码</code></pre>

运行一下脚本初始化即可,不需要任何其他代码一个高亮显示就做好了。

<script>hljs.initHighlightingOnLoad();</script>

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

2、风格展示

①solarized-dark

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

②solarized-light

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

③railscasts

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

④monokai-sublime

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

⑤vs

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

⑥github

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

⑦color-brewer

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

⑧zenburn

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

3、语言展示

①swift

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

②css

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

③go

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

④typescript

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

⑤json

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

⑥python

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

⑦xml

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

⑧javascript

前端开发:一个语法高亮显示的JavaScript插件(highlight.js)

有哪里写得不好的地方请大家提出来,请轻喷,谢谢。 同时有什么与编程相关的好东西可以推举给我,再次感谢!