181 lines
4.9 KiB
HTML
181 lines
4.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<link rel="icon" href="favicon.png" />
|
||
|
|
<title>Normalize Whitespace ▲ Prism plugins</title>
|
||
|
|
<base href="../.." />
|
||
|
|
<link rel="stylesheet" href="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="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="templates/header-plugins.html" data-type="text/html"></div>
|
||
|
|
|
||
|
|
<h2>Normalize Whitespace</h2>
|
||
|
|
<p>Supports multiple operations to normalize whitespace in code blocks.</p>
|
||
|
|
</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:</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
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
</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="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="utopia.js"></script>
|
||
|
|
<script src="components.js"></script>
|
||
|
|
<script src="code.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|