JUNER

一些笔记,一点生活

最怕一生碌碌无为,还说平凡难能可贵。最好的输入,是输出;最佳的成长,是分享。

使用highlight.js让网站的代码高亮

笔记 · 2019-11-19修改 · 2019-11-19 15:52:18 · 0

highlightjs官网截图.png

Highlight.js是一个可以给pre标签中的代码高亮的插件,highlight不依赖于第三方js库,支持185种语言和89种样式风格,它可以自动检测语言,完美兼容各种框架。

打开highlight官网后点击language可以切换预览语言,style可以切换代码显示的样式,我选择了atom-one-dark的样式。

准备资料

进入highlight官网下载 https://highlightjs.org/download/ 下载前可以选择你需要的语言。将下载好的压缩包解压缩后,你会发现styles文件夹有几十种风格css可以选择,默认是default.css,如果要换风格,直接将default.css换掉即可。比如我使用的是atom-one-dark那么改成atom-one-dark.css将js和css文件加入到html中。

highlightjs压缩包展示.png

使用教程

1、先引入需要的文件以下代码

<link rel="stylesheet" href="atom-one-dark.css">
<script src="highlight.min.js"></script>

2、为需要高亮的代码添加pre标签

<pre><code>这里就是要显示高亮的代码</code></pre>

3、使用工具将你的代码转换成自带高亮标签的代码。再放到pre>code标签里面。此方法无需调用initHighlightingOnLoad方法,即可高亮。

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

大功告成。就是三个步骤highlight.js即可让您网站的代码高亮起来。


相关内容

JavaScript变量 - 给数据起个名字

在程序里面数据可以由变量来表示,变量其实就是数据的一个名字,命名了这个数据以后,在程序里面就可以使用变量来代替具体的数据。在JavaScript里面,想要使用一个变量,需要声明一下,声明变量使用 va...

笔记 · 2020-02-27修改 · 2020-02-27 09:45:36 · 24422

Javascript输入输出语句

Javascript(js)是一门编程语言,可以帮助我们在网页中实现和用户的一种交互效果,比如说我们可以弹出一个输入框让用户输入内容,然后让程序内部去处理,处理完之后,再把结果返回给用户,这就是我们一...

笔记 · 2019-12-24修改 · 2019-12-24 22:16:20 · 214352

Swiper插件设置禁止鼠标拖动

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。用swiper插件做PC端分屏项目一定能用到的目前遇到的问题是,客户想复制轮播上的文案,却不能复制,一拖拉轮...

笔记 · 2019-11-26修改 · 2019-11-26 11:13:57 · 52107

Mac系统更新Node最新版本

第一步,先查看本机node.js版本:node-v第二步,清除node.js的cache:sudonpmcacheclean-f第三步,安装 n 工具,这个工具是专门用来管理node.js版本的,别怀...

笔记 · 2019-11-19修改 · 2019-11-19 16:04:35 · 22147