kmx.io/prism.js/examples.html
Branch
-
Show log
Commit
-
Hash : 3d96eedc
Author :
Date : 2021-10-05T12:53:51
Update test and example pages to use Autoloader (#1936)
-
examples.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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="assets/favicon.png" /> <title>Examples ▲ Prism</title> <link rel="stylesheet" href="assets/style.css" /> <link rel="stylesheet" href="themes/prism.css" data-noprefix /> <style> #languages { column-count: 4; } #languages > h1 { margin-top: 0; column-span: all; } #languages label { display: block; padding: .2em; } #languages label[data-id="javascript"] { border-bottom: 1px solid #aaa; padding-bottom: 1em; margin-bottom: 1em; } #languages .unavailable { color: #aaa; } #languages input { margin-right: .7em; } #examples > section { display: block; margin: auto; max-width: 900px; } #examples h3 { margin: 1em 0 0.3em; } ul { padding-left: 40px; } </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> <header> <div class="intro" data-src="assets/templates/header-main.html" data-type="text/html"></div> <h2>Examples</h2> <p>The examples in this page serve a dual purpose: They act as unit tests, making it easy to spot bugs, and at the same time demonstrate what Prism can do, on simple and on edge cases.</p> </header> <section class="language-markup"> <h1>Different markup</h1> <h2>code.language-css</h2> <code class="language-css">p { color: red; }</code> <h2>pre.language-css > code</h2> <pre class="language-css"><code>p { color: red; }</code></pre> <h2>pre > code.language-css</h2> <pre><code class="language-css">p { color: red; }</code></pre> <h2>pre.language-css > code.language-*</h2> <pre class="language-css"><code class="language-*">p { color: red; }</code></pre> <h2>code.lang-css</h2> <code class="lang-css">p { color: red; }</code> <h2>pre.lang-css > code</h2> <pre class="lang-css"><code>p { color: red; }</code></pre> <h2>pre > code</h2> <p>No language, should inherit .language-markup</p> <pre><code><p>hi!</p></code></pre> <h2>code.language-*</h2> <p>No language, should inherit .language-markup</p> <code class="language-*"><p>hi!</p></code> <h2>code.language-none</h2> <p>Should not be highlighted.</p> <code class="language-none"><p>hi!</p></code> </section> <section> <h1>Per language examples</h1> <div id="languages"></div> </section> <section id="examples"></section> <footer data-src="assets/templates/footer.html" data-type="text/html"></footer> <script src="assets/vendor/utopia.js"></script> <script src="prism.js"></script> <script src="plugins/autoloader/prism-autoloader.js" data-autoloader-path="components/"></script> <script src="components.js"></script> <script src="assets/code.js"></script> <script src="assets/vendor/promise.js"></script> <script src="assets/examples.js"></script> </body> </html>