Sublime Text環境を構築する

* Sublime Textはシェアウェアです
* 試用期間や機能に制限はありませんが、気に入ったら開発者のために購入しましょう
    * <https://www.sublimetext.com/buy>

---
# Sublime Text 2環境を構築する

## モチベーション
* 使っていて楽しいエディタを使いたい
* ドキュメント作成を快適にしたい
    * シンプル
    * 豊富なシンタックスハイライト
    * 複数個所の同時編集
    * 画面分割可能
    * プロジェクト管理


## 1. Sublime Text 2のインストール

* [Sublime Text](http://www.sublimetext.com/ "Sublime Text")

![Sublime Text](https://lh6.googleusercontent.com/-pQtEgJoKQGA/U_8_s2NhBUI/AAAAAAAAAKg/6-R3NvvLc2c/w800-h786-no/SublimeText-001.jpg "Sublime Text")


## 2. Package Controlの導入

### 2.1 Package Controlのインストール

* パッケージ管理を行うパッケージ「[Package Control](https://sublime.wbond.net/ "Package Control")」で、まずこれをインストールする

![Package Control](https://lh3.googleusercontent.com/-Q5Z0wAu7Xuw/U_8_qk6ZLGI/AAAAAAAAAMU/83Jj3gwUbKw/w891-h383-no/SublimeText-002-PackageControl.png "Package Control")

* Sublime Text 2を選択する

![Package Control](https://lh5.googleusercontent.com/-VGJeGKHiJvo/U_8_rs5-EhI/AAAAAAAAAMk/f1_C1W4FDBw/w898-h649-no/SublimeText-003-PackageControl.png "Package Control")

* 下図のPythonコードをコピーする

![Package Control](https://lh3.googleusercontent.com/-0lsF_8wxDzM/U_8_rEWZZaI/AAAAAAAAAMc/fSJRJDYeZbc/w862-h623-no/SublimeText-004-PackageControl.png "Package Control")
 
```py:コピーしたPythonコード
import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
```

* コンソールを開く（`Ctrl`+`` ` ``）

```text
Sublime Textメニューバー[View]-[Show Console]
```

![Show Console](https://lh3.googleusercontent.com/-nN-EI2HVvlE/U_8_onq_SUI/AAAAAAAAAMM/PqJALrkyxDQ/w886-h735-no/SublimeText-005-ShowConsole.png "Show Console")

* コピーしておいたPythonコードを貼り付けて実行する

![Show Console](https://lh3.googleusercontent.com/-zCBDCAngR4g/U_8_nuUU6pI/AAAAAAAAAL8/rQYiCL6PrDg/w852-h720-no/SublimeText-006-ShowConsole.png "Show Console")

### 2.2 ［Proxy環境限定］Package Controlのインストール

* __Proxy環境__では証明書失効の確認に失敗するので、無効化しておく
    * Internet Explorerのインターネットオプションを開き、「サーバの証明書失効を確認する」を無効化する

```text
Internet Explorerメニューバー[ツール]-[インターネット オプション]-[詳細設定]
□サーバの証明書失効を確認する
```

![インターネットオプション](https://lh4.googleusercontent.com/-znJqmsiB8-E/U_8_peIpVvI/AAAAAAAAAKE/Kkuyf8Qu604/w489-h558-no/SublimeText-007-InternetOption.png "インターネットオプション")

* __Proxy環境__では`{'http': 'http://<username>:<password>@<proxy-host>:<port>'}`を追記したうえでPythonコードを実行する

```py:Proxy設定を追記したPythonコード
import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler{'http': 'http://[username]:[password]@[host]:[port]'})) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
```

### 2.3 ［Proxy環境限定］Package Controlの設定

* __Proxy環境__の場合は、Package Controlの設定にプロキシ設定を追加する必要がある

```text
Sublime Textメニューバー[Preferences]-[Package Settings]-[Package Control]-[Settings - User]
```

```json
{
    "installed_packages":
    [
    ],
    // An HTTP proxy server to use for requests. Not used on Windows since the
    // system proxy configuration is utilized via WinINet.
    "http_proxy": "http://proxy.example.com:8080",
    // An HTTPS proxy server to use for requests - this will inherit from
    // http_proxy if it is set to "" or null and http_proxy has a value. You
    // can set this to false to prevent inheriting from http_proxy. Not used on
    // Windows since the system proxy configuration is utilized via WinINet.
    "https_proxy": "https://proxy.example.com:8080",

    // Username and password for both http_proxy and https_proxy. May be used
    // with WinINet to set credentials for system-level proxy config.
    "proxy_username": "<username>",
    "proxy_password": "<password>"
}
```


## 3. パッケージの導入

### 3.1 Package Controlの使い方

* コマンドパレットを開く（`Ctrl`+`Shift`+`P`）

```text
Sublime Textメニューバー[Tools]-[Command Palette]
```
![Command Palette](https://lh4.googleusercontent.com/-FtmNCSXexJU/U_8_oYBRERI/AAAAAAAAAME/hrCBlatFjWY/w868-h735-no/SublimeText-008-CommandPalette.png "Command Palette")

* パッケージを追加したい場合、コマンドパレットに`install`と入力してPackage Controlをインストールモードで起動する

![Command Palette](https://lh6.googleusercontent.com/-nNGdSnjUJN8/U_8_m_TCp7I/AAAAAAAAAL0/jZBBYDdNQJU/w866-h732-no/SublimeText-009-PackageControl-install.png "Command Palette")

* 追加したいパッケージ名を入力する
    * インクリメントサーチしてくれる

![Package Control](https://lh4.googleusercontent.com/-bpAGdICyXe8/U_8_mSXxd-I/AAAAAAAAALs/XqRUrCaeLV8/w865-h732-no/SublimeText-010-PackageControl-install.png "Package Control")

* パッケージを削除したい場合、コマンドパレットに`remove`と入力してPackage Controlをリムーブモードで起動する

![Command Palette](https://lh4.googleusercontent.com/-3Ifb-_UQYdA/U_8_l7Z2h3I/AAAAAAAAALg/snurydUa_Pc/w866-h734-no/SublimeText-011-PackageControl-remove.png "Command Palette")

* 削除したいパッケージ名を入力する
    * インストール済みのパッケージからインクリメントサーチしてくれる 

![Package Control](https://lh4.googleusercontent.com/-WrO0b-SHqgo/U_8_lbOenOI/AAAAAAAAALY/Ffgm-ElK4wQ/w864-h732-no/SublimeText-012-PackageControl-remove.png "Package Control")

### 3.2 インストールしているパッケージ一覧

* [All Autocomplete](https://github.com/alienhard/SublimeAllAutocomplete "alienhard/SublimeAllAutocomplete")
    * オートコンプリートの機能を強化してくれる
    * マッチする文字列があれば入力候補に表示される

* [BracketHighlighter](https://github.com/facelessuser/BracketHighlighter "facelessuser/BracketHighlighter")
    * `[]`,`()`,`{}`,`""`,`''`,`<tag></tag>`などのブラケットを強調表示してくれる

* [ConvertToUTF8](https://github.com/seanliang/ConvertToUTF8 "seanliang/ConvertToUTF8")
    * Shift_JIS,EUC-JPなどの文字コードに対応する

* [FileDiffs](https://github.com/colinta/SublimeFileDiffs "colinta/SublimeFileDiffs")
    * ファイルの差分

* [IMESupport](https://github.com/chikatoike/IMESupport "chikatoike/IMESupport")
    * Windows環境において、IMEを利用した文字入力をサポートする
    * 日本語入力をインライン入力可能にする

* [LineEndings](https://github.com/SublimeText/LineEndings "SublimeText/LineEndings")
    * ステータスバーに改行コードを表示する

|   表示  | 改行コード |
| :------ | :--------- |
| Windows | CR/LF      |
| Unix    | LF         |
| CR      | CR         |

* [Local History](https://github.com/vishr/local-history "vishr/local-history")
    * 簡易なファイルの変更履歴管理をする

* [OmniMarkupPreviewer](https://github.com/timonwong/OmniMarkupPreviewer "timonwong/OmniMarkupPreviewer")
    * Markdownプレビューア
        * `Ctrl`+`Alt`+`O`: Preview Markup in Browser.
        * `Ctrl`+`Alt`+`X`: Export Markup as HTML.
        * `Ctrl`+`Alt`+`C`: Copy Markup as HTML.

* [SideBarEnhancements](https://github.com/titoBouzout/SideBarEnhancements "titoBouzout/SideBarEnhancements")
    * サイドバー右クリック時のメニューを拡張する 

* [Solarized Color Scheme](https://github.com/SublimeColors/Solarized "SublimeColors/Solarized")
    * Solarizedカラースキーム 

* [SublimeCodeIntel](https://github.com/SublimeCodeIntel/SublimeCodeIntel "SublimeCodeIntel/SublimeCodeIntel")
    * オートコンプリートの機能を強化してくれる
    * 関数・変数が定義されているところにジャンプできるようになる
 
* [Table Editor](https://github.com/vkocubinsky/SublimeTableEditor "vkocubinsky/SublimeTableEditor")
    * Markdown記法のテーブル入力支援

* [Theme - Flatland](https://github.com/thinkpixellab/flatland "thinkpixellab/flatland")
    * Flatlandテーマ
    * フラットデザイン
    * サイドバーにアイコンが追加される


## 4. 設定

### 4.1 基本設定

```text
Sublime textメニューバー[Preferences]-[Settings - User] 
```

```json:Preferences.sublime-settings
{
    // Calculates indentation automatically when pressing enter
	"auto_indent": true,
	// Controls auto pairing of quotes, brackets etc
	"auto_match_enabled": true,
    // Sets the colors used within the text area
	"color_scheme": "Packages/Solarized Color Scheme/Solarized (light).tmTheme",
    // Set to false to turn off the indentation guides.
    // The color and width of the indent guides may be customized by editing
    // the corresponding .tmTheme file, and specifying the colors "guide",
    // "activeGuide" and "stackGuide"
	"draw_indent_guides": true,
    // Controls how the indent guides are drawn, valid options are
    // "draw_normal" and "draw_active". draw_active will draw the indent
    // guides containing the caret in a different color.
	"indent_guide_options":
	[
		"draw_normal",
		"draw_active"
	],
    // Set to "none" to turn off drawing white space, "selection" to draw only the
    // white space within the selection, and "all" to draw all white space
	"draw_white_space": "selection",
    // [Flatland] square file tabs instead of rounded corners
	"flatland_square_tabs": true,
	"font_face": "Ricty",
	"font_size": 11,
	// If enabled, will highlight any line with a caret
	"highlight_line": true,
	// Makes tabs with modified files more visible
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"Vintage"
	],
    // Set to false to prevent word wrapped lines from being indented to the same
    // level
	"indent_subsequent_lines": true,
    // Set to false to not highlight angle brackets. This only takes effect if
    // match_brackets is true
	"match_brackets": false,
    // Makes auto indent a little smarter, e.g., by indenting the next line
    // after an if statement in C. Requires auto_indent to be enabled.
	"smart_indent": true,
	"tab_size": 4,
    // The theme controls the look of Sublime Text's UI (buttons, tabs, scroll bars, etc)
	"theme": "Flatland Dark.sublime-theme",
    // Set to true to insert spaces when tab is pressed
	"translate_tabs_to_spaces": true,
    // Disables horizontal scrolling if enabled.
    // May be set to true, false, or "auto", where it will be disabled for
    // source code, and otherwise enabled.
	"word_wrap": "auto"
}
```

### 4.2 個別設定

#### 4.2.1 ガイドライン設定

##### モチベーション
* ガイドラインがすべて同一カラーなので、どのインデントに位置しているのかわかりづらい
* アクティブなガイドラインを別カラーにしてわかりやすくしたい

##### デフォルト
* デフォルトで有効
* グレー破線表示

![Guide Line(default)](https://lh6.googleusercontent.com/-Csyx3Zjsq7c/U_8_kmH5_QI/AAAAAAAAALQ/WqHpUJOV2_A/w847-h719-no/SublimeText-013-Setting-guideline-before.png "Guide Line(default)")

```json:Preferences.sublime-settings
    // Set to false to turn off the indentation guides.
    // The color and width of the indent guides may be customized by editing
    // the corresponding .tmTheme file, and specifying the colors "guide",
    // "activeGuide" and "stackGuide"
    "draw_indent_guides": true,

    // Controls how the indent guides are drawn, valid options are
    // "draw_normal" and "draw_active". draw_active will draw the indent
    // guides containing the caret in a different color.
    "indent_guide_options": ["draw_normal"],
```

##### カスタマイズ
* アクティブガイド、その親となるガイドライン、その他ガイドラインを別カラーに設定する
* `"indent_guide_options":`に`"draw_active"`を追加する

![Guide Line(custom)](https://lh4.googleusercontent.com/-HfwDycDHy4w/U_8_jjeeqpI/AAAAAAAAALI/H3GJ4casRoY/w849-h718-no/SublimeText-014-Setting-guideline-after.png "Guide Line(custom)")

```json:Preferences.sublime-settings
    // Set to false to turn off the indentation guides.
    // The color and width of the indent guides may be customized by editing
    // the corresponding .tmTheme file, and specifying the colors "guide",
    // "activeGuide" and "stackGuide"
	"draw_indent_guides": true,
    // Controls how the indent guides are drawn, valid options are
    // "draw_normal" and "draw_active". draw_active will draw the indent
    // guides containing the caret in a different color.
	"indent_guide_options":
	[
		"draw_normal",
		"draw_active"
	],
```

* 使用しているカラースキームを確認しておく

```json:Preferences.sublime-settings
    // Sets the colors used within the text area
	"color_scheme": "Packages/Solarized Color Scheme/Solarized (light).tmTheme",
```

* [Adobe Kuler](https://kuler.adobe.com/ja/ "Adobe Kuler")上でSolarizedで検索して、調和の取れた色をピックアップしておく

* 使用しているカラースキームファイル（`Solarized (light).tmTheme`）にガイドラインのカラー設定を追記する

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>name</key>
    <string>Solarized (light)</string>
    <key>settings</key>
    <array>
        <dict>
            <key>settings</key>
            <dict>
                <key>background</key>
                <string>#FDF6E3</string>
                <key>caret</key>
                <string>#657B83</string>
                <key>foreground</key>
                <string>#657B83</string>
                <key>invisibles</key>
                <string>#EEE8D5</string>
                <key>lineHighlight</key>
                <string>#EEE8D5</string>
                <key>selection</key>
                <string>#839496</string>
                <key>selectionForeground</key>
                <string>#FDF6E3</string>
                <key>selectionBorder</key>
                <string>#93A1A1</string>
                <key>gutter</key>
                <string>#EEE8D5</string>
                <!-- ここからカスタマイズ -->
                <key>guide</key>
                <string>#93A1A1</string>
                <key>activeGuide</key>
                <string>#D33683</string>
                <key>stackGuide</key>
                <string>#268BD3</string>
                <!-- ここまでカスタマイズ -->
            </dict>
        </dict>
```

#### 4.2.2 Markdownプレビューに目次を追加する

##### モチベーション
* ドキュメント全体のアウトラインを把握したい
* リンクつきで目的の場所にジャンプしたい

##### カスタマイズ
* `"extensions":`に`"toc"`を追記する

```json:OmniMarkupPreviewer.sublime-settings
{
    // MarkdownRenderer options
    "renderer_options-MarkdownRenderer": {
        // Valid extensions:
        // - OFFICIAL (Python Markdown) -
        //   "extra": Combines ["abbr", "attr_list", "def_list", "fenced_code", "footnotes", "tables", "smart_strong"]
        //            For PHP Markdown Extra(http://michelf.ca/projects/php-markdown/extra/)
        //   "abbr": http://packages.python.org/Markdown/extensions/abbreviations.html
        //   "attr_list": http://packages.python.org/Markdown/extensions/attr_list.html
        //   "def_list": http://packages.python.org/Markdown/extensions/definition_lists.html
        //   "fenced_code": http://packages.python.org/Markdown/extensions/fenced_code_blocks.html
        //   "footnotes": http://packages.python.org/Markdown/extensions/footnotes.html
        //   "tables": http://packages.python.org/Markdown/extensions/tables.html
        //   "smart_strong": http://packages.python.org/Markdown/extensions/smart_strong.html
        //   "codehilite": http://packages.python.org/Markdown/extensions/code_hilite.html
        //   "meta": http://packages.python.org/Markdown/extensions/meta_data.html
        //   "toc": http://packages.python.org/Markdown/extensions/toc.html
        //   "nl2br": http://packages.python.org/Markdown/extensions/nl2br.html
        // - 3RD PARTY -
        //   "strikeout": Strikeout extension syntax - `This ~~is deleted text.~~`
        //   "subscript": Subscript extension syntax - `This is water: H~2~O`
        //   "superscript": Superscript extension syntax 0 `2^10^ = 1024`
        //   "smartypants": Python-Markdown extension using smartypants to emit
        //                   typographically nicer ("curly") quotes, proper
        //                   ("em" and "en") dashes, etc.
        //                   See: https://bitbucket.org/jeunice/mdx_smartypants
        "extensions": ["tables", "strikeout", "fenced_code", "codehilite","toc"]
    }
}
```

* `*.md`ファイルに`[TOC]`と入力するとその部分にリンクつきの目次が表示される

![OmniMarkupPreviewer](https://lh5.googleusercontent.com/-GTc6wepWCGo/U_8_u0qNquI/AAAAAAAAAKo/AqOsFN2_w5c/w648-h721-no/SublimeText-015-Setting-TOC.png "OmniMarkupPreviewer")

#### 4.2.3 OmniMarkupPreviewerのCSSのカスタマイズ

##### モチベーション
* 見出しやテーブルをもうちょっと見やすくしたい

##### デフォルト

![default](https://lh5.googleusercontent.com/-JWHkG_iGjYU/U_9DPx6i_SI/AAAAAAAAAM8/CPO0FUq3hVc/w654-h721-no/test.md-default.png "default")

##### カスタマイズ

![custom](https://lh4.googleusercontent.com/-GR5PxiZ2HXM/U_9DQpxCTMI/AAAAAAAAANA/2EdqjqV2XJg/w654-h721-no/test.md-github-custom.png "custom")

```diff:github.css
--- C:\Users\<username>\AppData\Roaming\Sublime Text 2\Packages\OmniMarkupPreviewer\public\github.css.org 
+++ C:\Users\<username>\AppData\Roaming\Sublime Text 2\Packages\OmniMarkupPreviewer\public\github.css 
@@ -94,6 +94,7 @@
     font-weight: bold;
     margin: 20px 0 10px;
     padding: 0;
+    padding-left: 3px;
     position: relative;
 }
 .markdown-body h1 .mini-icon-link, .markdown-body h2 .mini-icon-link, .markdown-body h3 .mini-icon-link, .markdown-body h4 .mini-icon-link, .markdown-body h5 .mini-icon-link, .markdown-body h6 .mini-icon-link {
@@ -110,21 +111,23 @@
 .markdown-body h1:hover a.anchor .mini-icon-link, .markdown-body h2:hover a.anchor .mini-icon-link, .markdown-body h3:hover a.anchor .mini-icon-link, .markdown-body h4:hover a.anchor .mini-icon-link, .markdown-body h5:hover a.anchor .mini-icon-link, .markdown-body h6:hover a.anchor .mini-icon-link { display: inline-block }
 .markdown-body h1 tt, .markdown-body h1 code, .markdown-body h2 tt, .markdown-body h2 code, .markdown-body h3 tt, .markdown-body h3 code, .markdown-body h4 tt, .markdown-body h4 code, .markdown-body h5 tt, .markdown-body h5 code, .markdown-body h6 tt, .markdown-body h6 code { font-size: inherit }
 .markdown-body h1 {
-    color: #000000;
-    font-size: 28px;
+    background-color: #eef2ea;
+    color: #000000;
+    padding-top: 10px padding-bottom: 10px;
+    font-size: 32px;
 }
 .markdown-body h2 {
-    border-bottom: 1px solid #CCCCCC;
+    background-color: rgba(204, 204, 204, 0.25);
     color: #000000;
     font-size: 24px;
 }
-.markdown-body h3 { font-size: 18px }
-.markdown-body h4 { font-size: 16px }
-.markdown-body h5 { font-size: 14px }
-.markdown-body h6 {
-    color: #777777;
-    font-size: 14px;
-}
+.markdown-body h3 {
+    border-bottom: 1px solid #ccc;
+    font-size: 22px;
+}
+.markdown-body h4 { font-size: 20px }
+.markdown-body h5 { font-size: 18px }
+.markdown-body h6 { font-size: 16px }
 .markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol, .markdown-body dl, .markdown-body table, .markdown-body pre { margin: 15px 0 }
 .markdown-body hr {
     background: url("/public/github-dirty-shade.png") repeat-x scroll 0 0 transparent;
@@ -177,8 +180,12 @@
 .markdown-body table {
     border-collapse: collapse;
     border-spacing: 0;
-}
-.markdown-body table th { font-weight: bold }
+    margin-left: 3px;
+}
+.markdown-body table th {
+    background-color: #eef2ea;
+    font-weight: bold;
+}
 .markdown-body table th, .markdown-body table td {
     border: 1px solid #CCCCCC;
     padding: 6px 13px;
@@ -277,10 +284,11 @@
     white-space: pre;
 }
 .markdown-body .highlight pre, .markdown-body pre {
+    font-family: ricty;
     background-color: #F8F8F8;
     border: 1px solid #CCCCCC;
     border-radius: 3px 3px 3px 3px;
-    font-size: 13px;
+    font-size: 14px;
     line-height: 19px;
     overflow: auto;
     padding: 6px 10px;
```

* CSSの整形には[Procssor](http://tools.maxcdn.com/procssor/ "Procssor")を利用

![Procssor](https://lh5.googleusercontent.com/-mdskWEmh-3g/U_8_gnui25I/AAAAAAAAAKw/k3PMMIdf-Pg/w868-h814-no/SublimeText-016-Setting-OmniMarkupPreviewer-css.png "Procssor")

#### 4.2.4 特定のシンタックスのみインデント幅を変える

##### モチベーション
* デフォルトのインデント幅は`"tab_size": 4`
* 横に長くなりがちなbashのみインデント幅を`"tab_size": 2`にしたい

##### カスタマイズ
* [Sublime Text 2 Documentation / Indentation Settings](http://www.sublimetext.com/docs/2/indentation.html "Indentation Settings")

* bashファイルを開いた上で、設定を追記する

```text
Sublime textメニューバー[Preferences]-[Settings - More]-[Syntax Specific - User]
```

![Sublime Text](https://lh5.googleusercontent.com/-79DPDfr1raI/U_8_hannLGI/AAAAAAAAAK4/D16qsO_i1g8/w842-h705-no/SublimeText-017-Setting-indent.png "Sublime Text")

```json:Shell-Unix-Generic.sublime-settings
{
  "tab_size": 2,
  "translate_tabs_to_spaces": true
}
```


---


## 備考

* カスタマイズ後の`github.css`

```css:github.css
body {
    font-family: Helvetica, arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: white;
    padding: 30px;
    color: #333;
}
body > *:first-child { margin-top: 0 !important }
body > *:last-child { margin-bottom: 0 !important }
a {
    color: #4183C4;
    text-decoration: none;
}
a:hover { text-decoration: underline }
a.absent { color: #cc0000 }
a.anchor {
    display: block;
    padding-left: 30px;
    margin-left: -30px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}
kbd {
    background: #f1f1f1;
    background: -moz-linear-gradient(#f1f1f1, #ddd);
    background: -webkit-linear-gradient(#f1f1f1, #ddd);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#dddddd')";
    border-radius: 2px;
    border: 1px solid #ddd;
    border-bottom-color: #ccc;
    border-right-color: #ccc;
    padding: 1px 4px;
    line-height: 10px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#realtime .status {
    overflow: visible;
    position: absolute;
    top: -5px;
    left: 0;
    background: url("/public/images/github-status.png");
    width: 26px;
    height: 26px;
    display: block;
    margin: 0 5px 0 0;
}
#realtime .up { background-position: 0 0 }
#realtime .problem { background-position: 0 -53px }
#realtime .down { background-position: 0 -26px }
.container {
    max-width: 920px;
    margin: 0 auto 20px auto;
}
#header {
    background: #FAFAFA;
    background: -moz-linear-gradient(#FAFAFA, #EAEAEA);
    background: -webkit-linear-gradient(#FAFAFA, #EAEAEA);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#eaeaea')";
    border-bottom: 1px solid #CACACA;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4),0 0 10px rgba(0, 0, 0, 0.1);
}
#markup { padding: 3px }
#markup article { padding-top: 30px }
.markdown-body {
    font-size: 14px;
    line-height: 1.6;
}
.markdown-body > *:first-child { margin-top: 0 !important }
.markdown-body > *:last-child { margin-bottom: 0 !important }
.markdown-body a.absent { color: #CC0000 }
.markdown-body a.anchor {
    bottom: 0;
    cursor: pointer;
    display: block;
    left: 0;
    margin-left: -30px;
    padding-left: 30px;
    position: absolute;
    top: 0;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
    cursor: text;
    font-weight: bold;
    margin: 20px 0 10px;
    padding: 0;
    padding-left: 3px;
    position: relative;
}
.markdown-body h1 .mini-icon-link, .markdown-body h2 .mini-icon-link, .markdown-body h3 .mini-icon-link, .markdown-body h4 .mini-icon-link, .markdown-body h5 .mini-icon-link, .markdown-body h6 .mini-icon-link {
    color: #000000;
    display: none;
}
.markdown-body h1:hover a.anchor, .markdown-body h2:hover a.anchor, .markdown-body h3:hover a.anchor, .markdown-body h4:hover a.anchor, .markdown-body h5:hover a.anchor, .markdown-body h6:hover a.anchor {
    line-height: 1;
    margin-left: -22px;
    padding-left: 0;
    text-decoration: none;
    top: 15%;
}
.markdown-body h1:hover a.anchor .mini-icon-link, .markdown-body h2:hover a.anchor .mini-icon-link, .markdown-body h3:hover a.anchor .mini-icon-link, .markdown-body h4:hover a.anchor .mini-icon-link, .markdown-body h5:hover a.anchor .mini-icon-link, .markdown-body h6:hover a.anchor .mini-icon-link { display: inline-block }
.markdown-body h1 tt, .markdown-body h1 code, .markdown-body h2 tt, .markdown-body h2 code, .markdown-body h3 tt, .markdown-body h3 code, .markdown-body h4 tt, .markdown-body h4 code, .markdown-body h5 tt, .markdown-body h5 code, .markdown-body h6 tt, .markdown-body h6 code { font-size: inherit }
.markdown-body h1 {
    background-color: #eef2ea;
    color: #000000;
    padding-top: 10px padding-bottom: 10px;
    font-size: 32px;
}
.markdown-body h2 {
    background-color: rgba(204, 204, 204, 0.25);
    color: #000000;
    font-size: 24px;
}
.markdown-body h3 {
    border-bottom: 1px solid #ccc;
    font-size: 22px;
}
.markdown-body h4 { font-size: 20px }
.markdown-body h5 { font-size: 18px }
.markdown-body h6 { font-size: 16px }
.markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol, .markdown-body dl, .markdown-body table, .markdown-body pre { margin: 15px 0 }
.markdown-body hr {
    background: url("/public/github-dirty-shade.png") repeat-x scroll 0 0 transparent;
    border: 0 none;
    color: #CCCCCC;
    height: 4px;
    padding: 0;
}
.markdown-body > h2:first-child, .markdown-body > h1:first-child, .markdown-body > h1:first-child + h2, .markdown-body > h3:first-child, .markdown-body > h4:first-child, .markdown-body > h5:first-child, .markdown-body > h6:first-child {
    margin-top: 0;
    padding-top: 0;
}
.markdown-body a:first-child h1, .markdown-body a:first-child h2, .markdown-body a:first-child h3, .markdown-body a:first-child h4, .markdown-body a:first-child h5, .markdown-body a:first-child h6 {
    margin-top: 0;
    padding-top: 0;
}
.markdown-body h1 + p, .markdown-body h2 + p, .markdown-body h3 + p, .markdown-body h4 + p, .markdown-body h5 + p, .markdown-body h6 + p { margin-top: 0 }
.markdown-body li p.first { display: inline-block }
.markdown-body ul, .markdown-body ol { padding-left: 30px }
.markdown-body ul.no-list, .markdown-body ol.no-list {
    list-style-type: none;
    padding: 0;
}
.markdown-body ul li > *:first-child, .markdown-body ol li > *:first-child { margin-top: 0 }
.markdown-body ul ul, .markdown-body ul ol, .markdown-body ol ol, .markdown-body ol ul { margin-bottom: 0 }
.markdown-body dl { padding: 0 }
.markdown-body dl dt {
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
    margin: 15px 0 5px;
    padding: 0;
}
.markdown-body dl dt:first-child { padding: 0 }
.markdown-body dl dt > *:first-child { margin-top: 0 }
.markdown-body dl dt > *:last-child { margin-bottom: 0 }
.markdown-body dl dd {
    margin: 0 0 15px;
    padding: 0 15px;
}
.markdown-body dl dd > *:first-child { margin-top: 0 }
.markdown-body dl dd > *:last-child { margin-bottom: 0 }
.markdown-body blockquote {
    border-left: 4px solid #DDDDDD;
    color: #777777;
    padding: 0 15px;
}
.markdown-body blockquote > *:first-child { margin-top: 0 }
.markdown-body blockquote > *:last-child { margin-bottom: 0 }
.markdown-body table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-left: 3px;
}
.markdown-body table th {
    background-color: #eef2ea;
    font-weight: bold;
}
.markdown-body table th, .markdown-body table td {
    border: 1px solid #CCCCCC;
    padding: 6px 13px;
}
.markdown-body table tr {
    background-color: #FFFFFF;
    border-top: 1px solid #CCCCCC;
}
.markdown-body table tr:nth-child(2n) { background-color: #F8F8F8 }
.markdown-body img { max-width: 100% }
.markdown-body span.frame {
    display: block;
    overflow: hidden;
}
.markdown-body span.frame > span {
    border: 1px solid #DDDDDD;
    display: block;
    float: left;
    margin: 13px 0 0;
    overflow: hidden;
    padding: 7px;
    width: auto;
}
.markdown-body span.frame span img {
    display: block;
    float: left;
}
.markdown-body span.frame span span {
    clear: both;
    color: #333333;
    display: block;
    padding: 5px 0 0;
}
.markdown-body span.align-center {
    clear: both;
    display: block;
    overflow: hidden;
}
.markdown-body span.align-center > span {
    display: block;
    margin: 13px auto 0;
    overflow: hidden;
    text-align: center;
}
.markdown-body span.align-center span img {
    margin: 0 auto;
    text-align: center;
}
.markdown-body span.align-right {
    clear: both;
    display: block;
    overflow: hidden;
}
.markdown-body span.align-right > span {
    display: block;
    margin: 13px 0 0;
    overflow: hidden;
    text-align: right;
}
.markdown-body span.align-right span img {
    margin: 0;
    text-align: right;
}
.markdown-body span.float-left {
    display: block;
    float: left;
    margin-right: 13px;
    overflow: hidden;
}
.markdown-body span.float-left span { margin: 13px 0 0 }
.markdown-body span.float-right {
    display: block;
    float: right;
    margin-left: 13px;
    overflow: hidden;
}
.markdown-body span.float-right > span {
    display: block;
    margin: 13px auto 0;
    overflow: hidden;
    text-align: right;
}
.markdown-body code, .markdown-body tt {
    background-color: #F8F8F8;
    border: 1px solid #EAEAEA;
    border-radius: 3px 3px 3px 3px;
    margin: 0 2px;
    padding: 0 5px;
    white-space: nowrap;
}
.markdown-body pre > code {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    margin: 0;
    padding: 0;
    white-space: pre;
}
.markdown-body .highlight pre, .markdown-body pre {
    font-family: ricty;
    background-color: #F8F8F8;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    font-size: 14px;
    line-height: 19px;
    overflow: auto;
    padding: 6px 10px;
}
.markdown-body pre code, .markdown-body pre tt {
    background-color: transparent;
    border: medium none;
}
/* Syntax highlight */
.codehilite { background: #ffffff }
.codehilite .c {
    color: #999988;
    font-style: italic;
} /* Comment */
.codehilite .err {
    color: #a61717;
    background-color: #e3d2d2;
} /* Error */
.codehilite .k {
    color: #000000;
    font-weight: bold;
} /* Keyword */
.codehilite .o {
    color: #000000;
    font-weight: bold;
} /* Operator */
.codehilite .cm {
    color: #999988;
    font-style: italic;
} /* Comment.Multiline */
.codehilite .cp {
    color: #999999;
    font-weight: bold;
} /* Comment.Preproc */
.codehilite .c1 {
    color: #999988;
    font-style: italic;
} /* Comment.Single */
.codehilite .cs {
    color: #999999;
    font-weight: bold;
    font-style: italic;
} /* Comment.Special */
.codehilite .gd {
    color: #000000;
    background-color: #ffdddd;
} /* Generic.Deleted */
.codehilite .gd .x {
    color: #000000;
    background-color: #ffaaaa;
} /* Generic.Deleted.Specific */
.codehilite .ge {
    color: #000000;
    font-style: italic;
} /* Generic.Emph */
.codehilite .gr { color: #aa0000 } /* Generic.Error */
.codehilite .gh { color: #999999 } /* Generic.Heading */
.codehilite .gi {
    color: #000000;
    background-color: #ddffdd;
} /* Generic.Inserted */
.codehilite .gi .x {
    color: #000000;
    background-color: #aaffaa;
} /* Generic.Inserted.Specific */
.codehilite .go { color: #888888 } /* Generic.Output */
.codehilite .gp { color: #555555 } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: #aaaaaa } /* Generic.Subheading */
.codehilite .gt { color: #aa0000 } /* Generic.Traceback */
.codehilite .kc {
    color: #000000;
    font-weight: bold;
} /* Keyword.Constant */
.codehilite .kd {
    color: #000000;
    font-weight: bold;
} /* Keyword.Declaration */
.codehilite .kp {
    color: #000000;
    font-weight: bold;
} /* Keyword.Pseudo */
.codehilite .kr {
    color: #000000;
    font-weight: bold;
} /* Keyword.Reserved */
.codehilite .kt {
    color: #445588;
    font-weight: bold;
} /* Keyword.Type */
.codehilite .m { color: #009999 } /* Literal.Number */
.codehilite .s { color: #d14 } /* Literal.String */
.codehilite .na { color: #008080 } /* Name.Attribute */
.codehilite .nb { color: #0086B3 } /* Name.Builtin */
.codehilite .nc {
    color: #445588;
    font-weight: bold;
} /* Name.Class */
.codehilite .no { color: #008080 } /* Name.Constant */
.codehilite .ni { color: #800080 } /* Name.Entity */
.codehilite .ne {
    color: #990000;
    font-weight: bold;
} /* Name.Exception */
.codehilite .nf {
    color: #990000;
    font-weight: bold;
} /* Name.Function */
.codehilite .nn { color: #555555 } /* Name.Namespace */
.codehilite .nt { color: #000080 } /* Name.Tag */
.codehilite .nv { color: #008080 } /* Name.Variable */
.codehilite .ow {
    color: #000000;
    font-weight: bold;
} /* Operator.Word */
.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
.codehilite .mf { color: #009999 } /* Literal.Number.Float */
.codehilite .mh { color: #009999 } /* Literal.Number.Hex */
.codehilite .mi { color: #009999 } /* Literal.Number.Integer */
.codehilite .mo { color: #009999 } /* Literal.Number.Oct */
.codehilite .sb { color: #d14 } /* Literal.String.Backtick */
.codehilite .sc { color: #d14 } /* Literal.String.Char */
.codehilite .sd { color: #d14 } /* Literal.String.Doc */
.codehilite .s2 { color: #d14 } /* Literal.String.Double */
.codehilite .se { color: #d14 } /* Literal.String.Escape */
.codehilite .sh { color: #d14 } /* Literal.String.Heredoc */
.codehilite .si { color: #d14 } /* Literal.String.Interpol */
.codehilite .sx { color: #d14 } /* Literal.String.Other */
.codehilite .sr { color: #009926 } /* Literal.String.Regex */
.codehilite .s1 { color: #d14 } /* Literal.String.Single */
.codehilite .ss { color: #990073 } /* Literal.String.Symbol */
.codehilite .bp { color: #999999 } /* Name.Builtin.Pseudo */
.codehilite .vc { color: #008080 } /* Name.Variable.Class */
.codehilite .vg { color: #008080 } /* Name.Variable.Global */
.codehilite .vi { color: #008080 } /* Name.Variable.Instance */
.codehilite .il { color: #009999 } /* Literal.Number.Integer.Long */
```