[Blogger] 美化貼 Code

這是查到在 blogger 上貼 code 比較好看的方法

本來是參考
符碼記憶 : 在網頁中嵌入顯示程式碼：CSS Block
符碼記憶 : 在網頁中嵌入顯示程式碼：Google Code Prettify
使用兩個小功具：CSS Block 來把程式碼包起來 + Google Code Pretty 來上色
不過後來覺得單用 Google Code Pretty 就很順眼了
所以就單用了

單用 Google Code Pretty 的話參考下列這篇會比較簡單
y2chiu.blog = []: [Blogger] Google Code Prettify 顯示程式碼

另外也參考了以下這篇解決 code 過長但是橫向卷軸不出現的問題
Chaoyu 的雜記簿: Blogger 上貼程式碼

要注意的是，如果要貼的 code 秀不出來很有可能是因為有一些特殊符號
例如「<」會誤判，這時候要轉碼一下
HTML Encoder (100% client-side) :: OpinionatedGeek

簡單的步驟

1. 加一個 HTML/JavaScript 小工具

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

2. 增加一個 CSS 設定

.post .prettyprint 
{
  overflow-x:auto; 
  overflow-y:auto; 
  max-height:400px;
}

3. 在 code 的前後用

<pre class="prettyprint">

跟

</pre>

包起來就可以了
如果要加行號可以在 pretty print 後面加 linenums

<pre class="prettyprint linenums">

範例程式

void main()
{
    if (true) return 1;
    return 0;
}

#include <iostream>
#include <vector>
#include <iterator>
 
using namespace std;
 
int main()
{
    vector<int> vvv;
    vvv.push_back(1);
    vvv.push_back(2);
    vvv.push_back(3);
    vvv.push_back(4);
    vvv.push_back(5);
 
    ostream_iterator<int> vout(cout, " ");
    copy(vvv.begin(), vvv.end(), vout);
    cout << endl;
 
    return 0;
}