咕咕了很久啊，终于找到时间把这个小功能搓出来了

代码

初版，使用了js
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
document.addEventListener("pjax:complete", tonav);
document.addEventListener("DOMContentLoaded", tonav);

function tonav() {
  if (document.querySelector(".code-expand-btn")) {
    document
      .querySelector(".code-expand-btn")
      .addEventListener("click", function () {
        const table = this.nextElementSibling;
        // 展开状态
        const isExpanded = this.classList.contains("expand-done");
        // 展开高度
        const tabBodyHeight = table.querySelector("tbody").offsetHeight;
        // 默认高度
        const mrHeight = "300px";

        if (isExpanded) {
          table.style.maxHeight = mrHeight;

          setTimeout(() => {
            table.style.maxHeight = tabBodyHeight + "px";
          }, 1);
        } else {
          table.style.maxHeight = tabBodyHeight + "px";

          setTimeout(() => {
            table.style.maxHeight = mrHeight;
          }, 1);
        }
      });
  }
}

新建一个 js 文件，引入就行了

纯 css 实现版

最近忙里偷闲重新看了一下代码，经过 ds 的辅助，改了个能自适应高度的版本，终于不用写一堆 Js 辣

先进入 [themes]\butterfly\source\css\_highlight\highlight.styl 把默认样式注释掉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
&.expand-done
  & > i
    transform: rotate(180deg)

  & + table,
  & + pre
    margin-bottom: 1.8em


// &:not(.expand-done)
//   & ~ table,
//   & ~ pre
//     overflow: hidden
//     max-height: unit(hexo-config('highlight_height_limit'), px)

然后再自己的 css 文件中添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 代码块 */

.code-expand-btn ~ table {
  display: grid !important;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
  overflow: hidden !important;
}

.code-expand-btn ~ table > tbody {
  min-height: 300px;
}

.code-expand-btn.expand-done ~ table {
  grid-template-rows: 1fr;
}

/* 代码块 end */

执行三连就好了