前言

在 blog 顯示程式碼，除了先把 code 貼到 codepen、gist、pastebin 等第三方服務再使用嵌入程式碼的方始顯示，也可直接在編輯畫面使用 Syntax Highlighter 來高亮程式碼區塊，以下 Demo 幾種不同語言的程式碼。

bash Syntax Highlight

ls -lh
cat 1.txt

PHP Syntax Highlight

<?php
echo "Hello bobo~"
Route::get('/', 'WelcomeController@index');

Route::get('home', 'HomeController@index');

Route::controllers([
    'auth' => 'Auth\AuthController',
    'password' => 'Auth\PasswordController',
]);

JavaScript Syntax Highlight

'use strict';
$(function () {
    // Sidebar Menu
    var accordionWidth = $('#accordion').width();
    $('#accordion').sticky({
        'topSpacing': 60
    }).width(accordionWidth);

    // Editor
    $('.html').summernote();

    // Cancel
    $('.cancel').on('click', function (e) {
        e.preventDefault();
        if (confirm('Are you sure to leave this page?')) {
            window.history.back();
        }
    });
});

使用方法

使用3個反單引號開頭，接著輸入程式對應縮寫(ex. php)，就可以開始輸入程式碼，並使用3個反單引號作為結尾。

呈現效果

```php
<?php
echo "Hello bobo~"

還可以使用 diff 語法，利用 +, - 來代表新增、刪除行的顯示方式。

-echo "Hello bobo~"
+echo "Hello World~"

SyntaxHighlighter 可標記以下的程式語言

>語言  對應縮寫    對應檔案
ActionScript3   as3, actionscript3  shBrushAS3.js
Bash/shell  bash, shell shBrushBash.js
ColdFusion  cf, coldfusion  shBrushColdFusion.js
C#  c-sharp, csharp shBrushCSharp.js
C++ cpp, c  shBrushCpp.js
CSS css shBrushCss.js
Delphi  delphi, pas, pascal shBrushDelphi.js
Diff    diff, patch shBrushDiff.js
Erlang  erl, erlang shBrushErlang.js
Groovy  groovy  shBrushGroovy.js
JavaScript  js, jscript, javascript shBrushJScript.js
Java    java    shBrushJava.js
JavaFX  jfx, javafx shBrushJavaFX.js
Perl    perl, pl    shBrushPerl.js
PHP php shBrushPhp.js
Plain Text  plain, text shBrushPlain.js
PowerShell  ps, powershell  shBrushPowerShell.js
Python  py, python  shBrushPython.js
Ruby    rails, ror, ruby    shBrushRuby.js
Scala   scala   shBrushScala.js
SQL sql shBrushSql.js
Visual Basic    vb, vbnet   shBrushVb.js
XML xml, xhtml, xslt, html, xhtml   shBrushXml.js

官網詳列支援標記的語言
也支援多種樣式，本站使用的是 RDark theme