JS加載解析Markdown文檔過(guò)程詳解
網(wǎng)上有很多網(wǎng)站會(huì)通過(guò).md文檔來(lái)做頁(yè)面內(nèi)容，很好奇，這是怎么做的？
出于好奇，建了一個(gè)test.md文件：
# Hello World! asdfa asd *斜體文本* **粗體文本** ***斜粗體文本*** 分隔線（如下） **** * *****- - ------------GOOGLE.COM ~~刪除線~~ <u>下劃線</u>
用瀏覽器打開(kāi)之后，結(jié)果就被原封不動(dòng)的輸出來(lái)了，瀏覽器根本不會(huì)解析這玩意... 跟阮老師的blog相差好大啊~呵呵~還是太天真了！
然后，發(fā)現(xiàn)：
原來(lái)markdown文本還是需要用marked.js這么一個(gè)庫(kù)來(lái)解析的！于是乎，依葫蘆畫(huà)個(gè)瓢
<!doctype html><html><head> <meta charset='utf-8'/> <title>md文檔內(nèi)容轉(zhuǎn)成html顯示</title></head><body> <div 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'>第一個(gè)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ā)送請(qǐng)求 xmlhttp.open(’GET’, f.q.value, true); xmlhttp.send(); } </script></body></html>
于是就有了下面的樣子：
原理就是用ajax請(qǐng)求，取到 .md文件里的內(nèi)容，再通過(guò)marked.js提供的marked()方法將markdown語(yǔ)法的文本轉(zhuǎn)成html文檔。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Python 實(shí)現(xiàn)勞拉游戲的實(shí)例代碼（四連環(huán)、重力四子棋）2. python 寫(xiě)函數(shù)在一定條件下需要調(diào)用自身時(shí)的寫(xiě)法說(shuō)明3. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法4. java獲取文件編碼,jsoup獲取html純文本操作5. 淺談Android Studio導(dǎo)出javadoc文檔操作及問(wèn)題的解決6. 利用CSS制作3D動(dòng)畫(huà)7. 一款功能強(qiáng)大的markdown編輯器tui.editor使用示例詳解8. 存儲(chǔ)于xml中需要的HTML轉(zhuǎn)義代碼9. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）10. .Net加密神器Eazfuscator.NET?2023.2?最新版使用教程
網(wǎng)公網(wǎng)安備