代码高亮插件Prism.js确实好使(WordPress使用ueditor集成代码语法高亮插件Prism.js)，不过当代码量多，看着就比较费劲了，想着在code-toolbar上加个全屏预览的功能，点一下就可以让代码铺满浏览器整个网页。按照原插件照猫画虎添加一个全屏功能code-fullscreen，首先把code-fullscreen注册进去：
!(function () {
function u(t, e) {
// 全屏/缩放
var fullscreen = false;
t.addEventListener("click", function (t) {
var c = t.currentTarget.parentNode.parentNode.parentNode;
var s = t.currentTarget.firstChild;
if (fullscreen) {
// 替换样式: code-fullscreen → code-toolbar
var classVal = c.getAttribute("class");
classVal = classVal.replace("code-fullscreen", "code-toolbar");
c.setAttribute("class", classVal);
s.firstChild.textContent = "全屏";
} else {
// 替换样式: code-toolbar → code-fullscreen
var classVal = c.getAttribute("class");
classVal = classVal.replace("code-toolbar", "code-fullscreen");
c.setAttribute("class", classVal);
s.firstChild.textContent = "缩放";
}
fullscreen = !fullscreen;
});
t.addEventListener("keydown", function (t) {
var c = t.currentTarget.parentNode.parentNode.parentNode;
var s = t.currentTarget.firstChild;
c.setAttribute("tabindex", 0);
c.onkeydown = function () {
switch (
t.keyCode // 获取当前按下键盘键的编码
) {
case 27: // 按下ESC键，退出代码全屏
var classVal = c.getAttribute("class");
classVal = classVal.replace("code-fullscreen", "code-toolbar");
c.setAttribute("class", classVal);
s.firstChild.textContent = "全屏";
break;
}
fullscreen = false;
};
});
}
"undefined" != typeof Prism &&
"undefined" != typeof document &&
(Prism.plugins.toolbar
? Prism.plugins.toolbar.registerButton("code-fullscreen", function (t) {
var e = t.element,
o = (function (t) {
var e = {
fullscreen: "全屏"
};
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-fullscreen-button"),
n.setAttribute("type", "button");
var c = document.createElement("span");
return n.appendChild(c), i("fullscreen"), u(n), n;
function i(t) {
(c.textContent = o[t]), n.setAttribute("data-fullscreen-state", t);
}
})
: console.warn(
"Code to Fullscreen plugin loaded before Toolbar plugin."
));
})();然后在prims.css中加下code-fullscreen的样式：
/*代码高亮全屏显示*/
.code-fullscreen {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition-duration: .25s;
z-index: 1000
}
.code-fullscreen pre {
position: absolute !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-top: 0 !important;
margin-bottom: 0 !important;
border: none
}
/*
.code-fullscreen-body {
overflow: hidden;
max-height: 100vh
}
*/
div.code-fullscreen > .toolbar {
position: absolute;
top: .3em;
right: .2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-fullscreen:hover > .toolbar {
opacity: 1;
}
/* Separate line b/c rules are thrown out if selector is invalid.
IE11 and old Edge versions don't support :focus-within. */
div.code-fullscreen:focus-within > .toolbar {
opacity: 1;
}
div.code-fullscreen > .toolbar > .toolbar-item {
display: inline-block;
}
div.code-fullscreen > .toolbar > .toolbar-item > a {
cursor: pointer;
}
div.code-fullscreen > .toolbar > .toolbar-item > button {
background: none;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none; /* for button */
-moz-user-select: none;
-ms-user-select: none;
}
div.code-fullscreen > .toolbar > .toolbar-item > a,
div.code-fullscreen > .toolbar > .toolbar-item > button,
div.code-fullscreen > .toolbar > .toolbar-item > span {
color: #bbb;
font-size: .8em;
padding: 0 .5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
border-radius: .5em;
}
div.code-fullscreen > .toolbar > .toolbar-item > a:hover,
div.code-fullscreen > .toolbar > .toolbar-item > a:focus,
div.code-fullscreen > .toolbar > .toolbar-item > button:hover,
div.code-fullscreen > .toolbar > .toolbar-item > button:focus,
div.code-fullscreen > .toolbar > .toolbar-item > span:hover,
div.code-fullscreen > .toolbar > .toolbar-item > span:focus {
color: inherit;
text-decoration: none;
}这样就ok啦，全屏看着舒服多了，按ESC键可以退出全屏(不过貌似还有点小问题)，觉得麻烦的话直接把prims.js和prims.css下载使用就行。
◎Github下载地址：https://github.com/anzhihe/Free-Web-Books/tree/master/source_code/prism
