10分鐘讓你的站點也支援Markdown
Markdown簡介
Markdown 是一種輕量級的「標記語言」，它的優點很多，目前也被越來越多的寫作愛好者，撰稿者廣泛使用。Markdown 的語法十分簡單，常用的標記符號也不超過十個，這種相對於更為複雜的 HTML 標記語言來說，Markdown 可謂是十分輕量的，學習成本也不需要太多，且一旦熟悉這種語法規則，會有一勞永逸的效果。
Markdown優點
用markdown編寫完後，我們可以匯出到html釋出到網站或者匯出pdf儲存到本地，十分的方便。最重要的是markdown原始檔是純文字檔案，也就是意味著可以跨平臺，使用 Markdown 的優點如下：
專注你的文字內容而不是排版樣式，安心寫作。
輕鬆的匯出 HTML、PDF 和本身的 .md 檔案。
純文字內容，相容所有的文字編輯器與字處理軟體。
隨時修改你的文章版本，不必像字處理軟體生成若干檔案版本導致混亂。
可讀、直觀、學習成本低。
Markdown語法教程
我是分割線我是分割線我是分割線我是分割線我是分割線
如何讓自己的站點也支援Markdown
上面介紹了Markdown的好處和使用教程，下面就是開始讓自己的網站也支援該語言。
之所以markdown可以在網站中使用，是因為markdown可以匯出html，我們要做的便是將markdown轉換成html
showdown.js
第一步
我們先去下載開源js庫showdown.js，這是現在比較流行的開源庫，我們沒有必要自己再去造輪子。
下載下來後是一個這樣的一個資料夾：
裡面包含：
第二步
將這個資料夾拖入我們工程的public目錄下(根據自己的情況去找對應的資料夾)
第三步
我們需要在哪個頁面使用markdown就在哪個介面引入showdown.min.js檔案
在head頭中引入，一定要搞清楚準確的路徑去找出showdown.min.js檔案
第四步
showdown.js的使用方法很簡單
function compile(){ //獲取要轉換的文字 var text = document.getElementById("content").value; //建立例項 var converter = new showdown.Converter(); //進行轉換 var html = converter.makeHtml(text); //展示到對應的地方 result便是id名稱 document.getElementById("result").innerHTML = html; }
如果想實現實時的轉換，比如：簡書的預覽模式
可以參考下面的程式碼
<!DOCTYPE html>
<html>
<head>
<title>Markdown.js</title>
<script type="text/javascript" src="showdown-master/dist/showdown.min.js"></script>
</head>
<--我們可以使用樣式自定義markdown轉換後的樣式--!>
<style>
<--引用樣式--!>
blockquote {
border-left:#eee solid 5px;
padding-left:20px;
}
<--列表樣式--!>
ul li {
line-height: 20px;
}
<--程式碼樣式--!>
code {
color:#D34B62;
background: #F6F6F6;
}
}
</style>
<body>
<div>
<--設定id為oriContent，如果想實現實時更新，使用onkeyup方法--!>
<textarea id="oriContent" style="height:400px;width:600px;" onkeyup="convert()"></textarea>
<---設定展示的div新增id-!>
<div id="result"></div>
</div>
<--寫轉化函式--!>
<script type="text/javascript">
function convert(){
var text = document.getElementById("oriContent").value;
var converter = new showdown.Converter();
var html = converter.makeHtml(text);
document.getElementById("result").innerHTML = html;
}
</script>
</body>
</html>效果如下：
如果不實現實時變換，把onkeyup去掉，然後直接獲取到標記語言的文字，然後進行轉換輸出到對應的位置就可以了，大家自行嘗試吧
整理by Demoer,歡迎關注我的個人公眾號：zhyunfe-com,共同學習交流~
