MarkDownPad2为html文件增加目录

一、打开Html Head编辑器

依次打开   工具>选项>高级>html hrad编辑器

二、将下面的代码粘贴进去

<!--bookmark -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://yandex.st/highlightjs/6.2/highlight.min.js"></script>


<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
 $(document).ready(function(){

      $("h1,h2,h3,h4,h5,h6").each(function(i,item){
        var tag = $(item).get(0).localName;
        $(item).attr("id","wow"+i);
        $("#category").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');
        $(".newh1").css("margin-left",0);
        $(".newh2").css("margin-left",20);
        $(".newh3").css("margin-left",40);
        $(".newh4").css("margin-left",60);
        $(".newh5").css("margin-left",80);
        $(".newh6").css("margin-left",100);
      });

       $(".book-body").html($(".book-body").nextAll())
 });
</script>
<style type="text/css">

@media (max-width: 1600px) {
    .book-body {
       padding-left:200px;
    }
}

@media (max-width: 1400px) {
    .book-body {
       padding-left:200px;
    }
}

@media (max-width: 1200px) {
    .book-body {
       padding-left:300px;
    }
}
@media (max-width: 700px) {
    .book-body {
       padding-left:0px;
    }
}
@media (min-width: 600px) {
    #category{
        position: fixed;
        left: 20px;
        top:0;
        height: 100%;
        overflow-y: scroll;
    }
}

@media (-webkit-max-device-pixel-ratio: 1) {
    ::-webkit-scrollbar-track-piece {
        background-color:#FFF
    }

    ::-webkit-scrollbar {
        width: 6px;
        height: 6px
    }

    ::-webkit-scrollbar-thumb {
        background-color: #c2c2c2;
        background-clip: padding-box;
        min-height: 28px
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #A0A0A0
    }
}

</style>
<a href="javascript:scroll(0,0)" style="position:fixed;float:right;right:32px;top:70%;color:red">返回顶部</a> 
<div style="width:20%;" id="category" class="book-summary"></div>
<div class="book-body">
</div>

保存退出。

三、注意事项

实时预览看不到效果,必须输出为HTML页面以后才能看到效果。

四、感谢

这段代码是在网上粘贴的,但是浏览器关闭的太快,找不到原出处了。感谢原作者。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值