鐩镐俊澶у閮藉凡缁忕煡閬搈arkdown鏄粈涔堜簡銆傛槸绋嬪簭鍛樺繀澶囩殑鏂囨。鏍煎紡銆傚彲浠ユ敮鎸佷唬鐮侀珮浜€佽〃鏍笺€佸浘鐗囥€佽棰戠瓑鏂囨。鏍煎紡馃榾馃榾浣嗘槸vue3涓浣曡В鏋恗arkdown鏂囦欢鍛紵馃馃馃鏁堟灉瑙佹晥鏋滃浘銆傞€氳繃璇锋眰鑾峰彇markdown婧愭枃浠讹紝鐒跺悗瑙ｆ瀽鎴愭櫘閫氱殑html鏄剧ず鍦ㄩ〉闈笂銆傜洰鍓嶇殑鏁堟灉鍙互鍦ㄥ湪绾挎枃妗ｄ腑鏌ョ湅銆傛垜浠彲浠ユ妸markdown鏂囦欢瑙ｆ瀽鎴恏tml鐨勬暣涓繃绋嬫媶鍒嗘垚濡備笅鍑犱釜姝ラ锛氳幏鍙杕arkdown婧愭枃浠跺皢markdown杞崲涓篽tml缇庡寲鏍峰紡鑾峰彇markdown鍐呭markdown.md鏄竴涓枃浠讹紝閭ｄ箞濡備綍鑾峰彇markdownw涓殑鍐呭鍛紵鍦ㄥ仛绗竴姝ョ殑鏃跺€欐兂闂竴涓棶棰橈紝濡備綍鑾峰彇鏈湴json鏂囦欢鐨勫唴瀹瑰憿锛熼€氳繃棰樺瀷杞崲锛屽ぇ瀹惰偗瀹氱煡閬撴€庝箞鑾峰彇鏈湴鐨刯son鍐呭浜嗏€斺€旈€氳繃fetch鑾峰彇馃榾馃榿馃榿馃榿閭ｄ箞鎴戜滑鍙互杩欐牱鍐欎唬鐮侊細fetch('./xxxx.json',{method:'GET',mode:'cors'//鍏佽鍙戦€佽法鍩熻姹倉).then(function(response){//鎵撳嵃杩斿洖鐨刯son鏁版嵁response.json().then(function(data){//鑾峰彇json鏂囦欢鍐呭})}).catch(function(e){//澶辫触鍚庣殑寮傚父澶勭悊})鏃㈢劧鍙互杩欐牱鑾峰彇json锛岄偅鑳戒笉鑳借繖鏍疯幏鍙杕arkdown.md鍛紵鍚岀悊锛屾垜浠篃鍙互杩欐牱灏濊瘯锛屼絾鏄偗瀹氭湁涓€涓湴鏂归渶瑕佷慨鏀癸紝閭ｅ氨鏄痳esponse.json()锛宮arkdown鏂囦欢涓殑杩斿洖鑲畾涓嶆槸json鏂囦欢锛岃€屾槸鏅€氱殑鏂囨湰锛岀劧鍚庝綘鍙互鍐欎笅闈㈢殑浠ｇ爜锛歠etch(route.query.pathasstring,{method:'GET',mode:'cors',//鍏佽鍙戦€佽法鍩熻姹傚嚟璇乤ls:'include',headers:{'Content-Type':'text/plain'}}).then(asyncfunction(response){//鎵撳嵃杩斿洖鐨刯son鏁版嵁response.text().then((data)=>{//鑾峰彇markdown鍐呭})}).catch(function(e){//鑾峰彇澶辫触鐨勫紓甯告崟鑾穧)effect瑙ｆ瀽鎴恏tml濡傚浘鑾峰彇markdown鍐呭鍚庯紝闇€瑕佽瑙ｆ瀽鎴愭甯哥殑html锛岄偅涔堣繖涓€姝ユ€庝箞鍋氬憿锛熷畨瑁呬竴涓В鏋恗arkdown璇硶鐨勫寘锛歯pminstallmarked-Smarked鐨勪粙缁嶅涓嬶細绠€鍗曟潵璇村氨鏄竴涓负浜嗛€熷害鐨勪綆绾х紪璇戝櫒锛岀敤浜庤В鏋愰潪缂撳瓨鎴栬€呴暱鏈熼樆濉炵殑鏍囪銆傝交閲忕骇锛屽悓鏃跺疄鐜颁簡鎵€鏈塎arkdown鍔熻兘鍦ㄦ祻瑙堝櫒銆佹湇鍔″櫒鎴栧懡浠よ鐣岄潰(CLI)涓粠鏀寔鐨勯鏍煎拰瑙勮寖涓伐浣滃綋鐒讹紝璇ヨ蒋浠跺寘杩樻彁渚涗簡鍦ㄧ嚎婕旂ず锛氭紨绀洪〉闈娇鐢ㄥ涓嬶細import{marked}from'marked'//鏍囪閫夐」marked.setOptions({pedantic:false,gfm:true,breaks:false,sanitize:false,smartLists:true,smartypants:false,xhtml:false,})consthtmlStr=marked('markdowncontent')杩欎竴姝ワ紝椤甸潰鐨刪tml灏卞嚭鏉ヤ簡锛屽彲浠ョ湅鍒板涓嬫晥鏋滐細缇庡寲浠ｇ爜缁忚繃涓婇潰涓ゆ锛屾覆鏌撲簡鍒濆鐨刪tml鍐呭锛屼絾鏄湁娌℃湁璇昏€呮効鎰忕湅杩欐牱鐨勬晥鏋滐紵鎺ヤ笅鏉ワ紝璁╂垜浠編鍖栦竴涓嬫垜浠殑浠ｇ爜銆備唬鐮佺編鍖栨湁鍑犵鏂瑰紡锛氬弬鑰冪幇鍦篶ss鎵嬪姩瀹炵幇css缇庡寲鏄痗ss鐨勪笉瓒仇煠楌煠楌煠楄繖閲屽厛瀹炵幇涓€涓猤ithubmarkdown鏍峰紡銆俫ithub鐨刴arkdowncss鏂囦欢宸茬粡鍙敤搴撳凡缁忓噯澶囧ソ浜嗭紝鎴戜滑鍙渶瑕佽窡鐫€瀹冿細npminstallgithub-markdown-css鏈変簡杩欎釜锛屾垜浠氨鍙互杞绘澗鎼炲畾浜嗭紝淇敼浠ｇ爜锛歩mport'github-markdown-css'鏄殑锛屽氨杩欎箞绠€鍗曪紝鍙渶瑕佸鍏ヨ繖涓寘灏辨槸浣犻渶瑕佺殑锛岃繕鍙互杈惧埌浠ヤ笅鏁堟灉锛氱暘澶栬浜嗚繖涔堝锛岃閫佷綘涓€娉㈢鍒煄夆湪鉁紝澶浜嗭紝浣犵煡閬撴€庝箞缇庡寲浠ｇ爜鏍煎紡鍚楋紵馃榿馃榿馃榿
