kmx.io/prism.js/plugins/normalize-whitespace/index.html
Branch
-
Show log
Commit
-
Hash : 91dea0c8
Author :
Date : 2022-06-10T11:29:28
Normalize Whitespace Plugin: Add configuration via attributes (#3467) Co-authored-by: Michael Schmidt <msrd0000@gmail.com>
-
plugins/normalize-whitespace/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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="assets/favicon.png" /> <title>Normalize Whitespace ▲ 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> <header data-plugin-header="normalize-whitespace"></header> <section class="language-markup"> <h1>How to use</h1> <p>Obviously, this is supposed to work only for code blocks (<code><pre><code></code>) and not for inline code.</p> <p>By default the plugin trims all leading and trailing whitespace of every code block. It also removes extra indents and trailing whitespace on every line.</p> <p>The plugin can be disabled for a particular code block by adding the class <code>no-whitespace-normalization</code> to either the <code><pre></code> or <code><code></code> tag.</p> <p>The default settings can be overridden with the <code class="language-javascript">setDefaults()</code> method like so:</p> <pre class="language-javascript"><code> Prism.plugins.NormalizeWhitespace.setDefaults({ 'remove-trailing': true, 'remove-indent': true, 'left-trim': true, 'right-trim': true, /*'break-lines': 80, 'indent': 2, 'remove-initial-line-feed': false, 'tabs-to-spaces': 4, 'spaces-to-tabs': 4*/ }); </code></pre> <p>The following settings are available and can be set via the <code>data-[setting]</code> attribute on the <code><pre<</code> element:</p> <dl> <dt>remove-trailing</dt> <dd>Removes trailing whitespace on all lines.</dd> <dt>remove-indent</dt> <dd>If the whole code block is indented too much it removes the extra indent.</dd> <dt>left-trim</dt> <dd>Removes all whitespace from the top of the code block.</dd> <dt>right-trim</dt> <dd>Removes all whitespace from the bottom of the code block.</dd> <dt>break-lines</dt> <dd>Simple way of breaking long lines at a certain length (default is 80 characters).</dd> <dt>indent</dt> <dd>Adds a certain number of tabs to every line.</dd> <dt>remove-initial-line-feed</dt> <dd>Less aggressive version of left-trim. It only removes a single line feed from the top of the code block.</dd> <dt>tabs-to-spaces</dt> <dd>Converts all tabs to a certain number of spaces (default is 4 spaces).</dd> <dt>spaces-to-tabs</dt> <dd>Converts a certain number of spaces to a tab (default is 4 spaces).</dd> </dl> </section> <section class="language-markup"> <h1>Examples</h1> <p>The following example demonstrates the use of this plugin:</p> <pre data-src="plugins/normalize-whitespace/demo.html"></pre> <p>The result looks like this:</p> <pre class="language-javascript"> <code> var example = { foo: true, bar: false }; var there_is_a_very_very_very_very_long_line_it_can_break_it_for_you = true; if (there_is_a_very_very_very_very_long_line_it_can_break_it_for_you === true) { }; </code> </pre> <p>It is also compatible with the <a href="plugins/keep-markup/">keep-markup</a> plugin:</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>This plugin can also be used on the server or on the command line with Node.js:</p> <pre><code class="language-javascript"> var Prism = require('prismjs'); var Normalizer = require('prismjs/plugins/normalize-whitespace/prism-normalize-whitespace'); // Create a new Normalizer object var nw = new Normalizer({ 'remove-trailing': true, 'remove-indent': true, 'left-trim': true, 'right-trim': true, /*'break-lines': 80, 'indent': 2, 'remove-initial-line-feed': false, 'tabs-to-spaces': 4, 'spaces-to-tabs': 4*/ }); // ..or use the default object from Prism nw = Prism.plugins.NormalizeWhitespace; // The code snippet you want to highlight, as a string var code = "\t\t\tvar data = 1; "; // Removes leading and trailing whitespace // and then indents by 1 tab code = nw.normalize(code, { // Extra settings indent: 1 }); // Returns a highlighted HTML string var html = Prism.highlight(code, Prism.languages.javascript); </code></pre> </section> <footer data-src="assets/templates/footer.html" data-type="text/html"></footer> <script src="prism.js"></script> <script src="plugins/normalize-whitespace/prism-normalize-whitespace.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>