SyntaxHighlighter 语法高亮插件的使用教程
1. 什么是SyntaxHighlighter？
SyntaxHighlighter是一款语法高亮插件，能够将常见语言、框架和库的代码渲染成美观易读的样式。
2. 如何使用SyntaxHighlighter？
2.1 下载
首先，你需要下载SyntaxHighlighter插件，并将其解压缩到你的项目目录下。
$ wget https://github.com/syntaxhighlighter/syntaxhighlighter/archive/master.zip
$ unzip master.zip
2.2 引入 CSS 和 JavaScript 文件
在 HTML 文档中引入以下文件：
<link rel="stylesheet" type="text/css" href="syntaxhighlighter/styles/shCore.css">
<link rel="stylesheet" type="text/css" href="syntaxhighlighter/styles/shThemeDefault.css">
<script src="syntaxhighlighter/scripts/shCore.js"></script>
其中shCore.css为语法高亮器的基础样式，shThemeDefault.css为默认主题样式，shCore.js为核心 JavaScript 文件。
2.3 配置
在<head>标签中添加以下代码：
<script> SyntaxHighlighter.all(); </script>
这段代码是初始化SyntaxHighlighter语法高亮插件的必备步骤。
2.4 代码块
在 HTML 文档中添加以下代码，就可以添加一个代码块：
<pre class="brush: 语言">代码</pre>
其中，brush:后面的语言名称表示待高亮的代码的语言类型。例如，如果要高亮JavaScript代码，则可以使用<pre class="brush: js">。
3. 示例
下面是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SyntaxHighlighter 示例</title>
<link rel="stylesheet" type="text/css" href="syntaxhighlighter/styles/shCore.css">
<link rel="stylesheet" type="text/css" href="syntaxhighlighter/styles/shThemeDefault.css">
<script src="syntaxhighlighter/scripts/shCore.js"></script>
<script> SyntaxHighlighter.all(); </script>
</head>
<body>
<h2>示例</h2>
<pre class="brush: js">
function hello() {
console.log('Hello, world!');
}
hello();
</pre>
</body>
</html>
这段代码会生成一个带有JavaScript语法高亮的代码块，其中function和console等关键字都会以不同颜色高亮显示。
另一个示例是一个带有行号的Python代码块：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SyntaxHighlighter 示例</title>
<link rel="stylesheet" type="text/css" href="syntaxhighlighter/styles/shCore.css">
<link rel="stylesheet" type="text/css" href="syntaxhighlighter/styles/shThemeDefault.css">
<script src="syntaxhighlighter/scripts/shCore.js"></script>
<script> SyntaxHighlighter.all(); </script>
</head>
<body>
<h2>示例</h2>
<pre class="brush: python; toolbar: true; gutter: true">
1 class MyClass:
2
3 def __init__(self, name, age):
4 self.name = name
5 self.age = age
6
7 def say_hello(self):
8 print(f'Hello, my name is {self.name}, I am {self.age} years old.')
9
10 obj = MyClass('Tom', 25)
11 obj.say_hello()
</pre>
</body>
</html>
这段代码生成一个带有工具栏和行号的Python语法高亮的代码块。在代码块的底部，可以看到行号标识，可翻页查看长代码。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：SyntaxHighlighter 语法高亮插件的使用教程 - Python技术站
微信扫一扫 
支付宝扫一扫 