部落格代碼高亮 - 使用SyntaxHighlighter

  • 702
  • 0
  • 2014-05-30

代码高亮演示 SyntaxHighlighter

剛寫部落格,一直想找一個簡單又直覺的代碼高亮來放程式碼

先試了試 GitHub Gist,沒有高亮,不是很滿意

網上找到了這篇:

15 款代码语法高亮工具,美化你的代码

試了幾款,覺得 SyntaxHighlighter 還蠻簡易能上手的

可以到 RUNJS 去TRY你的語法

簡單來說

就是部落格打開原始碼,寫以下程式:(藍色改成你要的語言,綠色改你要放的代碼)

<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />

<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://static.oschina.net/js/syntax-highlighter-2.1.382/scripts/brush.js"></script>

<link rel="stylesheet" type="text/css" href="http://static.oschina.net/js/syntax-highlighter-2.1.382/styles/shCore.css" />

<link rel="stylesheet" type="text/css" href="http://static.oschina.net/js/syntax-highlighter-2.1.382/styles/shThemeDefault.css" />

<pre class="brush: sql">
SELECT dbo.sysobjects.name AS sTableName,
    dbo.syscolumns.name AS sColumnsName,
    dbo.syscolumns.prec AS iColumnsLength,
    dbo.syscolumns.colorder AS iColumnsOrder,
    dbo.systypes.name + '' AS sColumnsType,
    dbo.syscolumns.isnullable AS iIsNull
FROM dbo.sysobjects
INNER JOIN dbo.syscolumns ON dbo.sysobjects.id = dbo.syscolumns.id
INNER JOIN dbo.systypes ON dbo.syscolumns.xusertype = dbo.systypes.xusertype
WHERE (dbo.sysobjects.xtype = 'U')
 
</pre>

 

完成的成品如下:


	dbo.syscolumns.name AS sColumnsName, 
	dbo.syscolumns.prec AS iColumnsLength, 
	dbo.syscolumns.colorder AS iColumnsOrder, 
	dbo.systypes.name + '' AS sColumnsType, 
	dbo.syscolumns.isnullable AS iIsNull
FROM dbo.sysobjects 
INNER JOIN dbo.syscolumns ON dbo.sysobjects.id = dbo.syscolumns.id 
INNER JOIN dbo.systypes ON dbo.syscolumns.xusertype = dbo.systypes.xusertype
WHERE (dbo.sysobjects.xtype = 'U')
      

 

創用 CC 授權條款
本著作係採用創用 CC 姓名標示-相同方式分享 4.0 國際 授權條款授權,文章歡迎轉載,請註明出處,謝謝~~~