True Color Terminal Vim on OSX

True Color 指的是紅綠藍三原色每個顏色都用 8bit 來記錄色階，總共有 2 的 24 次方種顏色，一般台灣是稱為 1677 萬色，也就是現在主流的電腦螢幕顏色數，不過終端機介面，一直以來都是活在 16 色和 256 色的世界，所以我一直都是只能用 256 色的 Vim，雖然 GVim 有支援 True Color，不過我用 GVim 實在很不習慣。

前陣子在 usevim 上看到 24-bit Vim 這篇文章，讓我對 True Color 的 Vim 環境燃起了一線希望，大概的狀況是據說有個 ISO-8613-3 有設計了 TrueColor 的 notation，就長的很像 BBS 上色語法，但是有三個數值。所以只要大家都有支援，就可以看到 1677 萬色的終端機了，而所謂的大家都有支援，指的是：

  1. 命令列軟體輸出有支援，這邊需要的就是 Vim 能支援輸出 ISO-8613-3 所定義的語法
  2. Terminal 軟體有支援，看到 ISO 語法能呈現對應的顏色，以 OSX 上來說，我用的是 iTerm 2

24-bit Vim 這篇文章說的是 Vim 有位 ZyX 有實做了 True Color 支援，而當時有個叫 Konsole 的 KDE Terminal 支援 True Color，所以要是你是用 KDE，就可以有 True Color 的 Vim 環境了，只是我用的環境幾乎都還是 OSX 為主。最近 iTerm 2 的作者在 Twitter 上說他們的 24-bit color 支援 merge 到 master 了，本來我一直在等 beta 版的更新，不過今天突然想到，可以去找 nightly build，然後去抓了測試用的 perl 檔來測試，發現真的可以用，下面兩張圖，上面那張是不支援的版本，下面的是支援的。

256 color terminal

true color terminal

接下來，就是 Vim 了，這部分我花了不少時間才弄出來，簡單說就是抓 ZyX 的 Vim 來自己 compile，不過也不是 clone 下來直接編譯就好，要換 branch 加上 config 等等：

hg clone https://bitbucket.org/ZyX_I/vim
cd vim
hg update 8abaeea8b2e5
cd src && make autoconf && cd ..

./configure \
  --enable-gui=no \
  --without-x \
  --enable-multibyte \
  --with-tlib=ncurses \
  --enable-cscope \
  --with-features=huge \
  --disable-nls \
  --enable-perlinterp \
  --enable-pythoninterp \
  --enable-rubyinterp \
  --enable-termtruecolor

make
make install

照理說上面這段複製貼上執行就可以了，然後，編譯安裝完，進入 Vim 可以執行version看看 termtruecolor 這個選項有沒有打開，有的話，那還差一步，就是在 .vimrc 裡面加上一行把設定打開：

set guicolors

然後你的 Terminal Vim 就會去使用 GVim 用的顏色設定了，以 solarized 為例，上面是 256 色的，下面是 True Color：

256 solarized

true color solarized

其實，差異蠻大的，讓我蠻意外，最後我找了一些以前沒辦法看到真相的 Vim color 來用，目前暫時是用 jellybeans：

true color jellybeans

至於 iTerm 2 和 Vim 官方何時會支援呢，前者比較樂觀，下次 release 就有了，後者的話，大約半年前 Bram 有說會加到 TODO，不過到目前的 7.4 看來都還沒有認真要面對它的樣子...

Markdown 資源

前兩天終於把 Markdown 資源 這頁弄上線了，其實想弄很久了，目標是收集不同領域的熱門資源，例如某某語言比較多人用的轉譯引擎。另外還有一些算是歷史紀錄，像是 shodown.js ，還有就是之前 Jeff Atwood 登高一呼 要訂 spec，雖然沒有正式的版本，不過也已經有 W3C Community Group，說到這邊，他們其實還收集了很大量的引擎實做，不過像這種不是我覺得有用的清單，內容太多東西了，所以並沒有阻止我把這頁生出來。

最後要感謝 WM 提供他收集的一份清單，然後有人覺得有什麼資源是值得刊上去的歡迎提供給我，也可以直接發 pull request 啦，不過基本上是我主觀決定適不適合的，目前這份清單應該偶爾會更新一下，因為像是 iOS 有非常多軟體支援 Markdown，和其他作業系統比起來，比例上有點不平衡，還不知道哪些比較好用，所以我目前是先列出我以前就看到過的，希望這份清單能夠越來越好。

Flickr Share with Template Published

Flickr Share with Template

距離第一次說這東西其實好久了，最近終於把它推上 Chrome Store，其實上次徵求 icon 有徵到，不過對方不願具名所以沒有任何 attribute，還是很感激他就是，現在這版已經改用 Twitter 的 hogan，還用了 q 做 async flow control，然後還衍生出 sandbox-hogan 這個專案，不過目前用的是 prototype，等那邊發展成熟一點在換過去。

最後再次介紹一下 Flickr Share with Template，這是套可以用自訂的 template 來產生 Flickr 照片分享 HTML/BBCode 的套件，會開發的原因包括：

  • flickr 原生的分享是 HTML，不是 XHTML
  • 只有 HTML/BBCode
  • 只有 http，但是 flickr 其實有 https 支援
  • 只有一些尺寸，無法滿足我支援 retina disaply 的需求
  • 最重要的，不支援自訂 template

如果你對以上任何一個問題有同感的話，歡迎你來試試看我的擴充套件，有任何問題歡迎回報。

vim-airline

vim-airline

最近發現 vim-airline 這個 plugin，其實就是 powerline 的 copy，vim powerline 也出來蠻久了，大部分人其實都不會去深入研究要怎樣設定 statusline，所以像這種可以很快速套用，又好看功能又好的 plugin 都很受歡迎。

我以前都是用自己寫的設定，還接了 hahhah.vim，長得比較簡單：

My Vim statusline

一直沒換到 powerline 其實主要原因是它要有裝 patch 過，加了幾個新符號的字型才好看，然後這有些麻煩所以一直沒嘗試。不過前兩天看到的 airline ，README 列出的一些差異讓我對它蠻感興趣的，讓我感興趣的點是：

  • airline 是 pure vim script，powerline 則有一些 python
  • 簡單, 速度也比 powerline 快

而且它也支援 powerline patch 過的字形來做類似的效果，只是一開始設定時發現右邊的三角形位置怎麼一直不太正確，研究了一下發現是全形半形的問題：

ambiguous

在 iTerm 裡面有個設定是Treat ambiguous-width characters as double width，開啟這個選項，iTerm 就會把沒有定義字寬的一些字元當成是兩倍寬，也就是全形字，會有這個選項是因為一些符號、標點，在 Unicode 裡面不論是中文英文都是共用的，但是在中文的世界會習慣是用全形，如果設定錯，會出現的問題其實也沒很大，通常是全行字的符號塞進半形的空間，或是反過來，不過如果有排版需求的話就很重要了，像是 BBS，所以要用 iTerm 上 BBS 這個選項就很重要了。

powerline 自訂的這幾個 新符號，也是歸類在這些字元，剛好我以前都會用 iTerm 上工作站連 BBS，所以那個選項有開，結果就是如上圖下半部那樣，符號的右邊多了一個空白的寬度。這張圖上下的差異只有該選項有沒有打開而已，不過雖然搞清楚問題在哪，我最後還是決定不要用三角形，只用了 branch 的符號而已，結果就是本文的第一張圖那樣。

phantom-jasmine 與阿拉丁

前陣子開始寫起 JavaScript 的 test，用的是 Jasmine，用瀏覽器跑都正常，只是用 npm 上的 phantom-jasmine 來跑測試結果都不正常。因為想要把專案丟上 Travis CI，所以今天又花了不少時間下去找問題，結果還真是有些意外。

這個問題最大原因就是 npm phantom-jasmine 和原作者的 phantom-jasmine 的是不同 fork，npm module maintainer 是 rlayte，而 phantom-jasmine 作者是 Joshua Carver，雖然 npm 網站上的使用說明和 Joshua 在 Github 上的幾乎都一樣，Joshua 也在 README 說了可以用 npm 裝，但是實際上用npm install -g phantom-jasmine裝的卻是 rlayte 的 fork，然而 rlayte 的那版，卻是他改很大的版本，整個行為都已經和說明上寫的不一樣了。

本來的 phantom-jasmine 是使用者丟 HTML 檔案進去，不過 rlayte 改到後來，變成是它會自己去特定的路徑找 js 檔案，丟進 tempalte 產生 html 然後跑測試的，而這個路徑好死不死預設是exmample/js/**/*.js，雖然測試的 spec 還是預設在spec/下找，可是要測試的檔案會在example/js/下面找，如果沒有改設定，根本就不會測試到想要測的檔案，這個行為是和原來完全不一樣的，而且也沒寫在文件上。

還好我也有發現，rlayte 其實已經把他的 phantom-jasmine fork 改成 aladdin 了，前面講的那些行為該怎樣用，其實都寫在 aladdin 那邊的 README 內。

aladdin 設計的其實蠻無腦的，spec 檔案放在spec/目錄下，然後在 spec 目錄下新增一個 config.json：

[ 
  'lib/jquery.js',
  'app/**/*.js'
]

這個檔案把你要測試的 src 和 dependency 都照順序放好，然後在專案根目錄執行aladdin就會開始測試了，連 Jasmine 的檔案都不用自己抓。

要在 Travis CI 上跑測試，只要再加上兩個檔案就可以，一個是 .travis.yml，另外一個是 package.json，.travis.yml只要設成 Node.js 的就可以，可以直接拷貝範例，然後內容的 nodejs 版本只留一個。然後再加上 before_script 告訴 Travis CI 要安裝 aladdin：

before_script:
    - npm install -g aladdin

至於package.json就稍微複雜一點，以下是範例：

{
  "name": "robst-video",
  "author": "othree",
  "scripts": {
    "test": "aladdin"
  }
}

重點是 scripts 那一塊，要讓npm test執行時會跑aladdin來啟動測試。這樣 Travis CI 就可以幫你跑測試了。

回到 phantom-jasmine，現在的狀況是 npm 的 phantom-jasmine 被搞爛了，我必須說 rlayte 搞出這狀況還蠻不負責任的，所以也 report 了個 issue，還好 npm 可以從本地目錄安裝：

sudo npm install -g /path/to/phantom-jasmine/

只是裝起來後，目前我反而還沒辦法讓原版的 phantom-jasmine 跑起來，可能下次有動力在繼續看問題在哪了吧。 目前我是只有在 robust-video 這個專案跑 Travis CI，有興趣的也可以直接去看看檔案怎樣放。

最後補充一下，不知道有沒有人注意到，迪士尼的阿拉丁電影裡面的公主，就叫做 Jasmine。

台大

由於已經連續發了超過十篇技術文章，所以要貼些照片來平衡一下，剛好前兩天晚上走過台大拍了一些，所以就來貼些在台大校內拍的照片吧。

台大校門

閱讀「台大」全文
更之前的文章