MarkdownPad2 自动生成目录原创
生成html时自动输出目录，完全离线，浏览时自动定位到当前目录并高亮显示： 点击查看代码 ```
/* 目录容器样式 */ .folt_div { max-height: 700px; min-width: 250px; overflow: auto; border-radius: 8px; z-index: 9999; position: fixed; right: 10px; top: 10px; padding: 10px; background: #ffffff; font-family: 'Arial', sans-serif; font-size: 14px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border: 1px solid #ccc; } /* 目录标题样式 */ .catalog-title { font-weight: bold; margin-bottom: 15px; font-size: 18px; text-align: center; color: #333; background-color: #f0f0f0; padding: 8px 0; border-radius: 6px; } /* 目录项样式 */ .catalog { cursor: pointer; margin-left: 0; padding: 3px 5px; border-radius: 4px; margin-bottom: 0px; transition: background-color 0.2s ease; } .catalog a { color: #333; text-decoration: none; font-weight: 600; } /* 鼠标悬停时 */ .catalog:hover { background-color: #e0e0e0; } .catalog a:hover { text-decoration: underline; } /* 高亮当前目录项 */ .catalog-active { background-color: #f0f0f0; color: white; font-weight: bold; border-radius: 4px; } /* 展开子目录时 */ .catalog-open > .catalog-children { display: block; } /* 子目录样式 */ .catalog-children { display: none; margin-left: 0px; } /* 目录项折叠图标 */ .toggle-icon { display: inline-block; width: 1.2em; cursor: pointer; font-weight: bold; margin-right: 0.0em; text-align: center; } /* 不同层级的目录颜色 */ .catalog-h1 a { color: #333333; } /* 深灰 */ .catalog-h2 a { color: #666666; } /* 中灰 */ .catalog-h3 a { color: #999999; } /* 浅灰 */ .catalog-h4 a { color: #b3b3b3; } /* 更浅的灰 */ .catalog-h5 a { color: #cccccc; } /* 很浅的灰 */ .catalog-h6 a { color: #e0e0e0; } /* 非常浅的灰 */ /* 滚动到特定位置时的目录高亮 */ .catalog a.active { color: #4CAF50; font-weight: bold; }
> 原文链接: https://www.cnblogs.com/3kyo/p/18814462
