JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 原创

原创  更新时间:2016年11月01日 11:25:03   原创 作者:Rongbo_J  
这篇文章主要介绍了JavaScript语法高亮库highlight.js用法,详细分析了highlight.js的下载、调用及具体使用技巧,需要的朋友可以参考下

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

本文实例讲述了JavaScript语法高亮库highlight.js用法。分享给大家供大家参考,具体如下:

highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用。

这款高亮库可以用在博客系统中,其使用方法及其简单,几乎不需要任何学习成本,下面介绍highlight.js的使用。

1.获取highlight.js库,用户可以从官网获取:

地址:https://highlightjs.org/download/

highlight.js库支持在线定制,按照默认的选择点击Download即可:

或者点击此处本站下载

2.下载后解压,文件结构如下:

styles目录下为所有css样式,highlight.pack.js为库文件。

3.在html页面中引入default.css和highlight.pack.js,代码如下:

1
2
<link rel="stylesheet" href="highlight/styles/default.css">
<script src="highlight/highlight.pack.js"></script>

4.加载highlight.js库,代码如下:

1
2
3
<script>
 hljs.initHighlightingOnLoad();
</script>

5.在<pre>和<code>标签中添加要高亮显示的代码:

1
2
3
4
5
6
7
8
9
10
<pre>
<code class="php">
&lt;?php
//使用substr_replace函数进行字符串插入操作demo
$str="欢迎来到脚本之家";
echo substr_replace($str,"\"PHP大神\"",4,0);
//输出:欢迎"PHP大神"来到脚本之家
?&gt;
</code>
</pre>

class属性指定语言类别,上面代码中指定为php语言。

完整代码如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>HighLightjs</title>
 <link rel="stylesheet" href="highlight/styles/default.css">
 <script src="highlight/highlight.pack.js"></script>
<body>
<script>
 hljs.initHighlightingOnLoad();
</script>
<pre>
<code class="php">
&lt;?php
//使用substr_replace函数进行字符串插入操作demo
$str="欢迎来到脚本之家";
echo substr_replace($str,"\"PHP大神\"",4,0);
//输出:欢迎"PHP大神"来到脚本之家
?&gt;
</code>
</pre>
</body>
</html>

预览效果如下图:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数据结构与算法技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

相关文章

  • JS将图片转Base64的2种方法代码

    JS将图片转Base64的2种方法代码

    这篇文章主要给大家介绍了关于JS将图片转Base64的2种方法,base64 其实是一种编码转换方式,将ASCII字符转换成普通文本,是网络上最常见的用于传输8Bit字节代码的编码方式之一,需要的朋友可以参考下
    2024-05-05
  • 不使用jquery实现js打字效果示例分享

    不使用jquery实现js打字效果示例分享

    js打字效果示例js打字效果示例,data-period设置从打字返回删字的时间,data-rotate可加减中英文词语,不用jquery支持
    2014-01-01
  • 详解uni-app中的样式

    详解uni-app中的样式

    这篇文章主要为大家介绍了uni-app中的样式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

    自适应布局meta标签中viewport、content、width、initial-scale、minimum-sca

    这篇文章主要介绍了移动客户端手机页面布局时各标签元素作用和适用情景,通过详解几种属性让读者更明确自适应布局的注意点,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • JS+JQuery实现无缝连接轮播图

    JS+JQuery实现无缝连接轮播图

    这篇文章主要介绍了JS+JQuery实现无缝连接轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 问题解析有JSDoc还需要TypeScript吗

    问题解析有JSDoc还需要TypeScript吗

    这篇文章主要介绍了有JSDoc还需要TypeScript的问题示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • JS实现骰子3D旋转效果

    JS实现骰子3D旋转效果

    这篇文章主要为大家详细介绍了JS实现骰子3D旋转效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • JavaScript中函数的防抖与节流详解

    JavaScript中函数的防抖与节流详解

    这篇文章主要为大家详细介绍了JavaScript中函数的防抖与节流,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 解决JS使用fill()进行数组填充遇到的问题

    解决JS使用fill()进行数组填充遇到的问题

    最近在做算法题时,遇到需要创建二维数组并进行初始化的情况,刚开始我使用的是 new Array(n).fill(new Array(n).fill('.')) 进行二维数组的初始化,但无论怎样我都通不过测试用例,所以本文就给大家详细的介绍了如何解决这类问题以及将js中的fill(方法重学一下
    2023-09-09
  • JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)

    JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)

    这篇文章主要介绍了JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法的相关资料,需要的朋友可以参考下
    2016-12-12

最新评论