Demo Syntax Highlighter

在 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
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