標籤: highlight.js

程式碼上色函式庫 highlight.js

功能

程式碼上色，可以用 syntax 找相關的英文資源 ，這個函式庫可以將部落格的程式碼文字依照關鍵字、註解等上不同顏色。

使用方法

  1. 引入 css 與 js 函式庫
  2. 依照規範撰寫pre tag 與 code tag
  3. 寫進指定 js 碼

※css有各種style。

一般網頁

※外引CDN函式庫的方法

引入 js 與 css 函式庫

<head>
 
 //引入css，這裡選擇tomorrow style
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/tomorrow.min.css" />

 //引入js
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
</head>

依照規範撰寫 pre 與 code

  1. pre tag 裡面包一層 code tag
  2. <code class=”程式語言名”>
//以寫css碼為例
<pre>
 <code class="css">
  pre {
  border: 1px solid #eee;
  width: 400px;
 }
 </code>
</pre>

寫進指定 js

function custom(){
 hljs.initHighlightingOnLoad();
}
custom();

Display

CODEPEN

WordPress

header.php→引入 css 與 js 函式庫、寫入指定 js

<head>

//在head tag之間加上下面這3行
<!--highlight.js-->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/tomorrow.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>

</head>

<body <?php body_class(); ?>>

//在<body>下面加上這段script
<script>
hljs.initHighlightingOnLoad();
</script>

文章編輯：text editor→依照規範撰寫 pre 與 code

//以寫css碼為例
<pre>
 <code class="css">
  pre {
  border: 1px solid #eee;
  width: 400px;
 }
 </code>
</pre>

Display

CODEPEN