Prism.js 教學 – 翔太工坊

內容目錄

支援語言

https://prismjs.com/index.html#supported-languages

使用教學

客製化下載

下載連結

https://prismjs.com/download.html

壓縮等級

壓縮等級(Compression level)：通常會選擇 Minified version

勾選方式

直接使用滑鼠點選

在 URL 帶入參數

https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript

透過 JavaScript 勾選
- 標準的 JavaScript 寫法
```
document.querySelector('input[value="abap"]').checked = true;
```
- 類 jQuery 寫法
  Prism.js 網站中，雖然沒有引用 jQuery，但有定義下列 function，故可以用比較簡潔的 $('input[value="abap"]').checked = true;
```
function $(expr, con) {
    return typeof expr === 'string'? (con || document).querySelector(expr) : expr;
}
```
- 使用 checked = true 雖然可以勾選，但無法觸發事件，連動更新下方的計算與原始碼區塊，所以應該用 click();

勾選項目

以下是我所勾選的項目，供大家參考


////Themes////
$('input[value="prism-coy"][name="download-themes"]').click();

////Languages////
$('input[value="abap"]').click();
$('input[value="apacheconf"]').click();
//$('input[value="armasm"]').click();
$('input[value="aspnet"]').click();     //將包含csharp
$('input[value="autohotkey"]').click();
$('input[value="bash"]').click();
//$('input[value="basic"]').click();
$('input[value="batch"]').click();
$('input[value="c"]').click();
//$('input[value="csharp"]').click();
$('input[value="cpp"]').click();
$('input[value="css-extras"]').click();
//$('input[value="csv"]').click();
$('input[value="dart"]').click();
//$('input[value="dns-zone-file"]').click();
$('input[value="docker"]').click();
$('input[value="excel-formula"]').click();
$('input[value="git"]').click();
$('input[value="go"]').click();
//$('input[value="go-module"]').click();
$('input[value="groovy"]').click();
$('input[value="ini"]').click();
$('input[value="java"]').click();
//$('input[value="javadoclike"]').click();
$('input[value="json"]').click();
//$('input[value="json5"]').click();
//$('input[value="jsonp"]').click();
$('input[value="kotlin"]').click();
$('input[value="log"]').click();
$('input[value="markdown"]').click();
//$('input[value="markup-templating"]').click();
//$('input[value="matlab"]').click();
//$('input[value="mermaid"]').click();
//$('input[value="mongodb"]').click();
$('input[value="nginx"]').click();
$('input[value="objectivec"]').click();
$('input[value="perl"]').click();
$('input[value="php"]').click();
//$('input[value="phpdoc"]').click();
$('input[value="php-extras"]').click();
$('input[value="powershell"]').click();
$('input[value="properties"]').click();
$('input[value="python"]').click();
//$('input[value="r"]').click();
$('input[value="regex"]').click();
$('input[value="ruby"]').click();
//$('input[value="rust"]').click();
$('input[value="sass"]').click();
$('input[value="scss"]').click();
$('input[value="sql"]').click();
$('input[value="swift"]').click();
$('input[value="typescript"]').click();
//$('input[value="typoscript"]').click();
$('input[value="uri"]').click();
$('input[value="vbnet"]').click();
$('input[value="vim"]').click();
$('input[value="visual-basic"]').click();
//$('input[value="wasm"]').click();
//$('input[value="xml-doc"]').click();
$('input[value="yaml"]').click();

////Plugins////
$('input[value="line-highlight"]').click();
$('input[value="line-numbers"]').click();
$('input[value="toolbar"]').click();
$('input[value="show-language"]').click();      //必須包含toolbar
$('input[value="copy-to-clipboard"]').click();  //必須包含toolbar