MarkdownPad2 匯出帶側邊欄目錄的html

<!--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%">返回頂部</a> 
<div style="width:20%;" id="category" class="book-summary"></div>
<div class="book-body">
</div>
 

上面的程式碼雖然實現了側欄，不過側欄支援摺疊。而且父子標題之間用縮排表示，看起來不是很明顯，我在上面的基礎上添加了編號，和目錄摺疊的功能，程式碼如下。

更新 2018-11-29

更新日誌

• 加入目錄摺疊功能
• 修改目錄到右側
• 修改目錄欄目高度
• 目錄新增水平滾動條
• 修改部分樣式程式碼

最終程式碼

<!-- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"
 
></script>
<script src="http://yandex.st/highlightjs/6.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!--側欄目錄生成程式碼-->
<script>
    //標題序號計數器
    var hCount = [0, 0, 0, 0, 0, 0];
    //設定計數器
    function setHCount(number) {
        //當前計數器加一
        hCount[
 
number - 1]++;
        for (var i = number, length = hCount.length; i < length; i++) {
            //子目錄計數器全部置零
            hCount[i] = 0;
        }
    }
    //重新命名目錄名稱
    function setHTagValue(item, number) {
        //獲取標題名
        var text = $(item).get(0).innerHTML;
        //初始化空字串
        var before = "";
        //生成序號
        for (var i = 0, length = hCount.length; i < number; i++) {
            if (i < number - 1)
                before += hCount[i] + ".";
            else
                before += hCount[i] + " ";
        }
        //在標題前面加上序號
        $(item).get(0).innerHTML = before + text;
    }
    function renameHTag(item) {
        var tag = $(item).get(0).localName;
        if (tag === "h1") {
            setHCount(1);
           //console\.log("捕獲到標籤:%s", tag);
            setHTagValue(item, 1);
        }
        if (tag === "h2") {
            setHCount(2);
            //console.log("捕獲到標籤:%s", tag);
            setHTagValue(item, 2);
        }
        if (tag === "h3") {
            setHCount(3);
            //console.log("捕獲到標籤:%s", tag);
            setHTagValue(item, 3);
        }
        if (tag === "h4") {
            setHCount(4);
            //console.log("捕獲到標籤:%s", tag);
            setHTagValue(item, 4);
        }
        if (tag === "h5") {
            setHCount(5);
            //console.log("捕獲到標籤:%s", tag);
            setHTagValue(item, 5);
        }
        if (tag === "h6") {
            setHCount(6);
            //console.log("捕獲到標籤:%s", tag);
            setHTagValue(item, 6)
        }
    }
    $(document).ready(function () {
        $("h1,h2,h3,h4,h5,h6").each(function (i, item) {
            //給<H>類標籤編號
            renameHTag(item);
            //獲取標籤的名字,h1,還是h2
            var tag = $(item).get(0).localName;
            //為該標籤設定id屬性
            $(item).attr("id", "wow" + i);
            //新增一個頁內超連結,並設定class選擇器
            //      $("#category").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');
            $("#category").append('<a class="new' + tag + '" href="#wow' + i + '">' + $(item).text() + '</a></br>');
            //為每一個標題超連結的class屬性設定左邊距
            $(".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);
        });
        //設定class選擇器為.book-body的html內容
        $(".book-body").html($(".book-body").nextAll())
    });
</script>
<style type="text/css">
    @media (max-width: 1600px) {
        .book-body {
            /* padding-left: 200px; */
            padding-right: 0px;
        }
    }
    @media (max-width: 1400px) {
        .book-body {
            /* padding-left: 200px; */
            padding-right: 0px;
        }
    }
    @media (max-width: 1200px) {
        .book-body {
            /* padding-left: 300px; */
            padding-left: 0px;
        }
    }
    @media (max-width: 700px) {
        .book-body {
            padding-left: 0px;
        }
    }
    @media (min-width: 600px) {
        #category {
            /* 絕對定位 */
            position: fixed;
            /* left: 20px; */
            /* 目錄顯示的位置 */
            right: 0px;
            top: 0;
            /* 目錄欄的高度,這裡設定為60%主要是為了不擋住返回頂部和摺疊按鈕 */
            height: 79%;
            /* 開啟垂直滾動條 */
            overflow-y: scroll;
            /* 開啟水平滾動條 */
            overflow-x: 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>
<script>
    // id="category" onclick="showOrCloseCategory()"
    function showOrCloseCategory() {
        var id = document.getElementById("category");
        var book_body=document.getElementById("book_body");
        //如果展開了
        if (id.style.display == 'block') {
            //console.log("開始展開");
            id.style.display='none';
            id.style.width="0%";
            book_body.style.width="100%";
            book_body.style.paddingleft=0;
        }
        //如果被摺疊了
        else if (id.style.display =='none') {
            //console.log("開始摺疊");
            id.style.display = 'block';
            book_body.style.width="90%";
            id.style.width="20%"
        }
    }
</script>
<!--返回頂部-->
<a href="javascript:scroll(0,0)" style="position:fixed;float:right;right:40px;top:80%">返回頂部</a>
<button onclick="showOrCloseCategory()" style="position:fixed;float:right;right:40px;top:85%">摺疊/展開</button>
<!--文章主體部分-->
<div class="book-body" id="book_body" style="width:90%;display:block"> </div>
<!--目錄欄，設定佔用寬度為20%可以根據實際情況設定-->
<div  class="book-summary" id="category" style="width:20%;display:block" ></div>

把上面程式碼新增到MarkdownPad2,HTML Head編輯器中即可。效果如下圖所示:

MarkdownPad2中的設定

複製上面的程式碼，然後開啟MarkDownPad2，
在MarkdownPad2中點選工具-->選項-->高階-->HTML Head編輯器，然後貼上上面程式碼，然後儲存並關閉即可。

匯出HTML

然後來匯出HTML，這樣才能看見側目錄。
選擇檔案-->匯出-->匯出 HTML,然後儲存到本地即可。

然後就可看到效果了