使用prism.js使代碼高亮更加美觀

一、什麼是prism.js

Prism是一個輕量級，簡潔優美且非常易於使用的語法高亮插件。Prism可以在完全自定義的同時提供很多不錯的默認主題。Prism適用於任何語言的編碼，包括HTML，CSS，JavaScript，PHP等。

Prism是一個基於JavaScript的庫，它可以使網頁上的代碼更具文藝性和美學感，並提供了一種讓開發人員們可以輕鬆使用的方式來實現語法高亮。

二、如何使用prism.js

需要先引入prism.js文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js"></script>

上面的鏈接只是一個示例，可以從官方網站下載更多的主題和插件。

接下來，在需要高亮顯示代碼的標籤中，添加一個名為“language-XXXX”的class屬性，XXXX為你想顯示的代碼語言的名字，如：

<pre><code class="language-javascript">
    // JavaScript 代碼
</code></pre>

以上示例添加了一個class屬性為“language-javascript”的code標籤，與JavaScript相關的代碼將被高亮顯示。

三、使用自定義主題

Prism提供了一些預定義的主題，但是我們也可以自定義我們自己的主題。步驟如下：

1. 在 CSS 樣式表中定義你想使用的顏色
2. 定義要高亮的語言的規則
3. 和規則相匹配的顏色方案

以下是一個簡單的自定義 Prism 主題的示例：

/* 定義語言規則（language rules） */
 .language-javascript {
  color: black;
  background: #fdf6e3;
}

/* 關鍵字高亮 */
.token.keyword {
  color: #0066cc;
}

/* 字符串高亮 */
 .token.string {
  color: #009933;
}

四、使用其他功能

使用prism.js還有許多其他的功能，這裡只是介紹其中的一些。如：

1. 行數字

在pre標籤中添加屬性data-line來啟用行數字功能，如：

<pre data-line="1">
    1: // JavaScript 代碼
</pre>

2. 代碼高亮標記

按照自己的需要，在需要高亮的位置添加如下標記：

<mark class="highlight">highlighted text</mark>

然後通過CSS自定義高亮顏色，如：

.highlight {
  background-color: yellow;
}

3. 代碼行數計數

使用插件Line Highlight，可以實現高亮當前用戶查看代碼的行。首先需要在

標籤中添加class屬性“line-numbers”，如：


<pre class="line-numbers">
  <code class="language-css">
    .example {
      color: red;
    }
  </code>
</pre>
然後在HTML頁面中引入prism-line-highlight.js，如：
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/plugins/line-highlight/prism-line-highlight.min.js"></script>