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;
}
}
修改完成,不再有框框字了!
留言