kmx.io/prism.js/plugins/keep-markup/index.html
Branch
-
Show log
Commit
-
Hash : b679cfe6
Author :
Date : 2021-11-03T13:07:32
Keep Markup: Added `drop-tokens` option class (#3166)
-
plugins/keep-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
<!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 /> <style type="text/css"> code[class*="language-"] mark, pre[class*="language-"] mark { display: inline-block; color: inherit; background: none; border: 1px solid #000; box-shadow: 0 0 2px #fff; padding: 1px; background: rgba(0,0,0,0.2); } </style> <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-none"> <header data-plugin-header="keep-markup"></header> <section> <h1>How to use</h1> <p>You have nothing to do. The plugin is active by default. With this plugin loaded, all markup inside code will be kept.</p> <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> <pre><code class="language-markup"><pre><code class="language-css"> @media <mark>screen</mark> { div { <mark>text</mark>-decoration: <mark><mark>under</mark>line</mark>; back<mark>ground: url</mark>('foo.png'); } }</code></pre></code></pre> <p>would render like this:</p> <pre><code class="language-css"> @media <mark>screen</mark> { div { <mark>text</mark>-decoration: <mark><mark>under</mark>line</mark>; back<mark>ground: url</mark>('foo.png'); } }</code></pre> <p> It also works for inline code: <code class="language-javascript">v<mark>ar b</mark>ar = <mark>func</mark>tion () { <mark>/*</mark> foo <mark>*</mark>/ };</code> </p> </section> <footer data-src="assets/templates/footer.html" data-type="text/html"></footer> <script src="prism.js"></script> <script src="plugins/keep-markup/prism-keep-markup.js"></script> <script src="assets/vendor/utopia.js"></script> <script src="components.js"></script> <script src="assets/code.js"></script> </body> </html>