使用Strapdown.js、Showdown.js or Marked.js 在html裡加載 markdown檔案
環境
- Ajax
- markdown
- html
- Strapdown.js、Showdown.js or Marked.js
解決方案
0x01 Strapdown.js
引入 Strapdown.js Github 位址
使用方式非常簡單粗暴
<!DOCTYPE html>
<html>
<title>Hello Strapdown</title>
<xmp theme="united" style="display:none;">
# Markdown 内容
這是一段 markdown文本。
</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>
需要注意的是，要把導入js的script放到文本之後。
缺點：破壞了html 的格式(沒有body标簽，并且不支援其他标簽)。
0x02 Showdown.js
引入 Showdown.js Github位址
$.ajax({
url: "/markdown.md",//檔案位置
type: "GET",//請求方式為get
dataType: "text", //傳回資料格式
success: function(data) {//請求成功完成後要執行的方法
var converter = new showdown.Converter();
var html = converter.makeHtml(data);
$("#content").html(html);
}
})
0x03 Marked.js
引入 Marked.js Github位址
通過Ajax請求md文檔
$.ajax({
url: "/markdown.md",//檔案位置
type: "GET",//請求方式為get
dataType: "text",
success: function(data) {//請求成功完成後要執行的方法
$("#content").html(marked(data));
}
})
轉載請注明出處
![一個小小的移動web版音樂播放器[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)