【四】搭建Markdown的編輯器

本系列有五篇：分別是 
【一】Ubuntu14.04+Jekyll+Github Pages搭建靜態博客：主要是安裝方面 
【二】jekyll 的使用 ：主要是jekyll的配置 
【三】Markdown+jekyll在Gitpages上寫blog的經常使用操做 ：主要Markdown的使用

【四】搭建Markdown的編輯器 

【五】將博客從jekyll遷移到了hexo

 

 

---

 

 

目錄：

一、StackEdit

二、gedit

三、Sublime Text 3 

 

1、在線編輯器：StackEdit

2、gedit 安裝 Markdown Preview

Ubuntu自帶的gedit編輯器也是有很強大的功能的，且支持插件的安裝。對於喜歡用Markdown的我來講，這固然是很好的了，gedit自己就支持Markdown的語法高亮，在加上預覽功能那就很完美了，Markdown Preview插件就很好的解決了這個問題，可讓咱們在當前窗口就能預覽.

系統版本：Ubuntu 14.04
gedit版本：3.10.4
Markdown preview version:2

1.根據本身的gedit版本去下載對應的文件，gedit3.8以上的版本能夠去如下連接下載

• Download the archive of gedit-markdown v2.

2.解壓文件

3.在解壓的文件夾中打開終端，輸入如下安裝命令

./gedit-markdown.sh install

卸載命令爲:

./gedit-markdown.sh uninstall

4.完成安裝..

5.gedit默認不起用插件，因此咱們要去 編輯>首選項>插件 將Markdown Preview插件啓用，重啓gedit便可。

（若是導入不成功，請參考異常1）

6.當咱們編輯Markdown文件時，使用快捷鍵Ctrl+Alt+M便可預覽，若是沒有預覽請先Ctrl+Alt+V 切換到Markdown Preview的顯示面板

7.Markdown Preview的顯示面板能夠設爲側邊欄顯示或底部面板顯示，具體設置以下:
打開文件

$HOME/user/.config/gedit/gedit-markdown.ini

修改行

Panel=bottom

user爲你的用戶名
Panel=bottom ;底部面板顯示
Panel=side ;側邊欄顯示

固然咱們也能夠在這個配置文件中修改熟悉的快捷鍵

 

異常1:
Q：沒法啓用Markdown Preview 插件,顯示沒法加載插件
A：請檢查包python3-markdown是否安裝，若是你的系統版本爲Ubuntu 11.10或更高，還須要安裝gir1.2-webkit-3.0.安裝完成後，重啓gedit便可。在部分狀況下重啓gedit無果，須要重啓系統才能生效。

更多功能和設置詳情請閱讀壓縮包中的READE.md文件

 

 

2、MarkdownPad

用戶能夠經過鍵盤快捷鍵和工具欄按鈕來使用或者移除 Markdown 格式。MarkdownPad左右欄的分割方式令用戶能夠實時看到 HTML 格式的 Markdown 文檔。

下載地址： http://markdownpad.com/

下載完直接安裝便可；而後打開就能夠操做了。

若打開後出現異常，請參考異常2

異常2：LivePreview不能渲染。

LivePreview is not working - it displays an error message stating This view has crashed!

This issue has been specifically observed in Windows 8. You may see an error message as shown here, and no HTML will be rendered when you type in the Markdown Editor pane.

To fix this issue, please try installing the Awesomium 1.6.6 SDK.

If you continue to experience issues, please install Microsoft's DirectX End-User Runtimes (June 2010).

參考官網，下載Awesomium 1.6.6 SDK （是一個webkit內核的瀏覽器插件，渲染須要） .並安裝後，問題解決。

 

3、Sublime Text 3

Sublime Text 3做爲一個優秀的文本編輯器，擁有不少的擴展插件。咱們能夠利用這些插件爲Sublime Text 增長擴展的功能，在這裏咱們藉助兩個插件來將Sublime Text 3變成一個 Markdown 的編輯器。

一、安裝sublime3：下載地址：http://www.sublimetext.com/3

註冊碼：

----- BEGIN LICENSE ----
Andrew Weber
Single User License
EA7E-855605
813A03DD 5E4AD9E6 6C0EEB94 BC99798F
942194A6 02396E98 E62C9979 4BB979FE
91424C9D A45400BF F6747D88 2FB88078
90F5CC94 1CDC92DC 8457107A F151657B
1D22E383 A997F016 42397640 33F41CFC
E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D
5CDB7036 E56DE1C0 EFCC0840 650CD3A6
B98FC99C 8FAC73EE D2B95564 DF450523
------ END LICENSE ------

2. 安裝Package Control套件：sublime 上的包管理器，能夠用來裝其餘插件

咱們藉助 Package Control 來安裝插件(若是Sublime Text 3尚未安裝Package Control，請參考這裏：Package Control Installation)。

（1）開啓 Sublime Text 3 程序，以下圖顯示主控臺視窗，或直接按下 Ctrl + ` 組合鍵開啟：

（2）直接複製貼上這個網頁提供的指令到主控臺命令列中，並直接按下 Enter 執行，便可動安裝完畢。
請注意：這段安裝程式碼，僅適用於 Sublime Text 3 版本！

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

安裝好之後重啓程序：
（3）然後你就能夠在 [Preferences] –> [Package Control] 啟用這個 Sublime Text 套件管理員：

（4）未來有許多好用套件都會透過這個套件管理員協助安裝，最經常使用的就是 Install Package命令了

（5）快速叫用 Install Package 命令的快速鍵是：Ctrl+Shift+P 然後輸入 inst 之後按下 Enter 鍵

 

【sublime更詳細內容可參考】Sublime Text 3 新手上路：必要的安裝、設定與基本使用教學

3. 安裝Markdown Editing和Markdown Preview 插件

點擊 Preferences --> 選擇 Package Control: intall，

而後再插件庫中分別選擇和安裝Markdown Editing和Markdown Preview便可。

可在控制檯看到安裝的信息：

而後重啓Sublime Text 3，建立一個以md爲後綴的文件，既能夠開始編輯Markdown文件了。Markdown Editing 爲提供了 Markdown 格式的高亮顯示，如圖：

4. 使用 Markdown Preview 生成 HTML

輸入 Shift + Ctrl + P，輸入 Markdown Preview，能夠看到以下選項：

經過給出的選項，咱們能夠在瀏覽器中預覽生成HTML的效果，也能夠保存，或者導出生成的HTML文件。如今咱們選擇第一個選項：Preview in Browser ，而後再選擇一個生成HTML的CSS模板，就能夠在瀏覽器中看到生成的HTML了。

五、自定義快捷鍵

若是咱們想要直接在瀏覽器中預覽效果的話，能夠自定義快捷鍵：點擊 Preferences --> 選擇 Key Bindings User，輸入：

{"keys": ["alt+m"], "command": "markdown_preview", "args": { "target": "browser"} }

保存後，直接輸入快捷鍵：Alt + M 就能夠直接在瀏覽器中預覽生成的HTML文件了。

設置語法高亮和mathjax支持

在Preferences -> Package Settings -> Markdown Preview -> Setting - User中添加以下參數：

{
    /*
        Enable or not mathjax support.
    */
    "enable_mathjax": true,

    /*
        Enable or not highlight.js support for syntax highlighting.
    */
    "enable_highlight": true,
}

由於Sublime Text 3 開始不能直接修改  中的設置了，咱們須要在對應的 選項裏面對Default中的默認參數重寫覆蓋便可。Setting - DefaultSetting - User

渲染結果：

 

六、 更換Markdown的語法主題，自帶的Markdown語法高亮等不是很好看，更換成Markdown-Extended的，

一樣使用Ctrl+Shift+P使用包管理器進行安裝：搜索Markdown Extended，而後安裝便可

而後在View-->Synytax中選擇Markdown Extended

 

【注意】關於linux下sublime text 3 不能輸入中文的問題，可參考【完美解決 Linux 下 Sublime Text 中文輸入】