Atom 的中文顯示框框問題

Atom Editor 中文顯示框框問題

去年（2014）2月的時候，GitHub 推出一個長相很像 Sublime text 編輯器的文字編輯器 Atom，是一個以網頁為基礎開發的編輯器，目標是希望從小學生到駭客都會使用的好上手編輯器。結合了 sublime text 與 Emac 的優點，經過六年的開發磨了一把好劍，去年 5 月的時候 GitHub 將核心程式與套件管理程式開源

修改 style 檔案

開啓家目錄下 .atom 裡的設定 less 檔 ~/.atom/styles.less，在將核心程式與套件管理程式開源。
因爲是基於 Chromium 的桌面程式框架和 Coffeescript 所寫，所以能夠跨平臺使用整合使用體驗，也可以使用我們熟悉的 HTML、CSS、Javascript 來修改一些 Atom 的內容。有機會將瀏覽器使用的 WebGL 或是視覺化常用的 Javascript 函式庫 D3.js 使用在 Atom 上。
因為使用了 Node.js 的架構，所以可以使用 Node.js 裡 npm 管理的套件（六萬多個）。Atom 有許多優點也有一些小缺點，現在還在積極的發展中，版本更新的速度很快相信許多問題能迅速的獲得解決。

Atom 中文顯示變框框

Atom 在 Linux 的版本中中文顯示會變成一個個的框框，這多半是因為預設使用了沒有支援中文的字型所造成，可以由 setting 裡的 font-family 設定自己喜歡有支援中文的字型。
Atom 因為是由 GitHub 開發所以有支援 markdown 的語法，剛好最近開始練習使用 markdown 語法，剛好在離線時可以拿來在本機使用。但是開啟 maekdown preview （ctrl+m）的時候，即使在 setting 中有設定 font-family 中文還是會變成框框字，如下圖。

修改 style 檔案更換字型

如前述，由於 Atom 是用 chromium 的桌面程式框架，所以可以使用 CSS 來定義（大心）。修改方法是，開啓家目錄下 .atom 裡的設定 less 檔 ~/.atom/styles.less，在前面先定義 font-family 字型，套用在 atom-text-editor 和 markdown-preview 裡面。

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 *
 * If you are unfamiliar with LESS, you can read more about it here:
 * http://www.lesscss.org
 */
@font-family: 'YaHei Consolas Hybrid';

.tree-view {
}

atom-text-editor {
    font-family: @font-family;
}

atom-text-editor .cursor {
}

/* 自行加上 markdown-preview */
.markdown-preview {
    font-family: @font-family;
}

套用後中文字型就可以出現，不再是框框字了。可是在 markdown preview 的標題還是框框字？！如下圖。

請在打開 ~/.atom/styles.less 在 .markdown-preview 加上標題的字型設定。

/* 前略 */
/* 把所有標題（h1~h6）都加上 font-family 的設定 */
.markdown-preview⧸⧸ {
    font-family: @font-family;
    h1, h2, h3, h4, h5, h6 {
        font-family: @font-family;
    }
}

修改完成，不再有框框字了！