溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了JS加載解析Markdown文檔的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
網上有很多網站會通過.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" ></div>
<div >
<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文檔。
看完上述內容，是不是對JS加載解析Markdown文檔的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
