【四】搭建Markdown的編輯器


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

【四】搭建Markdown的編輯器 

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

 
 

 

 

目錄:

1、StackEdit

2、gedit

3、Sublime Text 3 

 

一、在線編輯器:StackEdit

二、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以上的版本可以去以下鏈接下載

2.解壓文件

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

./gedit-markdown.sh install

卸載命令為:

./gedit-markdown.sh uninstall

4.完成安裝..

image

5.gedit默認不起用插件,所以我們要去 編輯>首選項>插件 將Markdown Preview插件啟用,重啟gedit即可。

(如果導入不成功,請參考異常1

image

6.當我們編輯Markdown文件時,使用快捷鍵Ctrl+Alt+M即可預覽,如果沒有預覽請先Ctrl+Alt+V 切換到Markdown Preview的顯示面板

image

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無果,需要重啟系統才能生效。

image

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

 

 

二、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).

image

參考官網,下載Awesomium 1.6.6 SDK是一個webkit內核的瀏覽器插件,渲染需要) .並安裝后,問題解決。

image

 

三、Sublime Text 3

Sublime Text 3作為一個優秀的文本編輯器,擁有很多的擴展插件。我們可以利用這些插件為Sublime Text 增加擴展的功能,在這里我們借助兩個插件來將Sublime Text 3變成一個 Markdown 的編輯器。

1、安裝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 ------

image

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)

image

安裝好之後重啟程序:
(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 EditingMarkdown Preview即可。

image

可在控制台看到安裝的信息:

image

image

然后重啟Sublime Text 3,創建一個以md為后綴的文件,既可以開始編輯Markdown文件了。Markdown Editing 為提供了 Markdown 格式的高亮顯示,如圖:

image

4. 使用 Markdown Preview 生成 HTML

輸入 Shift + Ctrl + P,輸入 Markdown Preview,可以看到如下選項:

image

通過給出的選項,我們可以在瀏覽器中預覽生成HTML的效果,也可以保存,或者導出生成的HTML文件。現在我們選擇第一個選項:Preview in Browser ,然后再選擇一個生成HTML的CSS模板,就可以在瀏覽器中看到生成的HTML了。

5、自定義快捷鍵

如果我們想要直接在瀏覽器中預覽效果的話,可以自定義快捷鍵:點擊 Preferences --> 選擇 Key Bindings User,輸入:

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

保存后,直接輸入快捷鍵: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,
}
image
因為Sublime Text 3 開始不能直接修改 Setting - Default 中的設置了,我們需要在對應的 Setting - User選項里面對Default中的默認參數重寫覆蓋即可。
 

image

渲染結果:

image

 

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

同樣使用Ctrl+Shift+P使用包管理器進行安裝:搜索Markdown Extended,然后安裝即可

然后在View-->Synytax中選擇Markdown Extended

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM