JS加載解析Markdown文檔的方法

發(fā)布時間：2020-07-23 14:57:59 來源：億速云閱讀：796 作者：小豬欄目：web開發(fā)

這篇文章主要講解了JS加載解析Markdown文檔的方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

網(wǎng)上有很多網(wǎng)站會通過.md文檔來做頁面內(nèi)容，很好奇，這是怎么做的？

出于好奇，建了一個test.md文件：

# Hello World! 
asdfa 
asd 
*斜體文本* 
**粗體文本** 
***斜粗體文本*** 
分隔線（如下） 
***
* * *
****
- - -
-----------
GOOGLE.COM 
~~刪除線~~ 
<u>下劃線</u>

JS加載解析Markdown文檔的方法

用瀏覽器打開之后，結(jié)果就被原封不動的輸出來了，瀏覽器根本不會解析這玩意... 跟阮老師的blog相差好大啊~呵呵~還是太天真了！

然后，發(fā)現(xiàn)：

JS加載解析Markdown文檔的方法

原來markdown文本還是需要用marked.js這么一個庫來解析的！于是乎，依葫蘆畫個瓢

<!doctype html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>md文檔內(nèi)容轉(zhuǎn)成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);
       }
     }

     // 向服務(wù)器發(fā)送請求
     xmlhttp.open('GET', f.q.value, true);
     xmlhttp.send();
   }
 </script>
</body>
</html>

于是就有了下面的樣子：

JS加載解析Markdown文檔的方法

原理就是用ajax請求，取到 .md文件里的內(nèi)容，再通過marked.js提供的marked()方法將markdown語法的文本轉(zhuǎn)成html文檔。

看完上述內(nèi)容，是不是對JS加載解析Markdown文檔的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

JS加載解析Markdown文檔的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽