上次给Prism.js添加了全屏预览功能(代码高亮插件Prism.js添加全屏预览功能)，这次再加一个代码块收起展开的功能。

!(function () {
  function u(t, e) {
    // 收起/展开
    var collapsed = false;
    t.addEventListener("click", function (t) {
      var c = t.currentTarget.parentNode.parentNode.previousSibling.firstChild;
      var s = t.currentTarget.firstChild;
      if (collapsed) {
        console.log("展开");
        console.log(c);
        console.log(c.getAttribute("class"));
        c.setAttribute("style", "display:block");
        s.firstChild.textContent = "收起";
      } else {
        console.log("收起");
        console.log(c);
        console.log(c.getAttribute("class"));
        c.setAttribute("style", "display:none");
        s.setAttribute("data-collapsed-state", "collapsed");
        s.firstChild.textContent = "展开";
      }
      collapsed = !collapsed;
    });
  }
  "undefined" != typeof Prism &&
    "undefined" != typeof document &&
    (Prism.plugins.toolbar
      ? Prism.plugins.toolbar.registerButton("code-collapsed", function (t) {
          var e = t.element,
            o = (function (t) {
              var e = {
                collapsed: "收起"
              };
              for (var o in e) {
                for (
                  var n = "data-prismjs-" + o, c = t;
                  c && !c.hasAttribute(n);
                )
                  c = c.parentElement;
                c && (e[o] = c.getAttribute(n));
              }
              return e;
            })(e),
            n = document.createElement("button");
          (n.className = "code-collapsed-button"),
            n.setAttribute("type", "button");
          var c = document.createElement("span");
          return n.appendChild(c), i("collapsed"), u(n), n;
          function i(t) {
            (c.textContent = o[t]), n.setAttribute("data-collapsed-state", t);
          }
        })
      : console.warn("Code to collapsed plugin loaded before Toolbar plugin."));
})();

◎Github下载地址：https://github.com/anzhihe/Free-Web-Books/tree/master/source_code/prism

参考：剪贴板操作 Clipboard API 教程

安志合个人博客，版权所有 丨 如未注明，均为原创 丨 转载请注明转自：https://chegva.com/5199.html | ☆★★每天进步一点点,加油!★★☆ |