10.93330046.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{378:function(n,t){n.exports='\x3c!--\ntitle: HTML代码运行\nsort: 6\n--\x3e\n\n在 `Markdown` 文档中支持 `HTML` 代码运行，请谨慎使用，如果你对前端代码有所了解，这一功能，将对你的文档生有很大的想象，比如添加网站统计功能，自定义一个页面等等。\n\n## HTML & CSS\n\n下面是 `HTML` 代码实例运行效果\n\n<style>\n.back {\n  background-color: #00C343;\n  color: #fff;\n  padding: 20px;\n}\n</style>\n<div class="back" style="width:200px;">这里是Markdown内部HTML代码运行实例</div>\n\n可将下面代码复制到 Markdown 中运行查看效果：\n\n```html\n<style>\n.back {\n  background-color: #e2e2e2;\n  padding: 20px;\n}\n</style>\n<div class="back" style="width:200px;">这里是Markdown内部HTML代码运行实例</div>\n```\n\n## JavaScript\n\n> ⚠️ 目前 `Markdown` 中不支持 `JS` 代码运行。  \n\n<div class="back2" style="width:200px;margin-top:20px;">这里是Markdown<span id="test"></span>内部 JS 代码运行实例</div>\n<style>\n.back2 {\n  background-color: #b9b9b9;\n  color: #fff;\n  padding: 20px;\n}\n</style>\n\n<script type="text/javascript">\nalert(\'sd\')\nconsole.log(\'==>\',document.getElementById(\'test\'))\nwindow.onload = function(){\n  document.getElementById(\'test\').innerHTML = "sdfsdf";\n}\n<\/script>\n\n\n## HTML Demo 预览\n\n需要在代码块前后加上一段 `\x3c!--DemoStart--\x3e ` 和 `\x3c!--End--\x3e` 注释即可，代码如下：\n\n```\n\x3c!--DemoStart--\x3e \n\\```html\n<div style="color:red;">\n  Test Preview HTML Example.\n</div>\n<script>\nconsole.log(\'test\')\n<\/script>\n\\```\n\x3c!--End--\x3e\n```\n\n下面是效果\n\n\x3c!--DemoStart--\x3e \n```html\n<div style="color:red;">\n  Test Preview HTML Example.\n</div>\n<script>\nconsole.log(\'test\')\n<\/script>\n```\n\x3c!--End--\x3e\n\n目前只预览 `HTML`, 下面为 `LESS` 展示\n\n\x3c!--DemoStart--\x3e \n```less\n.wapper {\n  &::after {\n    content: \'\';\n    display: block;\n    clear: both;\n  }\n}\n\n.wapperContent {\n  padding: 15px 0 0 0;\n  max-width: 1200px;\n  margin: 0px auto 0;\n}\n```\n\x3c!--End--\x3e\n'}}]);