Markdown簡介
Markdown 是一種輕量級的「標記語言」，它的優(yōu)點很多，目前也被越來越多的寫作愛好者，撰稿者廣泛使用。Markdown 的語法十分簡單，常用的標記符號也不超過十個，這種相對于更為復雜的 HTML 標記語言來說，Markdown 可謂是十分輕量的，學習成本也不需要太多，且一旦熟悉這種語法規(guī)則，會有一勞永逸的效果。
Markdown優(yōu)點
用markdown編寫完后，我們可以導出到html發(fā)布到網站或者導出pdf保存到本地，十分的方便。最重要的是markdown源文件是純文本文件，也就是意味著可以跨平臺，使用 Markdown 的優(yōu)點如下：
專注你的文字內容而不是排版樣式，安心寫作。
輕松的導出 HTML、PDF 和本身的 .md 文件。
純文本內容，兼容所有的文本編輯器與字處理軟件。
隨時修改你的文章版本，不必像字處理軟件生成若干文件版本導致混亂。
可讀、直觀、學習成本低。
Markdown語法教程
點這兒 ------ Markdown語法教程--圖片版，Markdown編輯器推薦與語法教程--展示版
我是分割線我是分割線我是分割線我是分割線我是分割線
如何讓自己的站點也支持Markdown
上面介紹了Markdown的好處和使用教程，下面就是開始讓自己的網站也支持該語言。
之所以markdown可以在網站中使用，是因為markdown可以導出html，我們要做的便是將markdown轉換成html
showdown.js
第一步
我們先去下載開源js庫showdown.js，這是現(xiàn)在比較流行的開源庫，我們沒有必要自己再去造輪子。
下載下來后是一個這樣的一個文件夾：
里面包含：
第二步
將這個文件夾拖入我們工程的public目錄下(根據自己的情況去找對應的文件夾)
第三步
我們需要在哪個頁面使用markdown就在哪個界面引入showdown.min.js文件
在head頭中引入，一定要搞清楚準確的路徑去找出showdown.min.js文件
第四步
showdown.js的使用方法很簡單
function compile(){
//獲取要轉換的文字
var text = document.getElementById("content").value;
//創(chuàng)建實例
var converter = new showdown.Converter();
//進行轉換
var html = converter.makeHtml(text);
//展示到對應的地方 result便是id名稱
document.getElementById("result").innerHTML = html;
}
如果想實現(xiàn)實時的轉換，比如：簡書的預覽模式
可以參考下面的代碼
<!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，如果想實現(xiàn)實時更新，使用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>
效果如下：
如果不實現(xiàn)實時變換，把onkeyup去掉，然后直接獲取到標記語言的文本，然后進行轉換輸出到對應的位置就可以了，大家自行嘗試吧
整理by Demoer
