code prettify 在blogger中加入code block

code prettify test

ref: https://github.com/googlearchive/code-prettify

the service side has been updated, need to change some code in 

sample coode:

<pre class="prettyprint linenums lang-sh">$ sudo apt install smbclient
$ sudo smbclient -L $IP -W $domainName -U $userName
</pre>

• use <xmp> </xmp> to escape html code
• lang-* is optional, may auto detect
• linenums:x shows the line numbers, x is the starting line

class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded tags.
}

by <pre> ...</pre>

int main()
{
    int a = 0;
    return 0;
} 

by <code> .... </code>

int main()
{
    int a = 0;
    return 0;
}

用法

<pre class="prettyprint lang-cpp linenums">...</pre>

或

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

用 <pre> 在html中直接換行輸出的結果就會有換行的效果,在<code>中則需要用<br />之類的方式換行

如果再compose mode中打好了code, 可以切到HTMLmode後直接加上 <code></code>較容易

支援的語言

lang-*: "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java","js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml","xsl".

ref: https://github.com/googlearchive/code-prettify/blob/master/README.md#user-content-for-which-languages-does-it-work

[blogger] Google Code Prettify測試-在blogger中嵌入上色的code

在blogger裡面放code的簡單方法,用google code-prettify

效果:

int x = foo();  /* This is a comment  This is not code  Continuation of comment */

int y = bar();

讓code的關鍵字可以自動上色,更方便觀看

使用方式:

1.加入 Google Code Prettify小工具

在

Layout > Add a Gadget > HTML/JavaScriptAdd

context 的部分輸入下列程式碼

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert""></script>

其中?skin=desert用來指定程式碼的skin,可以選擇的skin可以參考這邊

 2.在文章中加入區段標記

將文章中的程式法區段以

<pre class="prettyprint">...</pre>包起來
例如:

<pre class="prettyprint linenums">int x = foo();  /* This is a comment  This is not code  Continuation of comment */

<span class="pre-highborder">

int y = bar();</span>

</pre>

需要特別注意的是,最好不要直接把程式碼貼進HTML中,而最好是先在 "Compose" 頁面中將code貼上,在切換到"HTML"頁面去加上<pre>...</pre>的tag, 不然程式碼中如果包含特殊字元(通常都有包含)顯示就會跟內容來源不一樣

另外雖然prettyprint會自動偵測語言，但在乎叫的時候也可以用

<pre class="prettyprint lang-html">

來指定語言
html可以換成

    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
    "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
    "xsl".

2.1 顯示行數

加入linenums:n, n是起始和數,幾行顯示一次跟選擇的顯示style有關
<pre class="prettyprint linenums">..</pre>

bouns1. 程式碼中highlight 部分程式段

首先在Theme>Edit HTML中的 </head 之前> 加上

<style type='text/css'>

.pre-highborder{

border: 1px solid #ff0000;

padding: 3px 3px 3px 0;

}

</style>

接著在code中將想要highlight的地方以

<span class="pre-highborder">...</span>

包圍

參考資料

bouns2. 加入scroll bar

<style type='text/css'>

pre.prettyprint{
    width: auto;
    overflow: auto;
    max-height: 600px
}

</style>

參考資料

bonus3. 變換背景顏色跟行號顏色

<style type='text/css'>

/*each line*/

li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {

 margin: 0 !important;

 list-style-type:decimal !important;

 border-left: 1px solid #999;

background-color: #4f4f4f  !important;

}



ol.linenums {

 background-color: #3f3f3f  !important;;

 margin-left: 10px;

}


</style>

在試這段code的時候發現code裡面有 "!important"這種東西出現，一開始以為是註解,不以為意，還把他刪掉。但發現刪掉會影響程式行為。
大致上來說,被!important所標註的參數會有比較高的 priority, 前面的設定可以覆蓋後面的。正常情況是後面的參數會蓋前面的參數。
詳細說明可以猜考這裡

縮文教學

因為bloger很有彈性(很笨..?)
所以需要自己設定餒些內容會被縮起來
這時候就需要加入"jump break"來告訴blogger在這行以後不會顯示在列表中，要按"繼續閱讀"才看的到

blogger hacker

幫blogger新增了一些新功能，那時候會選blogger是因為他的自由度比較高，雖然介面沒worldpress好看，但身為一個hacker(?)東西保留可以自己亂搞的空間似乎比較有趣
這次新弄了右邊導覽列的功能，原本的blogger lable分類實在不怎麼好用，沒有樹狀目錄，要是分類一多看起來很亂