2013/12/12

[筆記] 用 Google Code Prettify 來替 blog 內的 Code Block 上色

參考自 格物致知 大大所寫的文章

將 Google Code Prettify 用新增小工具->HTML/JavaScript 的方式放在文件的最尾端來處理 code 區段的顯示

好處是要換佈景範本的時候不會不小心洗到 code block 的區段



以下是 Google Code Prettify 的位置以及相關說明

http://google-code-prettify.googlecode.com/svn/trunk/README.html
https://code.google.com/p/google-code-prettify/wiki/GettingStarted

方法:

將以下 code 加入到 HTML/JavaScript 小工具內

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sons-of-obsidian">
</script>


加入之後只要把程式區段用

<pre class="prettyprint linenums"><code> ...   </code></pre>

包起來即可!

這邊用的是 sons-of-obsidian 佈景,有四種佈景主題可供選擇,分別是:

desert,sunburst,sons-of-obsidian,doxy,以及啥都不做就給你的 default

參考:
http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html

在要加入的小工具後面填入 ?skin=你想要的佈景,網頁上的 code 就會變成你喜歡的樣子啦

唯一的缺點就是 VB 的支援度似乎有點糟糕哭哭

以下是上色後的樣子

<!--XML or HTML-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
  </head>
  <body>
    <div class="page"> 
      @RenderBody() <!-- 其實我是RazorPage XD -->
    </div>
  </body>
</html>
ps: html 標籤可用 http://iblogbox.com/devtools/js/ 來 encode
// VB   沒辦法,這邊也要用//註解 0rz
Private Sub FnHello(ByVal world As String) As String
    Return world 
End Function
    '用單引號看不到註解樣式(會顯示成字串),還會把整個區段以後都弄成同樣顏色...
// C#
[WebMethod]
public String Hello(string world )
{
      return world ;
}
/* Javascript*/
function Fn_Hello(world ) {;
   return world ;
}

沒有留言:

張貼留言