kmx.io/prism.js/plugins/highlight-keywords/index.html
-
Show log
Commit
-
Hash : 247fd9a3
Author :
Date : 2021-09-06T17:54:33
Highlight Keywords: More documentation (#3049)
-
plugins/highlight-keywords/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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="assets/favicon.png" /> <title>Highlight Keywords ▲ 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> <style> /* * Custom keyword styles */ .token.keyword.keyword-return, .token.keyword.keyword-if { /* Set the color to a nice red. */ color: #f92672; } </style> <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="highlight-keywords"></header> <section> <h1>How to use</h1> <p>This plugin adds a special class for every keyword, so keyword-specific styles can be applied. These special classes allow for fine-grained control over the appearance of keywords using your own CSS rules.</p> <p>For example, the keyword <code>if</code> will have the class <code>keyword-if</code> added. A CSS rule used to apply special highlighting could look like this:</p> <pre><code class="language-css">.token.keyword.keyword-if { /* styles for 'if' */ }</code></pre> <p><strong>Note:</strong> This plugin does not come with CSS styles. You have to define the keyword-specific CSS rules yourself.</p> </section> <section> <h1>Examples</h1> <p>This example shows the plugin in action. The keywords <code>if</code> and <code>return</code> will be highlighted in red. The color of all other keywords will be determined by the current theme. The CSS rules used to implement the keyword-specific highlighting can be seen in the HTML file below.</p> <h2>JavaScript</h2> <pre data-src="plugins/highlight-keywords/prism-highlight-keywords.js"></pre> <h2>HTML (Markup)</h2> <pre data-src="plugins/highlight-keywords/index.html"></pre> </section> <footer data-src="assets/templates/footer.html" data-type="text/html"></footer> <script src="prism.js"></script> <script src="plugins/highlight-keywords/prism-highlight-keywords.js"></script> <script src="assets/vendor/utopia.js"></script> <script src="components.js"></script> <script src="assets/code.js"></script> </body> </html>