google/code-prettify
快速的用法:
<head> ... ... <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst"></script> <style> pre.prettyprint, code.prettyprint { border-radius: 8px; } </style> ... ... </head>
skin 有 default、desert、sunburst、sons-of-obsidian、doxy 可選(全小寫)
本篇筆記的程式碼就是採 sons-of-obsidian 風;想預覽各種風格,請至
theme gallery
另外,我看到 doxy 風的程式碼區塊的四個角是圓角,很喜歡,也想套用,於是加上
border-radius: 8px;
要使用 prettify 的程式碼區塊寫法
<pre class="prettyprint [lang-語言] [linenums:數字]"> ... ... </pre>[ ] 表示是選擇性參數,若不加 linenums,預設不會顯示行號。
想要顯示行號,則只要加 linenums,如果 linenums 後面沒接數字,則除了 sons-of-obsidian 外,其他風格都是只顯示 5 的倍數的行號。
另外,您可以看到,在本篇筆記,沒有行號的程式碼區塊背景是單純的黑色,而有行號的區塊則是深淺不同的黑色相間。
linenums 後面的數字代表程式碼第一行的行號,
例如:
linenums:8
表第一行的行號為 8,而 prettify 自第三行顯示行號 10,之後依序每隔 5 行顯示 15、20、25、...
如果真的想要每行都顯示行號,則可在網頁原始碼加入下述 CSS 指令
<style> li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 { list-style-type: decimal !important; } </style>或是去下載預設的 pretty.css 下來,自行修改,再放到您的網站。
而預設支援的程式語言有:C 家族, Java, Python, Bash, SQL, HTML, XML, CSS, JavaScript, Makefile, Rust ......等語言,而且 Google 說它會自行辨認。
但若辨認不出來時,就得加 lang-語言 參數,語言參數則有下列
lang-sh(Bash)
lang-c(C家族)
lang-cc(C++)
lang-html
lang-java
lang-js(JavaScript)
lang-coffee(CoffeeScript)
lang-py(Python)
lang-sql
lang-lua
lang-vb(VBScript)
lang-hs(Haskell)
lang-el(Lisp)
lang-proto(Protocol Buffers)
lang-wiki(Wiki Syntax)
lang-css
lang-cs(C#)
lang-vhdl
lang-yaml
lang-scala
lang-go
lang-erlang
lang-rust
lang-pascal
若您熟悉 CSS,還可進一步自訂您的 prettify 風格,更多資訊,請參考筆記一開始的連結。
unit Unit1; interface // 注意要 uses ActiveX, ComObj uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls, ActiveX, ComObj; type TForm1 = class(TForm) Edit1: TEdit; Button1: TButton; procedure Button1Click(Sender: TObject); private { Private declarations } public { Public declarations } end; var Form1: TForm1; implementation {$R *.dfm} function GetStatusCodeStr(statusCode:integer) : string; begin case statusCode of 0 : Result := 'Success'; 11001: Result := 'Buffer Too Small'; 11002: Result := 'Destination Net Unreachable'; 11003: Result := 'Destination Host Unreachable'; 11004: Result := 'Destination Protocol Unreachable'; 11005: Result := 'Destination Port Unreachable'; 11006: Result := 'No Resources'; 11007: Result := 'Bad Option'; 11008: Result := 'Hardware Error'; 11009: Result := 'Packet Too Big'; 11010: Result := 'Request Timed Out'; 11011: Result := 'Bad Request'; 11012: Result := 'Bad Route'; 11013: Result := 'TimeToLive Expired Transit'; 11014: Result := 'TimeToLive Expired Reassembly'; 11015: Result := 'Parameter Problem'; 11016: Result := 'Source Quench'; 11017: Result := 'Option Too Big'; 11018: Result := 'Bad Destination'; 11032: Result := 'Negotiating IPSEC'; 11050: Result := 'General Failure' else result := 'Unknow'; end; end; function Ping(const Address:string; BufferSize:Word): string; var FSWbemLocator : OLEVariant; FWMIService : OLEVariant; FWbemObjectSet: OLEVariant; FWbemObject : OLEVariant; oEnum : IEnumvariant; iValue : LongWord; PacketsReceived : Integer; Minimum : Integer; Maximum : Integer; Average : Integer; begin PacketsReceived := 0; Minimum := 0; Maximum := 0; Average := 0; FSWbemLocator := CreateOleObject('WbemScripting.SWbemLocator'); FWMIService := FSWbemLocator.ConnectServer('localhost', 'root\CIMV2', '', ''); FWbemObjectSet:= FWMIService.ExecQuery(Format('SELECT * FROM Win32_PingStatus where Address=%s AND BufferSize=%d',[QuotedStr(Address),BufferSize]),'WQL',0); oEnum := IUnknown(FWbemObjectSet._NewEnum) as IEnumVariant; if (oEnum.Next(1,FWbemObject,iValue)=0) then begin if FWbemObject.StatusCode=0 then begin // ping 成功 Inc(PacketsReceived); result := 'ping 的到'; end else if not VarIsNull(FWbemObject.StatusCode) then result := GetStatusCodeStr(FWbemObject.StatusCode) else result := 'Error processing request'; end; FWbemObject := Unassigned; FWbemObjectSet := Unassigned; end; procedure TForm1.Button1Click(Sender: TObject); var str: string; begin try CoInitialize(nil); try str := Ping(Edit1.Text, 32); showmessage(str); finally CoUninitialize; end; except on E:Exception do showmessage('意外錯誤: ' + E.Classname + ':' + E.Message); end; end; end.