上次给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."));
})();
JavaScript
◎Github下载地址:https://github.com/anzhihe/Free-Web-Books/tree/master/source_code/prism
我直接替换了你的prism.js文件,样式也加进去了。但是没有生效呀
@风君子 应该不会吧,你用console.log打下输出结果看看