CS-Notes/docs/_style/prism-master/plugins/normalize-whitespace/index.html
2018-12-19 14:09:39 +08:00

181 lines
4.9 KiB
Java

<!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>&lt;pre>&lt;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>&lt;pre></code> or <code>&lt;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>