2013-06-23

備份一下 自己加的 css

code

code {
  padding: 2px 4px;
  color: #d14;
}

pre

pre {
  font-family: monospace;
  padding: 6px;
  margin: 0;
  font-size: 12.025px;
  line-height: 18px;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

blockquote

blockquote {
  color:#222;
  background-color: #FFD5A0;
  padding: .3em .5em;
  border: 2px #E2C8AF dashed;
}

reference

reference {
  display: block; /* fixes a strange ie margin bug */
  background: #FEE url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
  border: 1px dotted #933;
  padding: 10px 10px 10px 20px;
  margin: 5px 0 0 5px;
  font-size: 13px;
  font: Courier New;
  line-height: 1.6em;
}

2013-02-19

[Git] 列出 commit 中的異動檔案

查看 commit 記錄

$ git show <commit>

但這樣沒辦法清楚列出到底是有哪些檔案有異動

只顯示異動的檔案,不顯示程式碼的話,請加上 --name-only 的參數

$ git show --name-only <commit>


要更進一步的只顯示檔案,連 commit 的相關資料也不要顯示的話

$ git show --pretty="format:" --name-only <commit>

以上,簡單的列出檔名

Reference:

git show - List all the files for a commit in Git - Stack Overflow

2012-01-24

[BH] 幫 Blogger 加上 "SyntaxHighlighter" 的功能

身為一個工程師,想要寫篇文章放到 blog 時,常常會遇到一個問題。
就是每當想要把程式貼到 blog 時,排版會跑掉,不是用等寬字元的方式在排版。

這時候就要用到一個很好用的 HTML tag:<pre>
用 pre tag 把程式包起來之後,程式碼就會以等寬字去排版。

很好,這樣看起來是解決了一個問題,但是還有另一個問題。
blog 上面的程式碼,沒辦法像一些 editor 一樣,依程式碼的語法去改變顏色。

嗯...在 HTML 要換顏色就是需要套用 css,所以我們可以自己動手去改顏色!?

不!
這當然是交給程式去做就好了。

網路上現在很多專門給網頁用的 syntax highlight 的程式
而我目前是用 SyntaxHighlighter 這套程式
並沒有去比較不同版本的好壞,只是很單純的選這一個

SyntaxHighlighter 加進 Blogger 的流程


1.打開你的 Blogger template 原始碼,找到</head>的 tag,並在前面加上 SyntaxHighlighter 的核心程式:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<!-- add brushes here -->
<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>

2.再跟據自己 blogger 上的需要,在 <!-- add brushes here --> 的位置加上對應的語法 js。
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 裡有詳細說明支援的程式

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

3.完成之後,就可以開始使用 SyntaxHighlighter 了:
一、用 <pre> tag:
<pre class="brush:js">
  alert('hello syntax');
</pre>
用 <pre> tag時,要注意一些 html 的特殊字元要轉成 html 專用的編碼(ex. < 換成 &lt;)

二、用 <script> tag:
<script type="syntaxhighlighter" class="brush:js"><![CDATA[
  /**
   * SyntaxHighlighter
   */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
]]></script>

Reference:
SyntaxHighlighter

2011-12-29

Ubuntu 11.10 - Eclipse 的圖示是問號!?

Ubuntu 上裝好了 Eclipse,也可以正常執行,
但是在 ubuntu 的 unity 桌面環境上卻只能看到 eclipse 的圖示是一個問號...

補上圖示的設定就好了
vi ~/.local/share/applications/eclipse.desktop

eclipse.desktop 的檔案內容:
[Desktop Entry]
Encoding=UTF-8
Name=Eclipse
Name[zh_TW]=Eclipse
Comment=Eclipse IDE
Exec=/home/user/eclipse/eclipse
Icon=/home/user/eclipse/icon.xpm
Terminal=false
StartupNotify=true
Type=Application
Categories=Application;Development;

對照 eclipse 的路徑調整設定就可以了

完成後,圖示就不再是問號了