Keep Markup: Added `drop-tokens` option class (#3166)
This commit is contained in:
Michael Schmidt
GitHub
parent
22d0c6bab3
commit
b679cfe6fe
|
|
@ -27,7 +27,7 @@
|
|||
<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
|
||||
<script src="https://www.google-analytics.com/ga.js" async></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="language-none">
|
||||
|
||||
<header data-plugin-header="keep-markup"></header>
|
||||
|
||||
|
|
@ -39,6 +39,12 @@
|
|||
|
||||
<p>However, you can deactivate the plugin for certain code element by adding the <code>no-keep-markup</code> class to it. You can also deactivate the plugin for the whole page by adding the <code>no-keep-markup</code> class to the body of the page and then selectively activate it again by adding the <code>keep-markup</code> class to code elements.</p>
|
||||
|
||||
<h2>Double highlighting</h2>
|
||||
|
||||
<p>Some plugins (e.g. <a href="plugins/autoloader">Autoloader</a>) need to re-highlight code blocks. This is a problem for Keep Markup because it will keep the markup of the first highlighting pass resulting in a lot of unnecessary DOM nodes and causing problems for themes and other plugins.</p>
|
||||
|
||||
<p>This problem can be fixed by adding a <code>drop-tokens</code> class to a code block or any of its ancestors. If <code>drop-tokens</code> is present, Keep Markup will ignore all <code class="language-css">span.token</code> elements created by Prism.</p>
|
||||
|
||||
<h1>Examples</h1>
|
||||
|
||||
<p>The following source code</p>
|
||||
|
|
|
|||
|
|
@ -15,31 +15,53 @@
|
|||
return;
|
||||
}
|
||||
|
||||
var dropTokens = Prism.util.isActive(env.element, 'drop-tokens', false);
|
||||
/**
|
||||
* Returns whether the given element should be kept.
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function shouldKeep(element) {
|
||||
if (dropTokens && element.nodeName.toLowerCase() === 'span' && element.classList.contains('token')) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
var pos = 0;
|
||||
var data = [];
|
||||
var f = function (elt, baseNode) {
|
||||
var o = {};
|
||||
if (!baseNode) {
|
||||
// Clone the original tag to keep all attributes
|
||||
o.clone = elt.cloneNode(false);
|
||||
o.posOpen = pos;
|
||||
data.push(o);
|
||||
function processElement(element) {
|
||||
if (!shouldKeep(element)) {
|
||||
// don't keep this element and just process its children
|
||||
processChildren(element);
|
||||
return;
|
||||
}
|
||||
for (var i = 0, l = elt.childNodes.length; i < l; i++) {
|
||||
var child = elt.childNodes[i];
|
||||
|
||||
var o = {
|
||||
// Clone the original tag to keep all attributes
|
||||
clone: element.cloneNode(false),
|
||||
posOpen: pos
|
||||
};
|
||||
data.push(o);
|
||||
|
||||
processChildren(element);
|
||||
|
||||
o.posClose = pos;
|
||||
}
|
||||
function processChildren(element) {
|
||||
for (var i = 0, l = element.childNodes.length; i < l; i++) {
|
||||
var child = element.childNodes[i];
|
||||
if (child.nodeType === 1) { // element
|
||||
f(child);
|
||||
processElement(child);
|
||||
} else if (child.nodeType === 3) { // text
|
||||
pos += child.data.length;
|
||||
}
|
||||
}
|
||||
if (!baseNode) {
|
||||
o.posClose = pos;
|
||||
}
|
||||
};
|
||||
f(env.element, true);
|
||||
}
|
||||
processChildren(env.element);
|
||||
|
||||
if (data && data.length) {
|
||||
if (data.length) {
|
||||
// data is an array of all existing tags
|
||||
env.keepMarkup = data;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
"undefined"!=typeof Prism&&"undefined"!=typeof document&&document.createRange&&(Prism.plugins.KeepMarkup=!0,Prism.hooks.add("before-highlight",function(e){if(e.element.children.length&&Prism.util.isActive(e.element,"keep-markup",!0)){var a=0,s=[],p=function(e,n){var o={};n||(o.clone=e.cloneNode(!1),o.posOpen=a,s.push(o));for(var t=0,d=e.childNodes.length;t<d;t++){var r=e.childNodes[t];1===r.nodeType?p(r):3===r.nodeType&&(a+=r.data.length)}n||(o.posClose=a)};p(e.element,!0),s&&s.length&&(e.keepMarkup=s)}}),Prism.hooks.add("after-highlight",function(n){if(n.keepMarkup&&n.keepMarkup.length){var a=function(e,n){for(var o=0,t=e.childNodes.length;o<t;o++){var d=e.childNodes[o];if(1===d.nodeType){if(!a(d,n))return!1}else 3===d.nodeType&&(!n.nodeStart&&n.pos+d.data.length>n.node.posOpen&&(n.nodeStart=d,n.nodeStartPos=n.node.posOpen-n.pos),n.nodeStart&&n.pos+d.data.length>=n.node.posClose&&(n.nodeEnd=d,n.nodeEndPos=n.node.posClose-n.pos),n.pos+=d.data.length);if(n.nodeStart&&n.nodeEnd){var r=document.createRange();return r.setStart(n.nodeStart,n.nodeStartPos),r.setEnd(n.nodeEnd,n.nodeEndPos),n.node.clone.appendChild(r.extractContents()),r.insertNode(n.node.clone),r.detach(),!1}}return!0};n.keepMarkup.forEach(function(e){a(n.element,{node:e,pos:0})}),n.highlightedCode=n.element.innerHTML}}));
|
||||
"undefined"!=typeof Prism&&"undefined"!=typeof document&&document.createRange&&(Prism.plugins.KeepMarkup=!0,Prism.hooks.add("before-highlight",function(e){if(e.element.children.length&&Prism.util.isActive(e.element,"keep-markup",!0)){var o=Prism.util.isActive(e.element,"drop-tokens",!1),d=0,t=[];s(e.element),t.length&&(e.keepMarkup=t)}function r(e){if(function(e){return!o||"span"!==e.nodeName.toLowerCase()||!e.classList.contains("token")}(e)){var n={clone:e.cloneNode(!1),posOpen:d};t.push(n),s(e),n.posClose=d}else s(e)}function s(e){for(var n=0,o=e.childNodes.length;n<o;n++){var t=e.childNodes[n];1===t.nodeType?r(t):3===t.nodeType&&(d+=t.data.length)}}}),Prism.hooks.add("after-highlight",function(n){if(n.keepMarkup&&n.keepMarkup.length){var s=function(e,n){for(var o=0,t=e.childNodes.length;o<t;o++){var d=e.childNodes[o];if(1===d.nodeType){if(!s(d,n))return!1}else 3===d.nodeType&&(!n.nodeStart&&n.pos+d.data.length>n.node.posOpen&&(n.nodeStart=d,n.nodeStartPos=n.node.posOpen-n.pos),n.nodeStart&&n.pos+d.data.length>=n.node.posClose&&(n.nodeEnd=d,n.nodeEndPos=n.node.posClose-n.pos),n.pos+=d.data.length);if(n.nodeStart&&n.nodeEnd){var r=document.createRange();return r.setStart(n.nodeStart,n.nodeStartPos),r.setEnd(n.nodeEnd,n.nodeEndPos),n.node.clone.appendChild(r.extractContents()),r.insertNode(n.node.clone),r.detach(),!1}}return!0};n.keepMarkup.forEach(function(e){s(n.element,{node:e,pos:0})}),n.highlightedCode=n.element.innerHTML}}));
|
||||
|
|
@ -4,6 +4,7 @@ const { createScopedPrismDom } = require('../../helper/prism-dom-util');
|
|||
|
||||
describe('Keep Markup', function () {
|
||||
const { Prism, document } = createScopedPrismDom(this, {
|
||||
languages: 'javascript',
|
||||
plugins: 'keep-markup'
|
||||
});
|
||||
|
||||
|
|
@ -42,6 +43,25 @@ describe('Keep Markup', function () {
|
|||
keepMarkup(`xy<a>a</a>`);
|
||||
});
|
||||
|
||||
it('should support double highlighting', function () {
|
||||
const pre = document.createElement('pre');
|
||||
pre.className = 'language-javascript drop-tokens';
|
||||
pre.innerHTML = '<code>var <mark>a = 42</mark>;</code>';
|
||||
const code = pre.childNodes[0];
|
||||
const initial = code.innerHTML;
|
||||
|
||||
Prism.highlightElement(code);
|
||||
const firstPass = code.innerHTML;
|
||||
|
||||
Prism.highlightElement(code);
|
||||
const secondPass = code.innerHTML;
|
||||
|
||||
// check that we actually did some highlighting
|
||||
assert.notStrictEqual(initial, firstPass);
|
||||
// check that the highlighting persists
|
||||
assert.strictEqual(firstPass, secondPass);
|
||||
});
|
||||
|
||||
// The markup is removed if it's the last element and the element's name is a single letter: a(nchor), b(old), i(talic)...
|
||||
// https://github.com/PrismJS/prism/issues/1618
|
||||
/*
|
||||
|
|
|
|||
Loading…
Reference in New Issue