作這個markdown編輯器是由於本身日常用markdown寫文檔寫得比較多,網上找的都不太好用,並且都不支持擴展開發,沒法實現本身所需的一些定製化功能.css
從今年四月份開始,陸陸續續的利用一些零碎時間作到如今,所需的基本功能都實現了,所以如今寫一篇總結把功能介紹一遍.html
這個編輯器的主要特點是自動上傳圖片,文檔分享以及導出pdfnode
功能列表
- 基本markdown語法
- 自動更新.
- 實時預覽窗口
- 編輯器,預覽,代碼段樣式選擇和自定義
- 自動上傳圖片
- emoji表情.
- 導出html,pdf文件.
- 目錄語法
- 一鍵文檔分享
基本markdown語法
Markdown 是一種輕量級標記語言，創始人爲約翰·格魯伯（John Gruber）。它容許人們「使用易讀易寫的純文本格式編寫文檔，而後轉換成有效的XHTML(或者HTML)文檔」。 —— 維基百科git
本編輯器的markdown語法基於github的GitHub Flavored Markdown擴展出更多語法,所以基本的語法直接看Github的幫助文檔github
自動更新
目前提供最新版的下載地址是 v1.0.0.0
第一次使用請直接下載,之後只要點擊右上角的
按鈕就會檢查更新,若是有新版本,則會提示是否要更新.瀏覽器
實時預覽窗口
系統設置裏提供兩種方式的預覽窗口選擇,如圖markdown
. hexo
雙屏幕的用戶能夠選擇在新窗口打開預覽. 編寫文檔時,預覽窗口會實時的更新並滾動到當前編輯位置.
預覽窗口可以使用
按鈕切換開關.app
樣式選擇與自定義
如圖,能夠選擇編輯器樣式和預覽窗口樣式以及預覽窗口裏的代碼段樣式.
軟件預設了一些樣式供選擇,用戶也能夠直接編輯樣式文件自定義.這3個樣式存放的目錄分別在軟件app目錄下的:編輯器
編輯器樣式: app\lib\codemirror\theme預覽樣式目錄: \app\css\previewtheme代碼段樣式目錄: app\node_modules\highlight.js\styles
能夠直接修改裏面已有的樣式,也能夠直接新增文件,下拉菜單會自動讀取全部樣式文件供選擇.
雲存儲配置
因爲自動上傳圖片和一鍵文檔分享須要用到雲存儲(目前用的是七牛),所以這裏先講下系統設置裏的雲存儲設置.
首先得註冊一個七牛賬號.
進入後臺,新建二個共享空間,一個用於存儲圖片,另外一個存儲共享文檔(其實也能夠用同一個,看我的習慣)
選擇新建的空間,點擊空間設置>域名設置,查看自動分配的域名
回到後臺首頁,點擊帳號設置,能夠查看accessKey(AK)和SecretKey(SK)
在系統設置裏配置好這幾個字段
我把我空間的密鑰遮住了,你們請填上本身的空間密鑰
自動上傳圖片
將圖片複製到剪貼板後(如qq截圖,系統截屏等),直接在編輯器裏粘貼圖片,會自動將圖片上傳到配置好的七牛空間裏.並在編輯器裏填入markdown格式的圖片引用,如圖
圖片名稱是隨機生成的(目前這樣的話,用久了圖片很亂,暫時想不到什麼好辦法能夠不犧牲易用性,又方便分類管理圖片).
我博客裏全部圖片都是這樣的,寫起博客來特方便.
一鍵文檔分享
若是文檔裏有此格式的標籤[SHARE:文件名].
則點擊 
按鈕時,會自動將文檔解析成html,並上傳到配置好的文檔空間,而後在瀏覽器打開.文件名爲標籤裏指定的文件名.
emoji表情功能.
目前支持此表格裏的全部emoji表情.
只要在寫文檔時,以這種格式 :表情代號:,就會被解析爲對應emoji表情.以下面這些表情.
:+1: :shit: :-1: :point_right::ok_hand:
表情代號在上面的表格裏查詢
導出html,pdf文件功能.
點擊
能夠導出解析好的文檔到html或者pdf文件.導出哪一種類型,取決於你輸入的後綴名(若是爲pdf,則導出時須要等待幾秒)
目錄語法
文檔裏若是帶有TOC標籤
1 |
[TOC] |
則會自動將h1~h6標籤按嵌套結構解析爲目錄樹,並替換顯示在TOC標籤位置