kmx.io/prism.js/plugins/unescaped-markup/index.html
Branch
-
Show log
Commit
-
Hash : de79636a
Author :
Date : 2021-05-01T14:57:39
Website: Moved remaining vendor files into `vendor` folder (#2829)
-
plugins/unescaped-markup/index.html
-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="assets/favicon.png" /> <title>Unescaped markup ▲ Prism plugins</title> <base href="../.." /> <link rel="stylesheet" href="assets/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="assets/vendor/prefixfree.min.js"></script> <script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script> <script src="https://www.google-analytics.com/ga.js" async></script> </head> <body class="language-markup"> <header data-plugin-header="unescaped-markup"></header> <section> <h1>How to use</h1> <p>This plugin provides several methods of achieving the same thing:</p> <ul> <li> Instead of using <code><pre><code></code> elements, use <code><script type="text/plain"></code>: <pre><code><script type="text/plain" class="language-markup"> <p>Example</p> </script></code></pre> </li> <li> Use an HTML-comment to escape your code: <pre><code><pre class="language-markup"><code><!-- <p>Example</p> --></code></pre></code></pre> This will only work if the <code>code</code> element contains exactly one comment and nothing else (not even spaces). E.g. <code><code> <!-- some text --></code></code> and <code><code>text<!-- more text --></code></code> will not work. </li> </ul> </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="icon" href="assets/favicon.png" /> <title>Keep markup ▲ Prism plugins</title> <base href="../.." /> <link rel="stylesheet" href="assets/style.css" /> <link rel="stylesheet" href="themes/prism.css" data-noprefix /> <script src="assets/vendor/prefixfree.min.js"></script> </head> <body class="language-markup"> <header> <div class="intro" data-src="assets/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="assets/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="assets/vendor/utopia.js"></script> <script src="components.js"></script> <script src="assets/code.js"></script> </body> </html></script> <p>The next example uses the HTML-comment method:</p> <pre><code><!--<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="assets/favicon.png" /> <title>Keep markup ▲ Prism plugins</title> <base href="../.." /> <link rel="stylesheet" href="assets/style.css" /> <link rel="stylesheet" href="themes/prism.css" data-noprefix /> <script src="assets/vendor/prefixfree.min.js"></script> </head> <body class="language-markup"> <header> <div class="intro" data-src="assets/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="assets/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="assets/vendor/utopia.js"></script> <script src="components.js"></script> <script src="assets/code.js"></script> </body> </html>--></code></pre> </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="assets/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="assets/vendor/utopia.js"></script> <script src="components.js"></script> <script src="assets/code.js"></script> </body> </html>