網站如何整合markdown編輯器
收藏(4)
Markdown是一種可以使用普通文字編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文字內容具有一定的格式。它用簡潔的語法代替排版，而不像一般我們用的文書處理軟體 Word 等有大量的排版、字型設定。這使得我們能夠專心的碼字，而不需要額外地進行排版修飾，既簡單又方便。很多站長編輯都喜歡用markdown來寫文章，像簡書、開源中國等平臺都支援markdown編輯，所以最近就像把自己的部落格站點也整合markdown。
我的部落格是用蟬知系統搭建的，目前沒有現成的markdown外掛，所以只好自己動手，豐衣足食了。大家可能用的是不同的建站系統開發的網站，但不必擔心，markdown的整合很簡單，雖然系統可能不同，但原理都是一樣的，這裡我藉助我自己的站點為例，就不過多的講解蟬知系統內部整合，只是給大家演示下整體的操作流程，以供大家參考。
操作過程：
然後將showdown.js引入到內容編輯頁面的模板檔案中。
還要引入下面的JS程式碼：
function compile(){
var text = document.getElementById("content").value;
var converter = new showdown.Converter();
var html = converter.makeHtml(text);
document.getElementById("result").innerHTML = html;
}
上面程式碼中，text是獲取你輸入的markdown語法的文章內容，然後例項化直譯器物件，然後使用直譯器將你輸入的文章內容翻譯成目標樣式的介面內容，即html，然後輸出即可。
注：根據不同系統的具體操作不同，有的可能會涉及到資料庫欄位建立等，程式碼的引入方式也因不同系統架構、擴充套件原理不同而又差別。
通過上面的操作原理，我自己的部落格中集成了markdown編輯器，編輯與預覽同步，所見即所得，操作簡便，我們先一起來看下效果。
以上和大家一起分享了網站中如何整合markdown編輯器，大家可以在自己的站點上操作試一試，如果有什麼問題或經驗，歡迎和大家一起分享交流。
收藏(4)Markdown是一種可以使用普通文字編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文字內容具有一定的格式。它用簡潔的語法代替排版，而不像一般我們用的文書處理軟體 Word 等有大量的排版、字型設定。這使得我們能夠專心的碼字，而不需要額外地進行排版修飾，既簡單又方便。很多站長編輯都喜歡用markdown來寫文章，像簡書、開源中國等平臺都支援markdown編輯，所以最近就像把自己的部落格站點也整合markdown。
我的部落格是用蟬知系統搭建的，目前沒有現成的markdown外掛，所以只好自己動手，豐衣足食了。大家可能用的是不同的建站系統開發的網站，但不必擔心，markdown的整合很簡單，雖然系統可能不同，但原理都是一樣的，這裡我藉助我自己的站點為例，就不過多的講解蟬知系統內部整合，只是給大家演示下整體的操作流程，以供大家參考。
操作過程：
然後將showdown.js引入到內容編輯頁面的模板檔案中。
還要引入下面的JS程式碼：
function compile(){
var text = document.getElementById("content").value;
var converter = new showdown.Converter();
var html = converter.makeHtml(text);
document.getElementById("result").innerHTML = html;
}
上面程式碼中，text是獲取你輸入的markdown語法的文章內容，然後例項化直譯器物件，然後使用直譯器將你輸入的文章內容翻譯成目標樣式的介面內容，即html，然後輸出即可。
注：根據不同系統的具體操作不同，有的可能會涉及到資料庫欄位建立等，程式碼的引入方式也因不同系統架構、擴充套件原理不同而又差別。
通過上面的操作原理，我自己的部落格中集成了markdown編輯器，編輯與預覽同步，所見即所得，操作簡便，我們先一起來看下效果。
以上和大家一起分享了網站中如何整合markdown編輯器，大家可以在自己的站點上操作試一試，如果有什麼問題或經驗，歡迎和大家一起分享交流。