使用教程：Highlight.js代码高亮库
117 浏览量
更新于2024-09-02
收藏 160KB PDF 举报
本文主要介绍了如何使用JavaScript库Highlight.js来高亮显示代码。Highlight.js是一个流行的语法高亮库，能够自动识别多种编程语言，并提供美观的样式。
在使用Highlight.js时，首先需要从官方下载地址（https://highlightjs.org/download/）下载库文件。下载后，你需要在本地创建一个新的HTML页面进行测试。以下是如何在HTML页面中集成Highlight.js的步骤：
1. 在`<head>`部分引入CSS样式表和JavaScript文件。默认情况下，你可以引用`default.css`作为样式表，这将应用基本的代码高亮样式。同时，需要引入`highlight.pack.js`作为Highlight.js的核心脚本。例如：
```html
<head>
<title>highlight</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="styles/default.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
```
这里，`hljs.initHighlightingOnLoad()`函数会在页面加载完成后自动对所有代码块进行高亮处理。
2. 接下来，你需要在HTML中添加代码片段。Highlight.js要求代码包裹在`<pre><code>`标签内，如果需要指定代码语言，可以在`<code>`标签上添加`class`属性，值为相应的语言名称。例如，以下代码段展示了Python语言的高亮：
```html
<pre>
<code class="python">
# 读取文件内容
def fread(self):
# 如果指针位置大于文件大小，说明是更换了文件
self.filename = self.getLogPath()
if not os.path.isfile(self.filename):
while not self.checkfile():
time.sleep(5)
self.filename = self.getLogPath()
self.fclose()
self.fopen()
self.pos = 0
self.hd.seek(self.pos, 0)
fline = self.hd.readline()
self.pos = self.hd.tell()
return fline.replace("\n", "")
# 将文件指针定位到文件尾部
def feof(self):
self.fopen()
# 定位到文件末尾
self.hd.seek(0, 2)
# 设置指针位置
self.pos = self.hd.tell()
</code>
</pre>
```
如果Highlight.js无法自动识别代码块的语言，就需要通过`class`属性手动指定。例如，如果没有识别出Python代码，可以像上面那样在`<code>`标签中添加`class="python"`。
Highlight.js支持超过100种不同的编程语言和标记语言，包括JavaScript、CSS、HTML、Python、Java、C++等。此外，还可以根据需求自定义样式或选择其他预设的主题。对于自定义主题，可以通过修改或创建新的CSS文件实现，然后替换HTML中的`default.css`引用。
Highlight.js是一个强大且易于使用的代码高亮库，适用于博客、文档网站或其他任何需要展示源代码的地方。只需简单几步，就可以让代码变得更加易读和美观。
JS库之库之Highlight.js的用法详解的用法详解
官网：https://highlightjs.org/
下载地址：https://highlightjs.org/download/
下载到本地后，新建个页面测试
1、在、在head中加入中加入css和和js的引用的引用
<head>
<title>highlight</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="styles/default.css" rel="external nofollow" rel="external nofollow" >
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
2、添加对应要显示的内容、添加对应要显示的内容
<pre>
<code class="python">
# 读取文件内容
def fread(self):
# 如果指针位置大于文件大小，说明是更换了文件
self.filename = self.getLogPath()
if not os.path.isfile(self.filename):
while not self.checkfile() :
time.sleep(5)
self.filename = self.getLogPath()
self.fclose()
self.fopen()
self.pos = 0
self.hd.seek(self.pos,0)
fline = self.hd.readline()
self.pos = self.hd.tell()
return fline.replace("","")
# 将文件指针定位到文件尾部
def feof(self):
self.fopen()
# 定位到文件末尾
self.hd.seek(0,2)
#设置指针位置
self.pos = self.hd.tell()
</code>
</pre>
这里需要把要显示的内容放入到 <pre><code>这里放内容…</code></pre> 这种格式中
默认的话会智能识别，若是识别不出来是什么语言，就需要在<code>标签中加入class
例如 <pre><code class="java" >xxx</code></pre> 即可
下载的时候可以选择你需要的语言，然后再打包，下载后会发现有个style文件夹，里面放了各种不同的显示颜色，为了看看都是些什么样子
我这里弄了个可以选择样式的页面
代码如下
<html>
<head>
<title>highlight</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="styles/default.css" rel="external nofollow" rel="external nofollow" >
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div id="changeStyleSelect"></div>
PHP
<hr>
<pre><code class="php">
class Test {
private $name;
private $age;
public function __construct($array) {
$this->name = $array['name'];
$this->age = $array['age'];
}
public function getName() {
return $this->name;
}
public function setName($name) {
$this->name = $name;
}
public function getAge() {
return $this->age;
}
public function show() {
printf('my name is %s,age is %d',$this->name,$this->age);
}
}
</code></pre>
javascript
<hr>
<pre>
<code class="javascript">
test = {
name : function () {
return 'hello';
},
下载后可阅读完整内容，剩余3页未读，立即下载
404 浏览量
2020-11-23 上传
2275 浏览量
点击了解资源详情
点击了解资源详情
点击了解资源详情
129 浏览量
2011-10-25 上传
309 浏览量
weixin_38627826
- 粉丝: 5
我的内容管理
展开
最新资源
- 搭建Eclipse开发Hadoop MapReduce环境指南
- 平移小波变换与MLP结合的电力负荷预测方法研究
- WPF多风格进度条演示与设计指南
- 下载免费版咸蛋超人鼠标指针，萌趣体验
- 用友U8V12.0数据字典完整解析
- Vue项目构建与部署流程详解
- LED涂覆机工作效能提升与路径优化技术研究
- VC实现高效率IOCP聊天服务器及XML数据处理
- Eclipse10实现Struts2.3登录功能的完整教程
- MFC实现简易音乐播放器的设计与源代码分享
- 防摔笔的设计与应用：行业文档深度解析
- 使用mapbox和turf.js实现自定义多边形选择功能
- 提升生活质量的站立式Android应用
- BNPMIXcluster：模型驱动的多元数据聚类分析工具
- 下载红色半透明鼠标指针，简约耐看免费体验
- 曲线计算CAD插件：提升线路设计效率
