JS加載解析Markdown文檔過程詳解
更新時間：2020年05月19日 10:33:24 作者：沐浴點陽光
這篇文章主要介紹了JS加載解析Markdown文檔過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
網(wǎng)上有很多網(wǎng)站會通過.md文檔來做頁面內容，很好奇，這是怎么做的？
出于好奇，建了一個test.md文件：
# Hello World! asdfa asd *斜體文本* **粗體文本** ***斜粗體文本*** 分隔線（如下） *** * * * **** - - - ----------- GOOGLE.COM ~~刪除線~~ <u>下劃線</u>
用瀏覽器打開之后，結果就被原封不動的輸出來了，瀏覽器根本不會解析這玩意... 跟阮老師的blog相差好大啊~呵呵~還是太天真了！
然后，發(fā)現(xiàn)：
原來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);
}
}
// 向服務器發(fā)送請求
xmlhttp.open('GET', f.q.value, true);
xmlhttp.send();
}
</script>
</body>
</html>
于是就有了下面的樣子：
原理就是用ajax請求，取到 .md文件里的內容，再通過marked.js提供的marked()方法將markdown語法的文本轉成html文檔。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JavaScript 函數(shù)參數(shù)是傳值(byVal)還是傳址(byRef) 分享
這篇文章主要介紹了在JS中函數(shù)參數(shù)是傳值(byVal)還是傳址(byRef)的誤區(qū)我們通過實例說明一下，有需要的朋友可以參考2013-07-07
微信小程序實現(xiàn)運動步數(shù)排行功能（可刪除）
這篇文章主要介紹了微信小程序實現(xiàn)運動步數(shù)排行功能（可刪除），實現(xiàn)代碼也很簡單,需要的朋友可以參考下2018-07-07
最近應項目要求，需要對table中的數(shù)據(jù)進行升序或降序排列，于是研究了一下js，希望對大家有幫助。2011-08-08![文本框中,回車鍵觸發(fā)事件的js代碼[多瀏覽器兼容]](http://img.jbzj.com/images/xgimg/bcimg3.png)
在文本框中輸入完內容后,經(jīng)常需要按回車,焦點跳到下個文本框,或者觸發(fā)按鈕事件2010-06-06
JS獲取當前日期 YYYY-MM-DD hh-mm-ss的示例代碼
在編寫JavaScript代碼時,遇到需要獲取當前日期和時間并將其格式化為 yyyymmddhhmmss 字符串的情況,可以使用本文中介紹的幾種實現(xiàn)方式中的任意一種,2024-02-02
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)雙層嵌套菜單欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
下面小編就為大家?guī)硪黄猨s無法獲取到html標簽的屬性的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了javascript滾動圖片具體實現(xiàn)，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了微信小程序播放背景音樂,實現(xiàn)原理是通過wx.getBackgroundAudioManager獲取全局唯一的背景音頻管理器，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2022-01-01
這篇文章主要介紹了js操作cookie保存瀏覽記錄的方法,涉及JavaScript使用cookie記錄并保存用戶瀏覽網(wǎng)頁信息的實現(xiàn)技巧,需要的朋友可以參考下2015-12-12