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