markdown 一些方便好用的东西

By | 2015-11-06

自动添加目录

方法来自这里

只需在 markdown 文件头部添加以下代码:

<hr />
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("h1,h2,h3,h4,h5,h6").each(function(i,item){
      var tag = $(item).get(0).localName;
      $("#md_toc").append('<a class="new'+tag+'" href="#'+$(item).attr("id")+'">'+$(this).text()+'</a></br>');
      $(".newh1").css("margin-left",20);
      $(".newh2").css("margin-left",40);
      $(".newh3").css("margin-left",60);
      $(".newh4").css("margin-left",80);
      $(".newh5").css("margin-left",100);
      $(".newh6").css("margin-left",120);
    });
  });
</script>
<div id="md_toc"></div>
<hr />

自动高亮代码

方法来自这里

只需在 markdown 文件头部添加以下代码:

<link href="http://cdn.bootcss.com/highlight.js/9.11.0/styles/monokai.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/9.11.0/highlight.min.js"></script><script >hljs.initHighlightingOnLoad();</script>

模板

整理好的模板, 适合写文档用

<head><meta charset="UTF-8"></head>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">$(document).ready(function(){$("h1,h2,h3,h4,h5,h6").each(function(i,item){
    $(item).attr("id","md_"+i);
    $("#md_toc").append('<a class="new'+$(item).get(0).localName+'" href="#md_'+i+'">'+$(this).text()+'</a></br>');
    $(".newh1").css("margin-left",20);$(".newh2").css("margin-left",40);$(".newh3").css("margin-left",60);
    $(".newh4").css("margin-left",80);$(".newh5").css("margin-left",100);$(".newh6").css("margin-left",120);
});});</script>
<link href="http://cdn.bootcss.com/highlight.js/9.11.0/styles/monokai.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/9.11.0/highlight.min.js"></script><script >hljs.initHighlightingOnLoad();</script>
<style type="text/css">#md_container {width:100%;height:100%;float:left;}
#md_sidebar {width:25%;height:100%;float:left;overflow:auto;border:1px solid black;margin:-1px;}
#md_content {width:75%;height:100%;float:left;overflow:auto;}</style>
<div id="md_container">
<div id="md_sidebar"><nobr><div id="md_toc" style="padding:5px;"></div></nobr></div>
<div id="md_content"><div style="padding:10px;">

转载请注明来自: http://zsaber.com/blog/p/71

既然都来了, 有啥想法顺便留个言呗? (无奈小广告太多, 需审核, 见谅)

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注