使用Markdown编辑HTML文件

[TOC]

语法教程

菜鸟驿站链接

也可以不学习,直接使用编辑器中的按键进行排版

工具

MarkdownPad下载安装

HTML文件头设置

由于MarkdownPad2导出HTML支持[TOC],在标题比较多时[TOC]效果比较好,所以用以下代码设置MarkdownPad导出的HTML文件头:

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function() {
    // 新增Contains选择器,:contains的变异版,增加忽略大小写功能
    $.expr[':'].Contains = function(a, i, m){
        return jQuery(a).text().toUpperCase().indexOf(m[3].
            toUpperCase()) >= 0;
    };

    // 创建class为toc的div元素
    let $toc = $('<div></div>');
    $toc.attr('class', 'toc');

    // 获取h1-h6元素
    let $headers = $('h1,h2,h3,h4,h5,h6');

    // 获取第一个hx元素,注意是dom对象,非jQuery对象
    let firstHeader = $headers[0];

    if (firstHeader) {
        // 获取第一个hx元素的层级
        let firstLevel = parseInt(firstHeader.tagName.
            replace('H', ''), 10);
        // 给a元素唯一的href属性值
        let id = `${firstHeader.textContent}-0`;

        for (let i = 1; i <= firstLevel; i++) {
            // 创建ul和li元素,并添加data-level属性
            let $ul = $('<ul></ul>'),
                $li = $('<li></li>');
            $li.attr('data-level', i);
            $ul.attr('data-level', i).append($li);

            // 获取data-level为i-1的li元素
            let $pLi = $toc.find(`li[data-level=${i - 1}]`);

            if ($pLi.length > 0) {
                // 找到data-level为i-1的元素,直接append到该li元素上即可
                $pLi.append($ul);
            } else {
                // 未找到data-level为i-1的元素,说明是顶层的ul,
                // 直接append到class为toc的div元素上
                $toc.append($ul);
            }
        }

        // 找到所属层级的li元素,并添加a元素
        $toc.find(`li[data-level=${firstLevel}]`).append(
            $(`<a href="#${id}">${firstHeader.textContent}</a>`));
        // 与a元素的href对应,用于文档内跳转
        $headers.eq(0).attr('id', id);
    }

    // 从第二个hx元素开始,循环$headers
    for (let i = 1; i < $headers.length; i++) {
        // 获取当前的hx元素的层级以及上一个hx元素的层级
        let curLevel = parseInt($headers[i].tagName.replace('H', ''),
            10),
            lastLevel = parseInt($headers[i - 1].tagName.
                replace('H', ''), 10);
        // 当前hx元素的文本元素
        let textContent = $headers[i].textContent,
            id = `${textContent}-i`;
        // 给a元素唯一的href属性值,与hx元素的id对应
        let $a = $(`<a href="#${id}">${textContent}</a>`);

        if (lastLevel < curLevel) {
            // 如果当前层级比上一个层级大,则从上一个层级+1到当前层级循环,
            // 循环添加ul和li元素
            for (let j = lastLevel + 1; j <= curLevel; j++) {
                // 创建ul和li元素,并添加data-level属性
                let $u = $('<ul></ul>'),
                    $l = $('<li></li>');
                $l.attr('data-level', j);
                $u.attr('data-level', j).append($l);

                // 找到data-level为j-1的最后一个li元素,并添加$u
                $toc.find(`li[data-level=${j - 1}]:last`).append($u);
            }
            // 找到data-level为curLevel的最后一个li,并添加$a
            $toc.find(`li[data-level=${curLevel}]:last`).append($a);
        } else if (lastLevel === curLevel) {
            // 如果当前层级和上一个层级相等,则找到相同层级的li元素的父元素,
            // 创建li元素并添加上去
            // 已经存在data-level为curLevel的ul,只需要创建li即可
            let $l = $('<li></li>');

            // 给li元素添加data-level树形,并添加$a
            // 找到data-level为curLevel的最后一个li元素的父元素,添加$l
            $toc.find(`li[data-level=${curLevel}]:last`).parent().
                append($l.attr('data-level', curLevel).append($a));
        } else {
            // 如果当前层级小于上一个层级,则找到最后一个相同层级的li元素的
            // 父元素,添加$l
            // 找到data-level为curLevel的最后一个li元素,必然存在
            let $sublingLi = $toc.
                find(`li[data-level=${curLevel}]:last`);
            let $l = $('<li></li>');

            // 找到$sublingLi的父元素,添加li元素即可
            $sublingLi.parent().append($l.attr('data-level', curLevel).
                append($a));
        }

        $headers.eq(i).attr('id', id);
    }


    // 清除p元素的文本内容,并将$toc元素append到p元素
    $('p:Contains([TOC]):first').text('').append($toc);
});
</script>

PS.保存位置:工具-->选项-->高级-->HTML Head编辑器

上述取自简书