大家好,我是陆砚码。今天我们来聊聊一个让代码变得赏心悦目的工具——SyntaxHighlighter。
SyntaxHighlighter 是一个开源的代码高亮库,它可以帮助我们在博客、文档或者网页中更好地展示代码片段。听起来是不是很实用?接下来,我们就一起看看它是怎么做到的。
功能特性
- 多语言支持:超过 30 种编程语言,包括 JavaScript、Python、Java 等等。
- 自动识别语言:粘贴代码,自动识别语言,方便快捷。
- 自定义样式:多种预设样式,也可以通过 CSS 定制。
- 易用性:简单 HTML 标签即可实现代码高亮。
使用方法
使用 SyntaxHighlighter 非常简单,只需将以下 HTML 标签放在需要插入代码的位置:
<code><pre class="brush: language."></pre></code>其中,language 表示要使用的编程语言名称。例如,插入 JavaScript 代码,标签应为:
<code><pre class="brush: js."></pre></code>然后将您的代码粘贴在这个标签内即可。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例</title>
<link rel="stylesheet" href="http://alexgorbatchev.com/SyntaxHighlighter/styles/shCore.css">
<link rel="stylesheet" href="http://alexgorbatchev.com/SyntaxHighlighter/styles/shThemeDefault.css">
<script src="http://alexgorbatchev.com/SyntaxHighlighter/scripts/shCore.js"></script>
<script src="http://alexgorbatchev.com/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
</head>
<body>
<h1>JavaScript 示例</h1>
<pre class="brush: js;"><code>
function helloWorld() {
console.log("Hello, world!");
}
</code></pre>
<script type="text/javascript">SyntaxHighlighter.all();</script>
</body>
</html>这段代码将会显示一个包含
