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