使用教程：Highlight.js代码高亮库

175 浏览量更新于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>

</head>

2、添加对应要显示的内容、添加对应要显示的内容

<pre>

# 读取文件内容

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>

</head>

<body>

PHP

<hr>

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>

test = {

name : function () {

return 'hello';

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38627826

粉丝: 5
资源: 939

使用教程：Highlight.js代码高亮库

prototype.js常用函数详解

在vue-cli中引入lodash.js并使用详解

jQuery.validate.js验证插件详解

jQuery.validate.js API中文详解

jQuery-validate.js API中文详解

摘《谈谈scriptaculous动画效果库effect.js(原理和使用)》

JS标签详解

jquery-1.5.1.js;jquery-1.5.1.min.js 框架

jquery.validate表单验证框架详解.docx

【JavaScript源代码】Vue Element Sortablejs实现表格列的拖拽案例详解.docx

最新资源