-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added unescaped markup plugin (hidden)
- Loading branch information
Showing
4 changed files
with
164 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
|
|
||
| <meta charset="utf-8" /> | ||
| <link rel="shortcut icon" href="favicon.png" /> | ||
| <title>Keep markup ▲ Prism plugins</title> | ||
| <base href="../.." /> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <link rel="stylesheet" href="themes/prism.css" data-noprefix /> | ||
| <link rel="stylesheet" href="plugins/unescaped-markup/prism-unescaped-markup.css" data-noprefix /> | ||
|
|
||
| <script src="prefixfree.min.js"></script> | ||
|
|
||
| <script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script> | ||
| <script src="http://www.google-analytics.com/ga.js" async></script> | ||
| </head> | ||
| <body class="language-markup"> | ||
|
|
||
| <header> | ||
| <div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div> | ||
|
|
||
| <h2>Unescaped markup</h2> | ||
| <p>Write markup without having to escape anything.</p> | ||
| </header> | ||
|
|
||
| <section> | ||
| <h1>How to use</h1> | ||
| <p>Instead of using <code><pre><code></code> elements, use <code><script type="text/plain"></code>:</p> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h1>Examples</h1> | ||
|
|
||
| <p>View source to see that the following didn’t need escaping (except for <code></script></code>, that does):</p> | ||
|
|
||
| <script type="text/plain"><!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
|
|
||
| <meta charset="utf-8" /> | ||
| <link rel="shortcut icon" href="favicon.png" /> | ||
| <title>Keep markup ▲ Prism plugins</title> | ||
| <base href="../.." /> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <link rel="stylesheet" href="themes/prism.css" data-noprefix /> | ||
|
|
||
| <script src="prefixfree.min.js"></script> | ||
| </head> | ||
| <body class="language-markup"> | ||
|
|
||
| <header> | ||
| <div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div> | ||
|
|
||
| <h2>Unescaped markup</h2> | ||
| <p>Write markup without having to escape anything.</p> | ||
| </header> | ||
|
|
||
| <section> | ||
| <h1>How to use</h1> | ||
| <p>Instead of using <code><pre><code></code> elements, use <code><script type="text/plain"></code>:</p> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h1>Examples</h1> | ||
|
|
||
| <p>With <code><script type="text/plain"></code>:</p> | ||
|
|
||
| <script type="text/plain"><div><span>Foo</span></div></script> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h1>FAQ</h1> | ||
|
|
||
| <p>Why not use the HTML <code><template></code> tag?</p> | ||
|
|
||
| <p>Because it is a PITA to get its <code>textContent</code> and needs to be pointlessly cloned. | ||
| Feel free to implement it yourself and send a pull request though, if you are so inclined.</p> | ||
|
|
||
| <p>Can I use this inline?</p> | ||
|
|
||
| <p>Not out of the box, because I figured it’s more of a hassle to type <code><script type="text/plain"></code> than escape the 1-2 <code><</code> 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.</p> | ||
| </section> | ||
|
|
||
| <footer data-src="templates/footer.html" data-type="text/html"></footer> | ||
|
|
||
| <script src="prism.js"></script> | ||
| <script src="plugins/unescaped-markup/prism-unescaped-markup.js"></script> | ||
| <script src="utopia.js"></script> | ||
| <script src="components.js"></script> | ||
| <script src="code.js"></script> | ||
|
|
||
| </body> | ||
| </html></script> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h1>FAQ</h1> | ||
|
|
||
| <p>Why not use the HTML <code><template></code> tag?</p> | ||
|
|
||
| <p>Because it is a PITA to get its <code>textContent</code> and needs to be pointlessly cloned. | ||
| Feel free to implement it yourself and send a pull request though, if you are so inclined.</p> | ||
|
|
||
| <p>Can I use this inline?</p> | ||
|
|
||
| <p>Not out of the box, because I figured it’s more of a hassle to type <code><script type="text/plain"></code> than escape the 1-2 <code><</code> 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.</p> | ||
| </section> | ||
|
|
||
| <footer data-src="templates/footer.html" data-type="text/html"></footer> | ||
|
|
||
| <script src="prism.js"></script> | ||
| <script src="plugins/unescaped-markup/prism-unescaped-markup.js"></script> | ||
| <script src="utopia.js"></script> | ||
| <script src="components.js"></script> | ||
| <script src="code.js"></script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| }); | ||
| }()); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.