Markdown 渲染测试

发表于 阅读次数： Waline： 本文字数： 399 阅读时长 ≈ 1 分钟

Obsidian Flavored Markdown（OFM）

Callouts

note default

foo

note open

foo

note closed

foo

Codeblock

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
var CODE_MAX_HEIGHT = 200;
var containers = [];

// 展开
$('body').on('click', '.js_unfold_code_btn', function () {
    $(this).closest('.js_highlight_container').addClass('on');
});
// 收起
$('body').on('click', '.js_retract_code_btn', function () {
    var $container = $(this).closest('.js_highlight_container').removeClass('on');
    var winTop = $(window).scrollTop();
    var offsetTop = $container.offset().top;
    $(this).css('top', 0);
    if (winTop > offsetTop) {
        // 设置滚动条位置
        $('body, html').animate({
            scrollTop: $container.offset().top - CODE_MAX_HEIGHT
        }, 600);
    }
});
// 滚动事件，触发动画效果
$(window).on('scroll', function () {
    var scrollTop = $(window).scrollTop();
    var temp = [];
    for (let i = 0; i < containers.length; i++) {
        var item = containers[i];
        var { $container, height, $hide, hasHorizontalScrollbar } = item;
        if ($container.closest('body').length === 0) {
            // 如果 $container 元素已经不在页面上, 则删除该元素
            // 防止pjax页面跳转之后，元素未删除
            continue;
        }
        temp.push(item);
        if (!$container.hasClass('on')) {
            continue;
        }
        var offsetTop = $container.offset().top;
        var hideBtnHeight = $hide.outerHeight();
        // 减去按钮高度，减去底部滚动条高度
        var maxTop = parseInt(height - (hasHorizontalScrollbar ? 17 : 0) - hideBtnHeight);
        let top = parseInt(
            Math.min(
                Math.max(scrollTop - offsetTop, 0), // 如果小于 0 ，则取 0
                maxTop,// 如果大于 height ，则取 height
            )
        );
        // 根据 sin 曲线设置"收起代码"位置
        var halfHeight = parseInt($(window).height() / 2 * Math.sin((top / maxTop) * 90 * (2 * Math.PI / 360)));
        $hide.css('top', Math.min(top + halfHeight, maxTop));
    }
    containers = temp;
});

// 添加隐藏容器
function addCodeWrap($node) {
    var $container = $node.wrap('<div class="js_highlight_container highlight-container"><div class="highlight-wrap"></div></div>').closest('.js_highlight_container');

    // 底部 "展开代码" 与 侧边栏 "收起代码"
    var $btn = $(`
    <div class="highlight-footer">
      <a class="js_unfold_code_btn show-btn" href="javascript:;">展开代码<i class="fa fa-angle-down" aria-hidden="true"></i></a>
    </div>
    <a class="js_retract_code_btn hide-btn" href="javascript:;"><i class="fa fa-angle-up" aria-hidden="true"></i>收起代码</a>
  `);

    $container.append($btn);
    return $container;
};

function codeUnfold() {
    $('.highlight').each(function () {
        // 防止重复渲染
        if (this.__render__ === true) {
            return true;
        }
        this.__render__ = true;
        var $this = $(this);
        var height = $(this).outerHeight();
        if (height > CODE_MAX_HEIGHT) {
            // 添加展开&收起容器
            var $container = addCodeWrap($this, height);
            containers.push({
                $container,
                height,
                $hide: $container.find('.js_retract_code_btn'),
                hasHorizontalScrollbar: this.scrollWidth > this.offsetWidth,
            });
        }
    });
};