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技术站