markdown文件的在线预览实现方式(js)
示例代码(js解析版):
<link href="css/markdown-dark.css" rel="stylesheet" type="text/css" /> <link href="css/markdown-light.css" rel="stylesheet" type="text/css" /> <link href="css/markdown.css" rel="stylesheet" type="text/css" /> <style> .markdown-body { box-sizing: border-box; min-width: 200px; max-width: 980px; margin: 0 auto; padding: 45px; } </style> <div id="show_document" style="margin: 0 auto;"> <div class="js_md_content_default" style="display: none;">{md文件的原始内容}</div> <div class="markdown-body js_md_content"></div> <script src="js/marked.min.js"></script> <script> var viewid = viewids; var content = $(#show_document_+viewid).find(.js_md_content_default).text(); $(#show_document_+viewid).find(.js_md_content).html(marked(content)); </script> </div>
代码中引入:
markdown.css;markdown-dark.css;markdown-light.css 【md内容解析后css样式】
marked.min.js 【md内容解析js脚本文件】
资源下载地址:
上一篇:
通过多线程提高代码的执行效率例子