forked from PrismJS/prism
/
index.html
185 lines (141 loc) · 5.04 KB
/
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>