跳到主要內容

Code Block for Blogger

Code Block for Blogger

我使用Markdonw語法打部落格文章，先轉換成Html之後，在貼到Blogger去，但是闡述程式碼的Code Block的區塊，產生出來的HTML是

<pre><code> ... </pre></code>

這些HTML貼到Blooger去，因為沒有CSS樣式裝飾，所以只有簡單的換行縮排，看起來有點像引言。

這邊我們可以自己加上CSS Style上去，讓他看起來漂亮點。首先Markdown轉出來的code block有兩種形式，一種是嵌入式的，譬如-> int i=0; <- 直接嵌入在行內，另一種是整個程式碼區塊，譬如:

int i=0;    /* 程式碼自己佔一個區塊 */

嵌入式的程式碼區塊產生的HTML會是`int i=0;

整個程式碼區塊產生的HTML會是`

int i=0;

差在<pre>tag的有無，所以我們只要分別加上這兩個CSS Style給blooger的範本，就行了。可以自己寫，不過我直接在網路上找別人做好的:

<style>
code {
background-color: #F9F9F9;
border: 1px dashed #2F6FAB;
color: black;
/* line-height: 1.1em; 
padding: 1em;*/
}

pre code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
overflow:auto;
background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:1000px;
line-height: 1.2em;
}
</style>

把上面一串貼到你的Blogger範本去，進入編輯HTML，放在<head>裡面就行了。

這個CSS將兩個HTML tag <code> 與 <pre><code> 加上了一些裝飾。

如果在網路上找相關的CSS style樣式表，大部份別人的CSS style樣式表是內容大約是這樣

.post .codeblock { ... }

事實上這樣比較正確，在指定的程式碼區塊Tag加上class=codeblock，才會套用此CSS樣式。此法可以將Markdown產生的程式碼區塊，與非Markdown產生的<code></code>鬆綁。

但我懶得Markdown轉換後還要一個一個加上class name，而且我貼到Blogger去的文章一定都是我用Markdown打的，所以就直接CSS指定<code>與<pre><code>區塊都套用CSS。

標籤

標籤：

留言

張貼留言

這個網誌中的熱門文章

HTML, CSS, 相對視窗或螢幕的高度與寬度

在 w3school.com 網站, CSS Units 有各種與寬度的表示法 以我使用的頻率來排序： px: 使用螢幕幾個像素(但是還要考慮Retina螢幕像素是一般螢幕像素的兩倍) %: 相對父層的大小比例 vh, vw: 相對於瀏覽器展示網頁區域的大小(不是整個瀏覽器的大小，沒包含瀏覽器的工具列，只有展示網頁的區域) vmin: vh, vw取最小值(另外還有vmax則是取最大值，但是目前IE跟safari不支援) px 與 % 很常用， vh ， vw 與 vmin 是CSS3的新產物，表示相對瀏覽器展示頁面的大小 相對視窗大小 這邊先說明， vh ， vw 與 vmin 只包含網頁顯示區域的長寬，不包含瀏覽器的工具列 先從dom的最根本講起好了，一份HTML文件，根是 <html></html> (雖然沒有嚴格規定，不寫也能顯示)，然後這個根的父元件就是瀏覽器的網頁頁面顯示區 因此，如果對 <html></html> 宣告大小是 100% 就跟宣告 100vh 一樣，因為都是指瀏覽器的網頁頁面顯示區大小 這個範例是將html設定為100vh <html style="height: 100vh"> <head> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> console.log($('html').height()); </script> </head> </html> 這個範例是將html設定為100% <html style="height: 100%"> <head> <script src="https://code.jquery.com/jque...
張貼留言
閱讀完整內容

陣列洗牌程式(shuffle array)

陣列如何把它的順序打亂，作出類似洗牌的效果，我一直都很頭痛，搞得非常的複雜。至從用了Ruby，Array物件包含 shuffle 方法之後，我就沒思考過陣列洗牌的問題了，反正Ruby幫我處理得好好的。 Ruby # 52張牌的牌堆 poker = (1..52).to_a # => [1, 2, 3, ... , 52] # 洗牌打亂 shuffled = poker.shuffle # => [22, 32, 12, ... # 也可以直接打亂原來的陣列 poker.shuffle! # => [39, 47, 3, ... Javascript Javascript我就頭痛了，我得自己寫洗牌的方法。我在網路上找到了這個演算法，仔細看了之後，才知道原來洗牌可以這麼簡單： // 原本for迴圈是一行程式，太難理解，這邊改寫成多行 function shuffle(o){ for(var j, x, i = o.length; i;){ j = Math.floor(Math.random() * i); // javascript的array是0-base // 所以迴圈第一次進入，--i後表示陣列最後一個位置。 x = o[--i]; o[i] = o[j]; o[j] = x; // 以上三行代表以x為temp, o[i], o[j]做交換 } return o; //回傳陣列，我一開始也看錯看成回傳0 }; 變數說明 引數o: 將被洗牌的陣列 for迴圈內 i : 將會從陣列的最後一個位置，慢慢往前移到第一個位置(但移到第一個位置時for迴圈不執行，因為Javascript的數值0也代表false，會離開迴圈。0代表flase這點跟Ruby不一樣) j : 將會被亂數選擇，選到要被交換的位置 x : 用來暫存o[i]的數值，幫助o[i]與o[j]做數值交換 就這樣從最後一個位置開始，依次往前隨機挑選一個位置與它交換(可能挑到自己，表示不交換)，來達到洗牌的效果，陣列多大，就執行幾次，時間複雜度 O(n) ，...
張貼留言
閱讀完整內容

安裝zsh + oh-my-zsh 出現 /usr/bin/env: zsh: 沒有此一檔案或目錄 (/usr/bin/env: zsh -: No such file or directory)

zsh 跟 oh-my-zsh 安裝完，可能會出現類似下面錯誤訊息，雖然他沒任何影響，不過我總覺得怪怪的 # 中文系統 /usr/bin/env: zsh: 沒有此一檔案或目錄 # 英文系統 /usr/bin/env: zsh -: No such file or directory 通常會出現這類的訊息，都是指令找不到。 這邊指zsh這個指令找不到，試試看輸入 which zsh 看看是不是沒有把zsh這個加到 $PATH 裡面，沒有的話加入就好了。 如果加入了一樣找不到，我trace了一下zsh的執行過程，通常都是跟 oh-my-zsh 的安裝順序錯了的時候才會發生。 這時編輯家目錄底下檔案 vim ~/.zshrc ，會看到 # 他先執行了oh-my-zsh.sh source $ZSH/oh-my-zsh.sh # 然而oh-my-zsh.sh已經在使用zsh這個指令了 # 這裡才把宣告路徑，所以當然zsh指令找不到 export PATH="/usr/kerberos/sbin:/usr/kerberos/bin:/usr/local/sbin:/usr/sbin:/sbin:/usr/bin:/bin:/root/bin:/usr/local/bin" 這時就把它們兩個對調一下就好了 # 像這樣把 export PATH 放到 source $ZSH/oh-my-zsh.sh 上面 export PATH="/usr/kerberos/sbin:/usr/kerberos/bin:/usr/local/sbin:/usr/sbin:/sbin:/usr/bin:/bin:/root/bin:/usr/local/bin" source $ZSH/oh-my-zsh.sh # 這樣oh-my-zsh.sh裡面就可以用zsh指令了 存檔後，登出再進來，他就可以正常使用zsh指令，不再出現這種錯誤訊息了
張貼留言
閱讀完整內容