給你本身的博客加個 Markdown

今天給你們推薦一個簡單易用的開源 Markdown 組件, Markdown 組件倉庫地址是:

https://github.com/pandao/editor.md

Markdown 是什麼

Markdown 是一個簡單的電子郵件風格的標記語言, 甚至比世界上最好的兩門語言 Python 還要簡單.

使用 Markdown 碼字有如下優勢:

• 純文本，因此兼容性極強，能夠用全部文本編輯器打開。
• 讓你專一於文字而不是排版。
• 格式轉換方便，Markdown 的文本你能夠輕鬆轉換爲 html、電子書等。
• Markdown 的標記語法有極好的可讀性。

誰在用

Github 上項目的 README 都是用 Markdown 寫的, 文件後綴是.md, 網易雲筆記, 簡書也都支持 Markdown 語法.

不少人使用微信排版也是用 Markdown 寫完直接交給轉換插件轉化爲 HTML 後複製過去一鍵搞定.

引入編輯器

使用方法很簡單, 直接把倉庫克隆下來, 而後在你的網頁中貼上下面的代碼: (在 Django 或其餘Web 框架中, 更推薦使用相似 Jinja 的非硬編碼引入格式而非下述的絕對地址)

<link rel="stylesheet" href="css/editormd.min.css" />
<div id="editormd">
    <textarea style="display:none;">### Hello Editor.md !</textarea>
</div>

並添加 JavaScript 代碼啓用(一樣推薦軟編碼來引入文件), 能夠對編輯器的大小等進行設置, 具體參考文檔:

<script src="jquery.min.js"></script>
<script src="editormd.min.js"></script>
<script type="text/javascript">
	$(function(){
    /**
     * markdown實例化
     * @type {[type]}
     */
    var editor = editormd("editormd", {
      height : 500,
      path : "./lib/", // Autoload modules mode, codemirror, marked... dependents libs path
      saveHTMLToTextarea : true,
  	  previewTheme : "dark",       //下面這一行將使用dark主題
      watch : true,                // 開啓實時預覽
      tex: true,                   // 開啓科學公式TeX語言支持，默認關閉
      flowChart: true,             // 開啓流程圖支持，默認關閉
      sequenceDiagram: true       // 開啓時序/序列圖支持，默認關閉,
    });
</script>

引入以後大概是這個樣子:

Markdown 轉化爲 HTML

若是是想把文章呈如今網頁而不是編輯, 那麼引入下面的代碼便可:

<!-- Markdown -->
<link rel="stylesheet" href="css/editormd.min.css" />
 <link rel="stylesheet" href="css/editormd.preview.css" />
<div id="test-editormd-view2">
    <textarea id="blog_content"></textarea>          
</div>

而後是對應js

<script type="text/javascript">
        $(function() {
       /**
       * 解析Markdown
       * @type {String}
       */
      var testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
            markdown        : contentsDo.content,// 這裏是要顯示的字段內容,
            htmlDecode      : "style,script,iframe",  // you can filter tags decode
            tocm            : true,    // Using [TOCM]
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默認不解析
            flowChart       : true,  // 默認不解析
            sequenceDiagram : true,  // 默認不解析
        });
        });
</script>