master

分支 (1)

管理

管理

master

Markdown-To-html
/
template.html

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>{{title}}</title>
    <style>
        body{font-family:'微软雅黑 Light'}.markdown-body{font-size:15px;line-height:1.7;overflow:hidden;word-wrap:break-word}.markdown-body>*:first-child{margin-top:0!important}.markdown-body>*:last-child{margin-bottom:0!important}.markdown-body h1{font-size:2.5em;border-bottom:1px solid #ddd}.markdown-body h2{font-size:2em;border-bottom:1px solid #eee}.markdown-body h3{font-size:1.5em}.markdown-body h4{font-size:1.2em}.markdown-body h5{font-size:1em}.markdown-body h6{color:#777;font-size:1em}.markdown-body{font-size:15px;line-height:1.7;overflow:hidden;word-wrap:break-word}.markdown-body .highlight pre,.markdown-body pre{background-color:#f8f8f8;border:1px solid #ddd;font-size:15px;line-height:19px;overflow:auto;padding:6px 10px;border-radius:3px}.markdown-body p,.markdown-body blockquote,.markdown-body ul,.markdown-body ol,.markdown-body dl,.markdown-body table,.markdown-body pre{margin:15px 0}pre{counter-reset:line-numbering;border:solid 1px #d9d9d9;border-radius:0;background:#fff;padding:0;line-height:23px;margin-bottom:30px;white-space:pre;overflow-x:auto;word-break:inherit;word-wrap:inherit}pre code{font-family:'微软雅黑 Light'!important;line-height:1.7em}#readme{background-color:#fff;border:1px solid #cacaca;box-shadow:0 0 15px #797979f5;padding:30px}
    </style>
    <link href="https://cdn.bootcss.com/zTree.v3/3.5.40/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    <style>
        pre{counter-reset:line-numbering;border:solid 1px #d9d9d9;border-radius:0;background:#fff;padding:0;line-height:23px;margin-bottom:30px;white-space:pre;overflow-x:auto;word-break:inherit;word-wrap:inherit}pre a::before{content:counter(line-numbering);counter-increment:line-numbering;padding-right:1em;width:25px;text-align:right;opacity:.7;display:inline-block;color:#aaa;background:#eee;margin-right:16px;padding:2px 10px;font-size:13px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}pre a:first-of-type::before{padding-top:10px}pre a:last-of-type::before{padding-bottom:10px}pre a:only-of-type::before{padding:10px}.highlight{background-color:#ffc}
    </style>
</head>
<body>
<div>
    <div style='width:25%;'><ul id="tree" class="ztree" style='width:100%'></ul></div>
    <div id='readme' style='width:70%;margin-left:20%;'><article class='markdown-body'>{{{parse_markdown}}}</article></div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.4.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/zTree.v3/3.5.40/js/jquery.ztree.all.min.js"></script>
<script>
    /*! ztree_toc - v0.2.2 - 2014-02-08
* https://github.com/i5ting/jQuery.zTree_Toc.js
* Copyright (c) 2014 alfred.sang; Licensed MIT */
    function encode_id_with_array(opts,arr){var result=0;for(var z=0;z<arr.length;z++){result+=factor(opts,arr.length-z,arr[z])}return result}function get_parent_id_with_array(opts,arr){var result_arr=[];for(var z=0;z<arr.length;z++){result_arr.push(arr[z])}result_arr.pop();var result=0;for(var z=0;z<result_arr.length;z++){result+=factor(opts,result_arr.length-z,result_arr[z])}return result}function factor(opts,count,current){if(1==count){return current}var str="";for(var i=count-1;i>0;i--){str+=current*opts.step+"*"}return eval(str+"1")}(function($){function create_toc(opts){$(opts.documment_selector).find(":header").each(function(){var level=parseInt(this.nodeName.substring(1),10);_rename_header_content(opts,this,level);_add_header_node(opts,$(this))})}function render_with_ztree(opts){var t=$(opts._zTree);t=$.fn.zTree.init(t,opts.ztreeSetting,opts._header_nodes).expandAll(opts.is_expand_all);$(opts._zTree).css(opts.ztreeStyle)}function _rename_header_content(opts,header_obj,level){if(opts._headers.length==level){opts._headers[level-1]++}else{if(opts._headers.length>level){opts._headers=opts._headers.slice(0,level);opts._headers[level-1]++}else{if(opts._headers.length<level){for(var i=0;i<(level-opts._headers.length);i++){opts._headers.push(1)}}}}if(opts.is_auto_number==true){if($(header_obj).text().indexOf(opts._headers.join("."))!=-1){}else{$(header_obj).text(opts._headers.join(".")+". "+$(header_obj).text())}}}function _add_header_node(opts,header_obj){var id=encode_id_with_array(opts,opts._headers);var pid=get_parent_id_with_array(opts,opts._headers);$(header_obj).attr("id",id);log($(header_obj).text());opts._header_offsets.push($(header_obj).offset().top-opts.highlight_offset);log("h offset ="+($(header_obj).offset().top-opts.highlight_offset));opts._header_nodes.push({id:id,pId:pid,name:$(header_obj).text()||"null",open:true,url:"#"+id,target:"_self"})}function bind_scroll_event_and_update_postion(opts){var timeout;var highlight_on_scroll=function(e){if(timeout){clearTimeout(timeout)}timeout=setTimeout(function(){var top=$(window).scrollTop(),highlighted;if(opts.debug){console.log("top="+top)}for(var i=0,c=opts._header_offsets.length;i<c;i++){if(opts._header_offsets[i]>=(top+5)){console.log("opts._header_offsets["+i+"] = "+opts._header_offsets[i]);$("a").removeClass("curSelectedNode");var obj=$("#tree_"+(i+1)+"_a").addClass("curSelectedNode");break}}},opts.refresh_scroll_time)};if(opts.highlight_on_scroll){$(window).bind("scroll",highlight_on_scroll);highlight_on_scroll()}}function init_with_config(opts){opts.highlight_offset=$(opts.documment_selector).offset().top}function log(str){return;if($.fn.ztree_toc.defaults.debug==true){console.log(str)}}$.fn.ztree_toc=function(options){var opts=$.extend({},$.fn.ztree_toc.defaults,options);return this.each(function(){opts._zTree=$(this);init_with_config(opts);create_toc(opts);render_with_ztree(opts);bind_scroll_event_and_update_postion(opts)})};$.fn.ztree_toc.defaults={_zTree:null,_headers:[],_header_offsets:[],_header_nodes:[{id:1,pId:0,name:"Table of Content",open:true}],debug:true,highlight_offset:0,highlight_on_scroll:true,refresh_scroll_time:50,documment_selector:"body",is_posion_top:false,is_auto_number:false,is_expand_all:true,is_highlight_selected_line:true,step:100,ztreeStyle:{width:"260px",overflow:"auto",position:"fixed","z-index":2147483647,border:"0px none",left:"0px",bottom:"0px",},ztreeSetting:{view:{dblClickExpand:false,showLine:true,showIcon:false,selectedMulti:false},data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",}},callback:{beforeClick:function(treeId,treeNode){$("a").removeClass("curSelectedNode");if(treeNode.id==1){console.log("click root table of content")}if($.fn.ztree_toc.defaults.is_highlight_selected_line==true){$("#"+treeNode.id).css("color","red").fadeOut("slow",function(){$(this).show().css("color","black")})}},onRightClick:function(event,treeId,treeNode){if(treeNode.id==1){console.log("right_click root table of content")}}}}}})(jQuery);
</script>
<script>
    var jquery_ztree_toc_opts={debug:false,is_auto_number:true,documment_selector:".markdown-body",ztreeStyle:{width:"326px",overflow:"auto",position:"fixed","z-index":2147483647,border:"0px none",left:"0px",top:"0px","height":$(window).height()+"px"}};var markdown_panel_style={"width":"70%","margin-left":"25%"};
</script>
<script>
    $(document).ready(function(){var css_conf=eval(markdown_panel_style);$("#readme").css(css_conf);var conf=eval(jquery_ztree_toc_opts);$("#tree").ztree_toc(conf)});
</script>