Prism.js 推薦套件和使用方式教學

在上一篇 Prism.js 程式碼高亮顯示工具 中，有介紹到 Prism.js 的安裝和使用，本篇來介紹推薦的套件和使用方式

Line Numbers: 顯示行號

Line Numbers 套件介紹頁面
在 pre 標籤中增加 class="line-numbers"，就會顯示行號

	
    
<pre class="line-numbers">
	<code class="language-html">
	<!-- 內容 -->
	</code>
</pre>
	

Line Highlight: 指定行高亮(標記指定行)

Line Highlight 套件介紹頁面
在 pre 標籤中增加 data-line=""，裡面放置行號，如果有多個可以使用逗號區隔，連續行可以使用 - 號

	
<pre data-line="1,3,5-6">
	<code class="language-html">
	<!-- 內容 -->
	<!-- 多行示範湊行數的內容 -->
	</code>
</pre>
	

如果覺得圓圈的數字不好看的話，可以和 Line Numbers 混用，左側行號就是以「顯示行號」的樣式顯示

	
<pre data-line="1,3,5-6" class="line-numbers">
	<code class="language-html">
	<!-- 內容 -->
	<!-- 多行示範湊行數的內容 -->
	</code>
</pre>
	

Show Language: 顯示語言

Show Language 套件介紹頁面
在 pre 標籤中增加 data-language="語言名稱"，就會在程式碼區塊右上角顯示「語言名稱」，筆者常用來自訂為編輯的檔案名稱，讓讀者方便查看。

	
<pre data-language="語言名稱">
	<code class="language-html">
	<!-- 內容 -->
	</code>
</pre>
	

Command Line: 命令視窗

Command Line 套件介紹頁面
用來模擬命令視窗的輸出格式，在 pre 標籤中增加 class="command-line" 即可，可以使用 data-prompt 自訂顯示的名稱，如果要指定為指令輸出的部分(沒有左側文字)，可以使用 data-output 來自訂哪一行，一樣可以使用「,」分隔，和使用「-」表示連續的行

	
<pre class="command-line" data-prompt="C:\Ruyut>" data-output="1,2,4-6">
	<code class="language-bash">
	pwd
	C:\Ruyut
	</code>
</pre>
	

Copy to Clipboard Button: 複製到剪貼簿按鈕

Copy to Clipboard Button 套件介紹頁面
安裝套件後預設就會啟用，可以查看上面程式碼範例右側的按鈕。
這裡示範自訂複製文字、複製失敗文字、複製成功文字

	
<pre data-prismjs-copy="複製" data-prismjs-copy-error="複製失敗！" data-prismjs-copy-success="複製成功！">
	<code class="language-html">
	<!-- 內容 -->
	</code>
</pre>
	

Treeview：樹狀圖檔案顯示

Treeview：套件介紹頁面
在 code 標籤中增加 class="language-treeview"，然後使用指定語法撰寫：
「/」代表資料夾，「|」表示下方還有文件，「`」則是當前節點的最後一個檔案，「--」則是該節點要顯示的檔案名稱。
以上內容不用背下來，可以使用 Linux 上的 tree 指令產生，但是如果是 windows 上的 tree 指令，則產生出來的格式會不正確。可以下載 Tree for Windows 來使用，使用方式是 tree.exe 後面接上目錄名稱。但是需要手動在每個資料夾後面加上「/」，不然會顯示檔案圖示。

使用範例：

	
<pre>
	<code class="language-treeview">
		C/
		`-- ruyut/
			|-- document/
			|   |-- a.txt
			|   |-- b.xls
			|   |-- c.pdf
			|   |-- d.docx
			|   `-- e.ppt
			`-- download/
				|-- f.exe
				|-- g.mov
				|-- h.jpg
				`-- i.html
	</code>
</pre>
	

正確顯示如下：

    
		C/
		`-- ruyut/
			|-- document/
			|   |-- a.txt
			|   |-- b.xls
			|   |-- c.pdf
			|   |-- d.docx
			|   `-- e.ppt
			`-- download/
				|-- f.exe
				|-- g.mov
				|-- h.jpg
				`-- i.html