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,共同學習交流~