溫馨提示×

如何使用SyntaxHighlighter進(jìn)行代碼高亮

小樊
81
2024-10-16 06:20:00
欄目: 編程語言

SyntaxHighlighter 是一款用于代碼高亮的 JavaScript 庫，它可以將代碼轉(zhuǎn)換成不同顏色和格式的標(biāo)記，使得代碼更易于閱讀和理解。

以下是如何在網(wǎng)頁中使用 SyntaxHighlighter 的步驟：

  1. 下載 SyntaxHighlighter

首先需要下載 SyntaxHighlighter 庫文件，可以從官方網(wǎng)站 http://syntaxhighlighter.org/ 下載最新版本的文件。

  1. 引入 SyntaxHighlighter

將下載好的 SyntaxHighlighter 文件放到你的網(wǎng)站目錄中，然后在 HTML 文件中引入所需的 CSS 和 JS 文件。例如：

<link rel="stylesheet" href="path/to/shCore.css">
<link rel="stylesheet" href="path/to/shThemeDefault.css">
<script src="path/to/shCore.js"></script>
<script src="path/to/shBrushJavascript.js"></script>

其中 path/to/ 為文件所在的路徑。

  1. 使用 SyntaxHighlighter

在 HTML 文件中需要高亮的代碼塊前添加一個 <pre> 標(biāo)簽，并設(shè)置一個唯一的 class 屬性，例如：

<pre class="brush:javascript;">
// 你的 JavaScript 代碼
</pre>

其中 brush:javascript; 表示使用 JavaScript 語言高亮。

  1. 初始化 SyntaxHighlighter

最后在 HTML 文件中添加一個 <script> 標(biāo)簽，用于初始化 SyntaxHighlighter。例如：

<script>
    SyntaxHighlighter.all();
</script>

這樣就可以在網(wǎng)頁中顯示高亮后的代碼了。

0 踩