最近写博客需要选择一款文本编辑器,选了几款觉得 TinyMCE 不错,插件比较齐全,界面也比较美观,不过在使用 Prism 的时候,却出现了问题。
Q: Prism 的插件 line-numbers 必须要在 pre 标签商添加 line-numbers 的,才能显示行号,这个时候如果使用其他方式调用 Prism 的API进行渲染,则就需要额外添加这个样式就很麻烦,有没有办法解决呢?
A:下载 line-numbers 源码,找到如下代码
Prism.hooks.add('complete', function (env) {
if (!env.code) {
return;
}
// works only for <code> wrapped inside <pre> (not inline)
var pre = env.element.parentNode;
var clsReg = /\s*\bline-numbers\b\s*/;
if (
!pre || !/pre/i.test(pre.nodeName) ||
// Abort only if nor the <pre> nor the <code> have the class
(!clsReg.test(pre.className) && !clsReg.test(env.element.className))
) {
return;
}
if (env.element.querySelector('.line-numbers-rows')) {
// Abort if line numbers already exists
return;
}
if (clsReg.test(env.element.className)) {
// Remove the class 'line-numbers' from the <code>
env.element.className = env.element.className.replace(clsReg, ' ');
}
if (!clsReg.test(pre.className)) {
// Add the class 'line-numbers' to the <pre>
pre.className += ' line-numbers';
}
var match = env.code.match(NEW_LINE_EXP);
var linesNum = match ? match.length + 1 : 1;
var lineNumbersWrapper;
var lines = new Array(linesNum + 1);
lines = lines.join('<span></span>');
lineNumbersWrapper = document.createElement('span'<