给Typora导出的HTML添加侧边目录

1 用编辑器打开Typora导出的HTML文件
2 找到 </head>
3 在</head>前面添加以下代码即可

<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>
<style type="text/css">
		#category a{
    
			text-decoration: none; 
			color: black;
		}
		/* #category {line-height: 2em;} */
		.newh{
    
			padding-top: 0.5em;
			padding-bottom: 0.5em;
		}
		.newh:hover{
    
			background: #E6F0FE;
		}
    @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;
            /* 目录显示的位置 */
						float: left;
						margin-right: 2em;
            /* right: 0px; */
            top: 0;
            /* 目录栏的高度,这里设置为60%主要是为了不挡住返回顶部和折叠按钮 */
            height: 93%;
            /* 设置边框这样和正文对比比较明显 */
            border: 0 solid #eaeaea;
            /* 开启垂直滚动条 */
            overflow-y: scroll;