SyntaxHighlighter: 优雅的代码高亮工具

最新推荐文章于 2025-04-09 18:03:14 发布

翟苹星Trustworthy

最新推荐文章于 2025-04-09 18:03:14 发布

阅读量1k

点赞数 7

本文链接：https://blog.csdn.net/gitblog_00080/article/details/136757190

版权

SyntaxHighlighter: 优雅的代码高亮工具

去发现同类优质开源项目:https://gitcode.com/

是一个开源的代码高亮库，旨在帮助开发者在博客、文档或者网页中更好地展示代码片段。

项目简介

SyntaxHighlighter 提供了多种编程语言的支持，并且可以自定义样式以适应不同的主题风格。它还支持自动识别代码语言，使得插入代码变得更加方便。

功能特性

多语言支持：目前支持超过 30 种编程语言，包括 JavaScript、Python、Java 等等。
自动识别语言：只需将原始代码粘贴到 HTML 中，SyntaxHighlighter 将会自动识别代码所使用的编程语言。
自定义样式：提供多种预设样式供选择，也可以通过 CSS 进行定制。
易用性：只需要简单的 HTML 标签即可实现代码高亮。

使用方法

使用 SyntaxHighlighter 非常简单，您只需将下面的 HTML 标签放在需要插入代码的位置即可：

<pre class="brush: language;"></pre>

其中 language 表示要使用的编程语言名称。例如，如果您要插入一段 JavaScript 代码，则应将标签更改为：

<pre class="brush: js;"></pre>

然后将您的代码粘贴在这个标签内即可。

示例

以下是一个使用 SyntaxHighlighter 的例子：

<!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;">
        function helloWorld() {
            console.log("Hello, world!");
        }
    </pre>

    <script type="text/javascript">SyntaxHighlighter.all();</script>
</body>
</html>

这段代码将会显示一个包含 "Hello, world!" 文本的 JavaScript 函数。注意引入了 SyntaxHighlighter 的 CSS 和 JS 文件，并调用了 SyntaxHighlighter.all() 函数来初始化所有的代码块。