-
Notifications
You must be signed in to change notification settings - Fork 41
/
Copy pathHighlight.html
445 lines (424 loc) · 34.1 KB
/
Highlight.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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Highlight Test</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
</style>
<style>
a.sourceLine { display: inline-block; line-height: 1.25; }
a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
a.sourceLine:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
a.sourceLine { text-indent: -1em; padding-left: 1em; }
}
pre.numberSource a.sourceLine
{ position: relative; left: -4em; }
pre.numberSource a.sourceLine::before
{ content: attr(title);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; pointer-events: all; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
a.sourceLine::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>
<link rel="stylesheet" href="github.css" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<header id="title-block-header">
<h1 class="title">Highlight PP-Macros Test</h1>
</header>
<style type="text/css">
/*! "GFM-Alerts.css" v2.0 | 2017/11/21 | MIT License (MIT)
Adapted by Tristano Ajmone from "flash.scss" of Primer CSS by GitHub Inc.:
https://github.com/primer/primer/blob/master/modules/primer-alerts/lib/flash.scss
http://primercss.io/archive/alerts/
Copyright (c) 2017 Tristano Ajmone.
Copyright (c) 2017 GitHub Inc.
*/
.Alert,
.Warning,
.Error,
.Success,
.Note {
padding: 11px;
margin-bottom: 24px;
border-style: solid;
border-width: 1px;
border-radius: 4px;
}
.Alert p,
.Warning p,
.Error p,
.Success p,
.Note p {
margin-top: 0;
}
.Alert p:last-child,
.Warning p:last-child,
.Error p:last-child,
.Success p:last-child,
.Note p:last-child {
margin-bottom: 0;
}
.Alert {
color: #224466;
background-color: #E2EEF9;
border-color: #BAC6D3;
}
.Warning {
color: #4C4A42;
background-color: #FFF9EA;
border-color: #DFD8C2;
}
.Error {
color: #991111;
background-color: #FCDEDE;
border-color: #D2B2B2;
}
.Success {
color: #22662C;
background-color: #E2F9E5;
border-color: #BAD3BE;
}
.Note {
color: #2F363D;
background-color: #F6F8FA;
border-color: #D5D8DA;
}
.Alert h1,
.Alert h2,
.Alert h3,
.Alert h4,
.Alert h5,
.Alert h6 {
color: #224466;
margin-bottom: 0;
}
.Warning h1,
.Warning h2,
.Warning h3,
.Warning h4,
.Warning h5,
.Warning h6 {
color: #4C4A42;
margin-bottom: 0;
}
.Error h1,
.Error h2,
.Error h3,
.Error h4,
.Error h5,
.Error h6 {
color: #991111;
margin-bottom: 0;
}
.Success h1,
.Success h2,
.Success h3,
.Success h4,
.Success h5,
.Success h6 {
color: #22662C;
margin-bottom: 0;
}
.Note h1,
.Note h2,
.Note h3,
.Note h4,
.Note h5,
.Note h6 {
color: #2F363D;
margin-bottom: 0;
}
.Alert h1:first-child,
.Alert h2:first-child,
.Alert h3:first-child,
.Alert h4:first-child,
.Alert h5:first-child,
.Alert h6:first-child {
margin-top: 0;
}
.Warning h1:first-child,
.Warning h2:first-child,
.Warning h3:first-child,
.Warning h4:first-child,
.Warning h5:first-child,
.Warning h6:first-child {
margin-top: 0;
}
.Error h1:first-child,
.Error h2:first-child,
.Error h3:first-child,
.Error h4:first-child,
.Error h5:first-child,
.Error h6:first-child {
margin-top: 0;
}
.Success h1:first-child,
.Success h2:first-child,
.Success h3:first-child,
.Success h4:first-child,
.Success h5:first-child,
.Success h6:first-child {
margin-top: 0;
}
.Note h1:first-child,
.Note h2:first-child,
.Note h3:first-child,
.Note h4:first-child,
.Note h5:first-child,
.Note h6:first-child {
margin-top: 0;
}
/*# sourceMappingURL=GFM-Alerts.css.map */
</style>
<p>This is a run test of the GFM-TaskList pp-macros set.</p>
<h2 id="files-list">Files List</h2>
<ul>
<li>macros files:
<ul>
<li><a href="../macros/Highlight.pp"><code>Highlight.pp</code></a> — macros definition module.</li>
</ul></li>
<li>extra files:
<ul>
<li><a href="./github.css"><code>github.css</code></a> — basic document CSS styling.</li>
<li><a href="./code-example.pb"><code>code-example.pb</code></a> — PureBASIC code example.</li>
</ul></li>
</ul>
<h2 id="macros-list">Macros list</h2>
<ul>
<li><code>!HighlightFile( FILE )( LANG )[( OPTIONS )]</code> — imports and syntax-highlights and external file.</li>
<li><code>!Highlight( LANG )([ OPTIONS] )( CODE )</code> — syntax-highlights the code block defined in <code>CODE</code>.</li>
<li><code>!HighlightInlineTheme( THEME NAME )</code> — retrives a Highlight theme and injects its CSS into the documents.</li>
</ul>
<h1 id="add-highlight-color-theme">Add Highlight Color Theme</h1>
<p>For these examples we’ll import Highlight’s <code>edit-purebasic</code> theme into the document via the <code>!HighlightInlineTheme</code> macro:</p>
<pre><code>!HighlightInlineTheme(edit-purebasic)</code></pre>
<p>this macro emits the following raw html:</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb2-1" title="1"><span class="kw"><style</span><span class="ot"> type=</span><span class="st">"text/css"</span><span class="kw">></span></a>
<a class="sourceLine" id="cb2-2" title="2"><span class="co">/* Style definition file generated by highlight 3.51, http://www.andre-simon.de/ */</span></a>
<a class="sourceLine" id="cb2-3" title="3"><span class="co">/* highlight theme: PureBASIC */</span></a>
<a class="sourceLine" id="cb2-4" title="4">body<span class="fu">.hl</span> { <span class="kw">background-color</span>:<span class="cn">#ffffdf</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-5" title="5">pre<span class="fu">.hl</span> { <span class="kw">color</span>:<span class="cn">#000000</span><span class="op">;</span> <span class="kw">background-color</span>:<span class="cn">#ffffdf</span><span class="op">;</span> <span class="kw">font-size</span>:<span class="dv">10</span><span class="dt">pt</span><span class="op">;</span> <span class="kw">font-family</span>:<span class="st">'Courier New'</span><span class="op">,</span><span class="dv">monospace</span><span class="op">;</span>}</a>
<a class="sourceLine" id="cb2-6" title="6"><span class="fu">.hl.num</span> { <span class="kw">color</span>:<span class="cn">#000000</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-7" title="7"><span class="fu">.hl.esc</span> { <span class="kw">color</span>:<span class="cn">#0080ff</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-8" title="8"><span class="fu">.hl.str</span> { <span class="kw">color</span>:<span class="cn">#0080ff</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-9" title="9"><span class="fu">.hl.pps</span> { <span class="kw">color</span>:<span class="cn">#0080ff</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-10" title="10"><span class="fu">.hl.slc</span> { <span class="kw">color</span>:<span class="cn">#00aaaa</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-11" title="11"><span class="fu">.hl.com</span> { <span class="kw">color</span>:<span class="cn">#00aaaa</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-12" title="12"><span class="fu">.hl.ppc</span> { <span class="kw">color</span>:<span class="cn">#924b72</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-13" title="13"><span class="fu">.hl.opt</span> { <span class="kw">color</span>:<span class="cn">#000000</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-14" title="14"><span class="fu">.hl.ipl</span> { <span class="kw">color</span>:<span class="cn">#0080ff</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-15" title="15"><span class="fu">.hl.lin</span> { <span class="kw">color</span>:<span class="cn">#808080</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-16" title="16"><span class="fu">.hl.kwa</span> { <span class="kw">color</span>:<span class="cn">#006666</span><span class="op">;</span> <span class="kw">font-weight</span>:<span class="dv">bold</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-17" title="17"><span class="fu">.hl.kwb</span> { <span class="kw">color</span>:<span class="cn">#924b72</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-18" title="18"><span class="fu">.hl.kwc</span> { <span class="kw">color</span>:<span class="cn">#006666</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-19" title="19"><span class="fu">.hl.kwd</span> { <span class="kw">color</span>:<span class="cn">#0080ff</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-20" title="20"></a>
<a class="sourceLine" id="cb2-21" title="21"><span class="kw"></style></span></a></code></pre></div>
<style type="text/css">
/* Style definition file generated by highlight 3.51, http://www.andre-simon.de/ */
/* highlight theme: PureBASIC */
body.hl { background-color:#ffffdf; }
pre.hl { color:#000000; background-color:#ffffdf; font-size:10pt; font-family:'Courier New',monospace;}
.hl.num { color:#000000; }
.hl.esc { color:#0080ff; }
.hl.str { color:#0080ff; }
.hl.pps { color:#0080ff; }
.hl.slc { color:#00aaaa; }
.hl.com { color:#00aaaa; }
.hl.ppc { color:#924b72; }
.hl.opt { color:#000000; }
.hl.ipl { color:#0080ff; }
.hl.lin { color:#808080; }
.hl.kwa { color:#006666; font-weight:bold; }
.hl.kwb { color:#924b72; }
.hl.kwc { color:#006666; }
.hl.kwd { color:#0080ff; }
</style>
<p>Now the CSS definition for PureBASIC code blocks (via Highlight) is available document-wide and you’ll see it aplied to the examples in this document.</p>
<h1 id="highlighting-an-external-file">Highlighting an External File</h1>
<p>The <code>!HighlightFile</code> macro takes an external source code file, passes it to Highlight tool for syntax coloring, and injects into the document the raw HTML results as a <code><pre><code></code> block.</p>
<p>The syntax is:</p>
<pre><code>!HighlightFile( FILE )( LANG )[( OPTIONS )]</code></pre>
<p>… taking the following parameters:</p>
<ul>
<li><code>FILE</code> (mandatory) — The source file to syntax-color.</li>
<li><code>LANG</code> (mandatory) — The language of the source (eg: HTML, Python, etc.).</li>
<li><code>OPTIONS</code> (facultative) — Further options to pass to Highlight during invocation.</li>
</ul>
<div class="Note">
<p><strong>NOTE</strong>: The Highlight macros will also add the string passed as the <code>LANG</code> param to the class of both the <code><pre></code> and <code><code></code> tags in the final HTML result:</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb4-1" title="1"><span class="kw"><pre</span><span class="ot"> class=</span><span class="st">"hl LANG"</span><span class="kw">><code</span><span class="ot"> class=</span><span class="st">"LANG"</span><span class="kw">></span></a></code></pre></div>
<p>This allows finer control of how the code should look like, via custom CSS.</p>
</div>
<h2 id="basic-example">Basic Example</h2>
<p>We import the PureBASIC example file “<code>code-example.pb</code>” without passing any extra options to Highlight:</p>
<p>macro used:</p>
<pre><code>!HighlightFile(code-example.pb)(purebasic)</code></pre>
<p>raw html output:</p>
<div class="sourceCode" id="cb6"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb6-1" title="1"><span class="kw"><pre</span><span class="ot"> class=</span><span class="st">"hl purebasic"</span><span class="kw">><code</span><span class="ot"> class=</span><span class="st">"purebasic"</span><span class="kw">><span</span><span class="ot"> class=</span><span class="st">"hl slc"</span><span class="kw">></span>; PureBASIC 5.60 Example<span class="kw"></span></span></a>
<a class="sourceLine" id="cb6-2" title="2"></a>
<a class="sourceLine" id="cb6-3" title="3"><span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwa"</span><span class="kw">></span>For<span class="kw"></span></span> i<span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>=<span class="kw"></span><span</span><span class="ot"> class=</span><span class="st">"hl num"</span><span class="kw">></span>5<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwa"</span><span class="kw">></span>To<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl num"</span><span class="kw">></span>1<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwa"</span><span class="kw">></span>Step<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>-<span class="kw"></span><span</span><span class="ot"> class=</span><span class="st">"hl num"</span><span class="kw">></span>1<span class="kw"></span></span></a>
<a class="sourceLine" id="cb6-4" title="4"> TEXT$ <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>=<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl str"</span><span class="kw">></span><span class="dv">&quot;</span>Iteration number: <span class="dv">&quot;</span><span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>+<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwc"</span><span class="kw">></span>Str<span class="kw"></span></span>(i) <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>+<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl str"</span><span class="kw">></span>~<span class="dv">&quot;</span><span class="kw"></span><span</span><span class="ot"> class=</span><span class="st">"hl esc"</span><span class="kw">></span>\n\n<span class="kw"></span><span</span><span class="ot"> class=</span><span class="st">"hl str"</span><span class="kw">></span>Do you wish to continue?<span class="dv">&quot;</span><span class="kw"></span></span></a>
<a class="sourceLine" id="cb6-5" title="5"> UserChoice <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>=<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwc"</span><span class="kw">></span>MessageRequester<span class="kw"></span></span>(<span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl str"</span><span class="kw">></span><span class="dv">&quot;</span>Countdown Dialog<span class="dv">&quot;</span><span class="kw"></span></span>, TEXT$, <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwb"</span><span class="kw">></span>#PB_MessageRequester_YesNo<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>|<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwb"</span><span class="kw">></span>#PB_MessageRequester_Info<span class="kw"></span></span>)</a>
<a class="sourceLine" id="cb6-6" title="6"> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwa"</span><span class="kw">></span>If<span class="kw"></span></span> UserChoice <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>=<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwb"</span><span class="kw">></span>#PB_MessageRequester_No<span class="kw"></span></span></a>
<a class="sourceLine" id="cb6-7" title="7"> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwa"</span><span class="kw">></span>Break<span class="kw"></span></span></a>
<a class="sourceLine" id="cb6-8" title="8"> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwa"</span><span class="kw">></span>EndIf<span class="kw"></span></span></a>
<a class="sourceLine" id="cb6-9" title="9"><span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwa"</span><span class="kw">></span>Next<span class="kw"></span></span></a>
<a class="sourceLine" id="cb6-10" title="10"><span class="kw"></code></pre></span></a></code></pre></div>
<p>result preview:</p>
<pre class="hl purebasic"><code class="purebasic"><span class="hl slc">; PureBASIC 5.60 Example</span>
<span class="hl kwa">For</span> i<span class="hl opt">=</span><span class="hl num">5</span> <span class="hl kwa">To</span> <span class="hl num">1</span> <span class="hl kwa">Step</span> <span class="hl opt">-</span><span class="hl num">1</span>
TEXT$ <span class="hl opt">=</span> <span class="hl str">"Iteration number: "</span> <span class="hl opt">+</span> <span class="hl kwc">Str</span>(i) <span class="hl opt">+</span> <span class="hl str">~"</span><span class="hl esc">\n\n</span><span class="hl str">Do you wish to continue?"</span>
UserChoice <span class="hl opt">=</span> <span class="hl kwc">MessageRequester</span>(<span class="hl str">"Countdown Dialog"</span>, TEXT$, <span class="hl kwb">#PB_MessageRequester_YesNo</span> <span class="hl opt">|</span> <span class="hl kwb">#PB_MessageRequester_Info</span>)
<span class="hl kwa">If</span> UserChoice <span class="hl opt">=</span> <span class="hl kwb">#PB_MessageRequester_No</span>
<span class="hl kwa">Break</span>
<span class="hl kwa">EndIf</span>
<span class="hl kwa">Next</span>
</code></pre>
<h2 id="example-using-options">Example Using Options</h2>
<p>Now we import the same file, this time passing some extra options to Highlight in order to show line numbers:</p>
<p>macro used:</p>
<pre><code>!HighlightFile(code-example.pb)(purebasic)(--line-numbers --line-number-length=1)
</code></pre>
<p>raw html output:</p>
<div class="sourceCode" id="cb8"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb8-1" title="1"><span class="kw"><pre</span><span class="ot"> class=</span><span class="st">"hl purebasic"</span><span class="kw">><code</span><span class="ot"> class=</span><span class="st">"purebasic"</span><span class="kw">><span</span><span class="ot"> class=</span><span class="st">"hl lin"</span><span class="kw">></span>1 <span class="kw"></span><span</span><span class="ot"> class=</span><span class="st">"hl slc"</span><span class="kw">></span>; PureBASIC 5.60 Example<span class="kw"></span></span></a>
<a class="sourceLine" id="cb8-2" title="2"><span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl lin"</span><span class="kw">></span>2 <span class="kw"></span></span></a>
<a class="sourceLine" id="cb8-3" title="3"><span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl lin"</span><span class="kw">></span>3 <span class="kw"></span><span</span><span class="ot"> class=</span><span class="st">"hl kwa"</span><span class="kw">></span>For<span class="kw"></span></span> i<span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>=<span class="kw"></span><span</span><span class="ot"> class=</span><span class="st">"hl num"</span><span class="kw">></span>5<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwa"</span><span class="kw">></span>To<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl num"</span><span class="kw">></span>1<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwa"</span><span class="kw">></span>Step<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>-<span class="kw"></span><span</span><span class="ot"> class=</span><span class="st">"hl num"</span><span class="kw">></span>1<span class="kw"></span></span></a>
<a class="sourceLine" id="cb8-4" title="4"><span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl lin"</span><span class="kw">></span>4 <span class="kw"></span></span> TEXT$ <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>=<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl str"</span><span class="kw">></span><span class="dv">&quot;</span>Iteration number: <span class="dv">&quot;</span><span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>+<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwc"</span><span class="kw">></span>Str<span class="kw"></span></span>(i) <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>+<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl str"</span><span class="kw">></span>~<span class="dv">&quot;</span><span class="kw"></span><span</span><span class="ot"> class=</span><span class="st">"hl esc"</span><span class="kw">></span>\n\n<span class="kw"></span><span</span><span class="ot"> class=</span><span class="st">"hl str"</span><span class="kw">></span>Do you wish to continue?<span class="dv">&quot;</span><span class="kw"></span></span></a>
<a class="sourceLine" id="cb8-5" title="5"><span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl lin"</span><span class="kw">></span>5 <span class="kw"></span></span> UserChoice <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>=<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwc"</span><span class="kw">></span>MessageRequester<span class="kw"></span></span>(<span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl str"</span><span class="kw">></span><span class="dv">&quot;</span>Countdown Dialog<span class="dv">&quot;</span><span class="kw"></span></span>, TEXT$, <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwb"</span><span class="kw">></span>#PB_MessageRequester_YesNo<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>|<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwb"</span><span class="kw">></span>#PB_MessageRequester_Info<span class="kw"></span></span>)</a>
<a class="sourceLine" id="cb8-6" title="6"><span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl lin"</span><span class="kw">></span>6 <span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwa"</span><span class="kw">></span>If<span class="kw"></span></span> UserChoice <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl opt"</span><span class="kw">></span>=<span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwb"</span><span class="kw">></span>#PB_MessageRequester_No<span class="kw"></span></span></a>
<a class="sourceLine" id="cb8-7" title="7"><span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl lin"</span><span class="kw">></span>7 <span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwa"</span><span class="kw">></span>Break<span class="kw"></span></span></a>
<a class="sourceLine" id="cb8-8" title="8"><span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl lin"</span><span class="kw">></span>8 <span class="kw"></span></span> <span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl kwa"</span><span class="kw">></span>EndIf<span class="kw"></span></span></a>
<a class="sourceLine" id="cb8-9" title="9"><span class="kw"><span</span><span class="ot"> class=</span><span class="st">"hl lin"</span><span class="kw">></span>9 <span class="kw"></span><span</span><span class="ot"> class=</span><span class="st">"hl kwa"</span><span class="kw">></span>Next<span class="kw"></span></span></a>
<a class="sourceLine" id="cb8-10" title="10"><span class="kw"></code></pre></span></a>
<a class="sourceLine" id="cb8-11" title="11"></a></code></pre></div>
<p>result preview:</p>
<pre class="hl purebasic"><code class="purebasic"><span class="hl lin">1 </span><span class="hl slc">; PureBASIC 5.60 Example</span>
<span class="hl lin">2 </span>
<span class="hl lin">3 </span><span class="hl kwa">For</span> i<span class="hl opt">=</span><span class="hl num">5</span> <span class="hl kwa">To</span> <span class="hl num">1</span> <span class="hl kwa">Step</span> <span class="hl opt">-</span><span class="hl num">1</span>
<span class="hl lin">4 </span> TEXT$ <span class="hl opt">=</span> <span class="hl str">"Iteration number: "</span> <span class="hl opt">+</span> <span class="hl kwc">Str</span>(i) <span class="hl opt">+</span> <span class="hl str">~"</span><span class="hl esc">\n\n</span><span class="hl str">Do you wish to continue?"</span>
<span class="hl lin">5 </span> UserChoice <span class="hl opt">=</span> <span class="hl kwc">MessageRequester</span>(<span class="hl str">"Countdown Dialog"</span>, TEXT$, <span class="hl kwb">#PB_MessageRequester_YesNo</span> <span class="hl opt">|</span> <span class="hl kwb">#PB_MessageRequester_Info</span>)
<span class="hl lin">6 </span> <span class="hl kwa">If</span> UserChoice <span class="hl opt">=</span> <span class="hl kwb">#PB_MessageRequester_No</span>
<span class="hl lin">7 </span> <span class="hl kwa">Break</span>
<span class="hl lin">8 </span> <span class="hl kwa">EndIf</span>
<span class="hl lin">9 </span><span class="hl kwa">Next</span>
</code></pre>
<h1 id="highlighting-a-code-block">Highlighting a Code Block</h1>
<p>The <code>!Highlight</code> macro takes an block of source code and passes it to Highlight tool for syntax coloring, and injects into the document the raw HTML results as a <code><pre><code></code> block.</p>
<p>It’s similar to the <code>!HighlightFile</code> macro, except it relies on source code defined inside the current document instead of an external file. So we won’t show the raw html emitted in the following examples, just the macro used and the final result.</p>
<p>The syntax is:</p>
<pre><code>!Highlight( LANG )( OPTIONS )
~~~~~
CODE
~~~~~</code></pre>
<p>… taking the following parameters:</p>
<ul>
<li><code>LANG</code> (mandatory) — The language of the source (eg: HTML, Python, etc.).</li>
<li><code>OPTIONS</code> (can be empty) — Further options to pass to Highlight during invocation. If none desired, just pass empty value.</li>
<li><code>CODE</code> (mandatory) — The block of source code to syntax-color.</li>
</ul>
<blockquote>
<p><strong>NOTE 1</strong>: The <code>CODE</code> parameter is passed between lines of tildas instead of brackets. From PP’s documentation:</p>
<blockquote>
<p>The last argument can be enclosed between lines of tildas or backquotes (of the same length) instead of parenthesis, brackets or braces and. This is useful for literate programming, diagrams or scripts (see examples). Code block arguments are not stripped: spaces and blank lines are preserved.</p>
</blockquote>
</blockquote>
<!-- -->
<blockquote>
<p><strong>NOTE 2</strong>: This macro, when run inside Windows CMD, creates a temporary file (named “<code>_pp-tempfileX.tmp</code>”, where <code>X</code> is a numeric counter) in the macros folder (<code>/pp/macros/</code>) for each macro call in the document, to temporarily store the code to highlight. At each PP invocation the <code>X</code> counter is reset, and the previous temp files are written over. These temporary files are set to be ignored by Git, so you shouldn’t worry about them.</p>
<p>When run inside Shell/Bash (including Git Bash for Windows) it doesn’t write any temporary files to disk.</p>
</blockquote>
<h2 id="basic-example-1">Basic Example</h2>
<p>We now define a block of PureBASIC code and pass it to Highlight without any extra options:</p>
<p>macro used:</p>
<pre><code>!Highlight(purebasic)()
~~~~~~~~~~
; PureBASIC 5.60
For i=1 To 10
Debug("Counting " + Str(i))
Next
~~~~~~~~~~
</code></pre>
<p>result preview:</p>
<pre class="hl purebasic"><code class="purebasic"><span class="hl slc">; PureBASIC 5.60</span>
<span class="hl kwa">For</span> i<span class="hl opt">=</span><span class="hl num">1</span> <span class="hl kwa">To</span> <span class="hl num">10</span>
<span class="hl kwa">Debug</span>(<span class="hl str">"Counting "</span> <span class="hl opt">+</span> <span class="hl kwc">Str</span>(i))
<span class="hl kwa">Next</span>
</code></pre>
<h2 id="example-using-options-1">Example Using Options</h2>
<p>We now define a block of PureBASIC code and pass it to Highlight, this time providing some extra options to Highlight in order to show line numbers:</p>
<p>macro used:</p>
<pre><code>!Highlight(purebasic)(--line-numbers --line-number-length=1)
~~~~~~~~~~
; PureBASIC 5.60
For i=1 To 10
Debug("Counting " + Str(i))
Next
~~~~~~~~~~
</code></pre>
<p>result preview:</p>
<pre class="hl purebasic"><code class="purebasic"><span class="hl lin">1 </span><span class="hl slc">; PureBASIC 5.60</span>
<span class="hl lin">2 </span><span class="hl kwa">For</span> i<span class="hl opt">=</span><span class="hl num">1</span> <span class="hl kwa">To</span> <span class="hl num">10</span>
<span class="hl lin">3 </span> <span class="hl kwa">Debug</span>(<span class="hl str">"Counting "</span> <span class="hl opt">+</span> <span class="hl kwc">Str</span>(i))
<span class="hl lin">4 </span><span class="hl kwa">Next</span>
</code></pre>
</body>
</html>