diff --git a/plugins/unescaped-markup/index.html b/plugins/unescaped-markup/index.html new file mode 100644 index 0000000000..d3da35a9fc --- /dev/null +++ b/plugins/unescaped-markup/index.html @@ -0,0 +1,121 @@ + + + + + + + Keep markup ▲ Prism plugins + + + + + + + + + + + + +
+
+ +

Unescaped markup

+

Write markup without having to escape anything.

+
+ +
+

How to use

+

Instead of using <pre><code> elements, use <script type="text/plain">:

+
+ +
+

Examples

+ +

View source to see that the following didn’t need escaping (except for </script>, that does):

+ + +
+ +
+

FAQ

+ +

Why not use the HTML <template> tag?

+ +

Because it is a PITA to get its textContent and needs to be pointlessly cloned. + Feel free to implement it yourself and send a pull request though, if you are so inclined.

+ +

Can I use this inline?

+ +

Not out of the box, because I figured it’s more of a hassle to type <script type="text/plain"> than escape the 1-2 < characters you need to escape in inline code. + Also inline code is not as frequently copy-pasted, which was the major source of annoyance that got me to write this plugin.

+
+ + + + + + + + + + + diff --git a/plugins/unescaped-markup/prism-unescaped-markup.css b/plugins/unescaped-markup/prism-unescaped-markup.css new file mode 100644 index 0000000000..5cd92bf0be --- /dev/null +++ b/plugins/unescaped-markup/prism-unescaped-markup.css @@ -0,0 +1,10 @@ +/* Fallback, in case JS does not run, to ensure the code is at least visible */ +.lang-markup script[type='text/plain'], +.language-markup script[type='text/plain'], +script[type='text/plain'].lang-markup, +script[type='text/plain'].language-markup { + display: block; + font: 100% Consolas, Monaco, monoscpace; + white-space: pre; + overflow: auto; +} diff --git a/plugins/unescaped-markup/prism-unescaped-markup.js b/plugins/unescaped-markup/prism-unescaped-markup.js new file mode 100644 index 0000000000..1a13b8e89b --- /dev/null +++ b/plugins/unescaped-markup/prism-unescaped-markup.js @@ -0,0 +1,32 @@ +(function () { + + if (typeof self === 'undefined' || !self.Prism || !self.document || !Prism.languages.markup) { + return; + } + + Prism.plugins.UnescapedMarkup = true; + + Prism.hooks.add('before-highlightall', function (env) { console.log(env); + env.selector += ", .lang-markup script[type='text/plain'], .language-markup script[type='text/plain']" + + ", script[type='text/plain'].lang-markup, script[type='text/plain'].language-markup"; + }); + + Prism.hooks.add('before-highlight', function (env) { + if (env.language != "markup") { + return; + } + + if (env.element.matches("script[type='text/plain']")) { + var code = document.createElement("code"); + var pre = document.createElement("pre"); + + pre.className = code.className = env.element.className; + code.textContent = env.code; + + pre.appendChild(code); + env.element.parentNode.replaceChild(pre, env.element); + env.element = code; + return; + } + }); +}()); diff --git a/plugins/unescaped-markup/prism-unescaped-markup.min.js b/plugins/unescaped-markup/prism-unescaped-markup.min.js new file mode 100644 index 0000000000..faf9f9bc37 --- /dev/null +++ b/plugins/unescaped-markup/prism-unescaped-markup.min.js @@ -0,0 +1 @@ +!function(){"undefined"!=typeof self&&self.Prism&&self.document&&Prism.languages.markup&&(Prism.plugins.UnescapedMarkup=!0,Prism.hooks.add("before-highlightall",function(e){console.log(e),e.selector+=", .lang-markup script[type='text/plain'], .language-markup script[type='text/plain'], script[type='text/plain'].lang-markup, script[type='text/plain'].language-markup"}),Prism.hooks.add("before-highlight",function(e){if("markup"==e.language&&e.element.matches("script[type='text/plain']")){var t=document.createElement("code"),a=document.createElement("pre");return a.className=t.className=e.element.className,t.textContent=e.code,a.appendChild(t),e.element.parentNode.replaceChild(a,e.element),e.element=t,void 0}}))}(); \ No newline at end of file