JS載入解析Markdown文件過程詳解
阿新 • • 發佈：2020-05-20
網上有很多網站會通過.md文件來做頁面內容，很好奇，這是怎麼做的？
出於好奇，建了一個test.md檔案：
# Hello World! asdfa asd *斜體文字* **粗體文字** ***斜粗體文字*** 分隔線（如下） *** * * * **** - - - ----------- GOOGLE.COM ~~刪除線~~ <u>下劃線</u>
用瀏覽器開啟之後，結果就被原封不動的輸出來了，瀏覽器根本不會解析這玩意... 跟阮老師的blog相差好大啊~呵呵~還是太天真了！
然後，發現：
原來markdown文字還是需要用marked.js這麼一個庫來解析的！於是乎，依葫蘆畫個瓢
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>md文件內容轉成html顯示</title>
</head>
<body>
<div id="content" style="width: 500px;height: 500px;overflow: auto"></div>
<div style="margin-top: 30px">
<form name="form" action="" method="post">
<select name="q">
<option value="md/gs.md">公式</option>
<option value="md/test.md">第一個Markdown文件</option>
</select>
<input type="button" value="顯示" onclick="showMarkdown()">
</form>
</div>
<script type="text/javascript" src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'></script>
<script type="text/javascript">
function showMarkdown() {
var f = form;
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHttp');
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('content').innerHTML = marked(xmlhttp.responseText);
}
}
// 向伺服器傳送請求
xmlhttp.open('GET',f.q.value,true);
xmlhttp.send();
}
</script>
</body>
</html>於是就有了下面的樣子：
原理就是用ajax請求，取到 .md檔案裡的內容，再通過marked.js提供的marked()方法將markdown語法的文字轉成html文件。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。