跳转到主内容
思享编程网:思考分享,玩转编程世界!

如何优雅地展示代码片段?SyntaxHighlighter 是神器!

大家好,我是陆砚码。今天我们来聊聊一个让代码变得赏心悦目的工具——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>

这段代码将会显示一个包含

相关文章