-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
497 lines (470 loc) · 39.1 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
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
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<title>Pre Code Formatter</title>
</head>
<body>
<header>
<div class="container">
<nav class="main-nav">
<div class="nav-item"><a class="nav-link" href="./index.html"><code><Home></code></a></div>
<ul class="nav-list">
<li class="nav-item"><a class="nav-link" href="./dark.html"><code><Dark></code></a></li>
<li class="nav-item"><a class="nav-link" href="./light.html"><code><Light></code></a></li>
</ul>
</nav>
<div class="intro">
<h1>HTML Pre Tag Formatter</h1>
<p>Output <code><<code class="green">code</code>></code> tags for use in a
<code><<code class="green">pre</code>></code> tag for code blocks in blog posts (dark and light versions, see <a
href="#notes">notes</a> below). The <code><<code class="green">code</code>></code> tags have color classes
based on the <code>specific language</code> and syntax.</p>
</div>
</div>
</header>
<div class="container">
<h2>Code to copy for <em>dark</em> code block with color classes</h2>
<p id="dark_block_output" class="dark-code"></p>
<h3>Dark block example:</h3>
<pre class="code-block dark_block">
<code class="comment"><!-- Paste the code above here after removing the li tags: --></code>
</pre>
<!-- TEMP: Paste code in here so the <li> tags break to a new line -->
<!-- End pasted code -->
<h3>Color testing block ↴</h3>
<pre class="code-block dark_block">
const users = ['default color for the dark color block'
<code class="light-blue">const color = "light-blue"</code>
<code class="blue"> { color: "blue" },</code>
<code class="green"> { color: "green" },</code>
<code class="comment"> { color: "comment" }</code>
<code class="white"> { color: "white" }</code>
<code class="red"> { color: "red" }</code>
<code class="purple"> { color: "purple" }</code>
<code class="orange"> { color: "orange" } ];</code>
</pre>
<hr>
</div>
<div class="container">
<h2>Dark code block colors</h2>
<div class="color-container">
<div></div>
<div class="color-box bg-light-blue">light-blue</div>
<div class="color-box bg-blue">blue</div>
<div class="color-box bg-green">green</div>
<div class="color-box bg-comment">comment</div>
<div class="color-box bg-red">red</div>
<div class="color-box bg-purple">purple</div>
<div class="color-box bg-orange">orange</div>
<div class="color-box bg-background-color">background-color</div>
</div>
</div>
<!-- section for people with a dark bg website needing a light code block -->
<div class="dark-bg">
<div class="container">
<h2 class="light-text">Code to copy for <em>light</em> code block</h2>
<!-- output here: -->
<p id="light_block_output" class="light-code"></p>
<h3 class="light-text">Light block example:</h3>
<pre class="code-block light_block">
const users = ['default color for the light color block'
<code class="light-blue2">const color = "light-blue2"</code>
<code class="blue2"> { color: "blue2" },</code>
<code class="green2"> { color: "green2" },</code>
<code class="comment2"> { color: "comment2" }</code>
<code class="gray"> { color: "gray" }</code>
<code class="maroon"> { color: "maroon" }</code>
<code class="purple2"> { color: "purple2" }</code>
<code class="orange2"> { color: "orange2" }</code>
<code> { color: "no class, same as body class: #333" } ];</code>
<code class="comment2"><!-- Working but with 1 problem (see notes at end) --></code>
<code><<code class="maroon">p</code> <code class="green2">id</code><code class="green2"></code>=<code
class="light-blue2">"something"</code> <code class="green2">class</code><code class="green2"></code>=<code
class="light-blue2">"test"</code><code class="green2"> required</code>>words here<<code
class="maroon"></code>/<code class="maroon">p</code>></code>
<code><<code class="maroon">title</code>>Code Formatter<<code class="maroon"></code>/<code
class="maroon">title</code>></code>
<code><<code class="maroon">img</code> <code class="green2">class</code><code class="green2"></code>=<code
class="light-blue2">"test-img"</code> <code class="green2">src</code><code class="green2"></code>=<code
class="light-blue2">"./img/file.jpeg"</code>></code>
<code><code class="comment2"><<code class="green2"></code>!-- Example comment goes here --></code></code>
</pre>
</div>
<div class="container">
<h2 class="light-text">Light code block colors</h2>
<div class="color-container light-container">
<div class="color-box bg-light-blue2">light-blue2</div>
<div class="color-box bg-blue2">blue2</div>
<div class="color-box bg-green2">green2</div>
<div class="color-box bg-comment2">comment2</div>
<div class="color-box bg-gray">gray</div>
<div class="color-box bg-maroon">maroon</div>
<div class="color-box bg-purple2">purple2</div>
<div class="color-box bg-orange2">orange2</div>
<div class="color-box bg-background-color2">background-color</div>
</div>
</div>
</div>
<div class="container">
<h3>HTML Example</h3>
<pre class="code-block dark_block">
<code class="comment"><!-- RegEx order: 1. htmlAttr, 2. htmlComment, 3. htmlTag, --></code>
<code class="comment"><!-- 4. htmlBoolAttr, 5. dblQuote --></code>
<code data-line="1"><<code class="green">h3</code>>HTML Example<<code class="green"></code>/<code
class="green">h3</code>></code>
<code data-line="2"><<code class="green">nav</code> <code class="blue">class</code><code class="blue"></code>=<code
class="light-blue">"main-nav"</code>></code>
<code data-line="3"> <<code class="green">ul</code> <code class="blue">class</code><code class="blue"></code>=<code
class="light-blue">"nav-list"</code>></code>
<code data-line="4"> <<code class="green">li</code> <code class="blue">class</code><code class="blue"></code>=<code
class="light-blue">"nav-item"</code>><<code class="green">a</code> <code class="blue">class</code><code class="blue"></code>=<code class="light-blue">"nav-link"</code> <code
class="blue">href</code><code class="blue"></code>=<code class="light-blue">"/"</code>>Home<<code
class="green"></code>/<code class="green">a</code>><<code class="green"></code>/<code
class="green">li</code>></code>
<code data-line="5"> <<code class="green">li</code> <code class="blue">class</code><code class="blue"></code>=<code
class="light-blue">"nav-item"</code>><<code class="green">a</code> <code class="blue">class</code><code class="blue"></code>=<code class="light-blue">"nav-link"</code> <code
class="blue">href</code><code class="blue"></code>=<code
class="light-blue">"/contact"</code>>Contact<<code class="green"></code>/<code
class="green">a</code>><<code class="green"></code>/<code class="green">li</code>></code>
<code data-line="6"> <<code class="green"></code>/<code class="green">ul</code>></code>
<code data-line="7"><<code class="green"></code>/<code class="green">nav</code>></code>
</pre>
<p><strong>NOTE</strong>: The HTML part works without any problems!</p>
<hr>
<h3>CSS Example</h3>
<pre class="code-block dark_block">
<code class="comment"><!-- RegEx order: 1. cssProp, 2. comments, 3. cssFxName, 4. cssUnits, --></code>
<code class="comment"><!-- 5. cssAtRules, 6. cssVariables, 7. singleQt --></code>
<code class="comment"><!-- NOTE: I manually added the classes for the HTML tag selectors --></code>
<code class="comment"><!-- and manually added the dot before /images --></code>
<code data-line="1"><code class="comment">/* The CSS below does not make sense, it's just an example */</code></code>
<code data-line="2">body,</code>
<code data-line="3">h1,</code>
<code data-line="4">.<code class="blue">dark_block</code>,</code>
<code data-line="5">.<code class="blue">bem__Class--name</code>,</code>
<code data-line="6">a:<code class="blue">hover</code> {</code>
<code data-line="7"> <code class="blue">font-family</code>:<code class="blue"> </code><code
class="light-blue">'Segoe UI'</code>, Tahoma, Geneva, Verdana, sans-serif;</code>
<code data-line="8"> <code class="blue">background-image</code>:<code class="blue"> </code><code
class="purple">url</code>(<code class="light-blue">'/images/picjpg'</code>);</code>
<code data-line="9"> <code class="blue">font-size</code>:<code class="blue"> 1</code><code
class="red">rem</code>;</code>
<code data-line="10"> <code class="blue">background-color</code>:<code class="blue"> </code>#333;</code>
<code data-line="11"> <code class="blue">color</code>:<code class="blue"> </code><code class="purple">var</code><code
class="orange">(--text-main</code>);</code>
<code data-line="12"> <code class="blue">border</code>:<code class="blue"> 1</code><code class="red">px</code> solid red <code class="red">!important</code>;</code>
<code data-line="13">}</code>
</pre>
<p><strong>NOTE</strong>: I have not figured out how to select HTML selectors so use <em>Emmet: Wrap with Abbreviation</em> to manually add the <code>code.color</code> classes. I also am not including my match for Class selectors because of other lines with a period (relative URLS, decimal #'s) which are also selected. And I can only select CSS variables as a value, not the declaration. Also note that if you have a period in yout comment(s), then it will get wrapped in <code>code.blue</code> if you use the class Regex - classes and HTML selectors require advanced regular expressions.</p>
<hr>
<h3>SASS Example</h3>
<pre class="code-block dark_block">
<code class="comment"><!-- RegEx order: 1. sassProp , 2. comments, 3. cssFxName, --></code>
<code class="comment"><!-- 4. cssUnits, 5. cssAtRules , 6. sassVars, 7. singleQt --></code>
<code class="comment"><!-- I manually added code.color tags for all the classes and HTML selectors --></code>
<code data-line="2"><code class="red">@use</code> <code class="light-blue">'./components/card'</code>;</code>
<code data-line="3"><code class="red">@use</code> <code class="light-blue">'base'</code>;</code>
<code data-line="4"><code class="orange">$primary</code>: #326dee <code class="red">!default</code>;</code>
<code data-line="5"><code class="orange">$base-font-size</code>: 1<code class="red">rem</code>;</code>
<code data-line="6"><code class="orange">$bgBody</code>: #f9f9f9;</code>
<code data-line="7"><code class="orange">$colors</code>: (</code>
<code data-line="8"> <code class="light-blue">'primary'</code>: <code class="orange">$primary</code>,</code>
<code data-line="9"> <code class="light-blue">'secondary'</code>: <code
class="orange">$secondary</code>,</code>
<code data-line="10"> <code class="light-blue">'blue'</code>: #1919e6,</code>
<code data-line="11">);</code>
<code data-line="12"><code class="orange">$layout-values</code>: flex-start, flex-end, center, space-between,
space-around, space-evenly;</code>
<code data-line="13"></code>
<code data-line="14"><code class="red">@each</code> <code class="orange">$val</code> in <code
class="orange">$layout-values</code> {</code>
<code data-line="15"> .<code class="blue">justify-</code>#{<code class="orange">$val</code>} {</code>
<code data-line="16"> <code class="blue">justify-content</code>: <code class="orange">$val</code>;</code>
<code data-line="17"> }</code>
<code data-line="18">}</code>
<code data-line="19">::<code class="blue">placeholder</code> {</code>
<code data-line="20"> <code class="blue">color</code>: <code class="purple">rgba</code>(0, 0, 0, 0.5);</code>
<code data-line="21">}</code>
<code data-line="22"><code class="green">header</code> {</code>
<code data-line="23"> <code class="blue">background-color</code>: <code class="orange">$headerBgClr</code>;</code>
<code data-line="24"> <code class="blue">color</code>: <code class="orange">$headerClr</code>;</code>
<code data-line="25"></code>
<code data-line="26"> <code class="green">p</code> {</code>
<code data-line="27"> <code class="blue">color</code>: <code class="orange">$headerBgClr</code>;</code>
<code data-line="28"> <code class="green">img</code> {</code>
<code data-line="29"> <code class="blue">width</code></code>: 100<code class="red">%</code>;</code>
<code data-line="30"> }</code>
<code data-line="31"> }</code>
<code data-line="32"> .<code class="blue">header-container</code> <code class="green">h1</code> {</code>
<code data-line="34"> <code class="blue">margin</code>: 0 auto;</code>
<code data-line="35"> <code class="blue">width</code>: 80<code class="red">%</code>;</code>
<code data-line="36"> <code class="blue">max-width</code>: 1100<code class="red">px</code>;</code>
<code data-line="37"> <code class="blue">display</code>: flex;</code>
<code data-line="38"> <code class="blue">justify-content</code>: space-between;</code>
<code data-line="39"> <code class="blue">align-items</code>: center;</code>
<code data-line="40"> }</code>
<code data-line="41"></code>
<code data-line="42"> <code class="green">a</code> {</code>
<code data-line="43"> <code class="blue">color</code>: <code class="orange">$headerClr</code>;</code>
<code data-line="44"> <code class="blue">font-size</code>: 1.125<code class="red">rem</code>;</code>
<code data-line="45"></code>
<code data-line="46"> <code class="green">&</code>:<code class="blue">hover</code> {</code>
<code data-line="47"> <code class="blue">text-decoration</code>: underline;</code>
<code data-line="48"> <code class="blue">color</code>: <code class="orange">$orange</code>;</code>
<code data-line="49"> }</code>
<code data-line="50"> }</code>
<code data-line="51">}</code>
<code data-line="52">.<code class="blue">navbar</code> {</code>
<code data-line="53"> <code class="red">@extend</code> <code class="blue">%flex-layout</code>;</code>
<code data-line="54"> <code class="blue">padding</code>: variables.<code class="orange">$base-padding</code> variables.<code class="orange">$base-padding</code> * 2;</code>
<code data-line="55"> <code class="blue">box-shadow</code>: variables.<code
class="orange">$base-box-shadow</code>;</code>
<code data-line="56">}</code>
<code data-line="57"><code class="blue">%flex-layout</code> {</code>
<code data-line="58"> <code class="blue">width</code>: 100<code class="red">%</code>;</code>
<code data-line="59"> <code class="blue">display</code>: flex;</code>
<code data-line="60"> <code class="blue">align-items</code>: center;</code>
<code data-line="61"> <code class="blue">justify-content</code>: space-between;</code>
<code data-line="62"> <code class="blue">box-sizing</code>: border-box;</code>
<code data-line="63">}</code>
<code data-line="64"><code class="comment">/* Comment */</code></code>
</pre>
<p><strong>NOTE</strong>: This code block example is huge and is only a fraction of syntax variations in a SASS/SCSS file. Once again, selecting classes (<code>.</code>, <code>%</code>, <code>:</code>, and <code>::</code>) is proving difficult. I do not know all the edge cases and specific syntax for everything SASS offers. For now, this is the best I can do and I am leaving classes out. You will have to manually add <code>code.color</code> tags for HTML element selectors and all classes. I also added back the dot (.) before <code>/components</code> and each occurrence of <code>variables</code>, though I did not make <code>variables</code> orange.</p>
<hr>
<h3>JSON Example</h3>
<pre class="code-block dark_block">
<code class="comment"><!-- RegEx order: 1. jsonValDblQt, 2. jsonProp, 3. jsonNumBool --></code>
<code data-line="1">{</code>
<code data-line="2"> <code class="green">"Chord"</code>: <code class="light-blue">""</code><code
class="blue"></code>,</code>
<code data-line="3"> <code class="green">"Intervals"</code>: [<code
class="light-blue">"1"</code><code class="blue"></code>, <code
class="light-blue">"3"</code><code class="blue"></code>, <code
class="light-blue">"5"</code><code class="blue"></code>]<code class="blue"></code>,</code>
<code data-line="4"> <code class="green">"steps"</code>: [<code class="blue">0</code><code
class="blue"></code>, <code class="blue">4</code><code class="blue"></code>, <code class="blue">7</code><code
class="blue"></code>]<code class="blue"></code>,</code>
<code data-line="5"> <code class="green">"test"</code>: <code class="blue">true</code><code
class="blue"></code>,</code>
<code data-line="6"> <code class="green">"Tendency"</code>: [<code
class="light-blue">"I"</code><code class="blue"></code>, <code
class="light-blue">"IV"</code><code class="blue"></code>]<code class="blue"></code>,</code>
<code data-line="7"> <code class="green">"scales"</code>: [</code>
<code data-line="8"> { <code class="green">"Major Scale"</code>: [<code
class="light-blue">"1st"</code><code class="blue"></code>, <code class="light-blue">" 4th"</code><code class="blue"></code>, <code class="light-blue">" 5th"</code><code
class="blue"></code>] }<code class="blue"></code>,</code>
<code data-line="9"> { <code class="green">"Minor Pentatonic"</code>: [<code
class="light-blue">"2nd"</code><code class="blue"></code>] }</code>
<code data-line="10"> <code class="blue"></code>]</code>
<code data-line="11">}</code>
</pre>
<p><strong>NOTE</strong>: The JSON part works without any problems!</p>
<hr>
<h3>JavaScript Example</h3>
<pre class="code-block dark_block">
<code class="comment"><!-- RegEx Order: 1. jsEqual, 2. jsNumDate, 3. jsBool, 4. jsObjProp, --></code>
<code class="comment"><!-- 5. jsKeywords, 6. jsFx, 7. backTicks, 8. dblQuote, 9. comments --></code>
<code data-line="1"><code class="red">const</code> str <code class="blue">=</code>code> <code class="light-blue">'string for'</code>;</code>
<code data-line="2"><code class="red">const</code> num <code class="blue">=</code> 1.618;</code>
<code data-line="3"><code class="red">const</code> isNull <code class="blue">=</code> <code
class="blue">null</code>;</code>
<code data-line="4"><code class="red">const</code> isUndefined <code class="blue">=</code> <code
class="blue">undefined</code>;</code>
<code data-line="5"><code class="red">let</code> bool <code class="blue">=</code> <code class="blue">true</code>;</code>
<code data-line="6"><code class="red">for</code> (<code class="red">let</code> item <code class="red">of</code> arr)</code>
<code data-line="7"><code class="red">const</code> arr1 <code class="blue">=</code> [1, 12.36, <code
class="light-blue">'word while'</code>];</code>
<code data-line="8"><code class="red">const</code> obj <code class="blue">=</code> {</code>
<code data-line="9"> <code class="blue">a</code><code class="blue"></code>: <code
class="light-blue">'word'</code>,</code>
<code data-line="10"> <code class="blue">b</code><code class="blue"></code>: <code
class="light-blue">'42'</code>,</code>
<code data-line="11"> <code class="blue">firstName</code><code class="blue"></code>: <code
class="light-blue">"Jim"</code>,</code>
<code data-line="12"> <code class="light-blue">"test"</code><code class="blue"></code>: <code
class="blue">false</code></code>
<code data-line="13">};</code>
<code data-line="14"><code class="red">async</code> <code class="red">function</code> <code
class="purple">fxName</code>(arr) {</code>
<code data-line="15"> <code class="red">const</code> output <code class="blue">=</code> <code class="red">await</code>
arr.<code class="purple">forEach</code>(item <code class="blue">=></code> {</code>
<code data-line="16"> console.<code class="purple">log</code>(<code class="red">typeof</code> item);</code>
<code data-line="17"> });</code>
<code data-line="18"> <code class="red">return</code> output;</code>
<code data-line="19">}</code>
<code data-line="20"><code class="purple">fxName</code>(arr1);</code>
<code data-line="21"><code class="red">if</code> (bool <code class="blue">!=</code><code class="blue">=</code> <code
class="blue">true</code>) {</code>
<code data-line="22"> console.<code class="purple">log</code>(<code class="blue">true</code>);</code>
<code data-line="23">} <code class="red">else</code> {</code>
<code data-line="24"> console.<code class="purple">log</code>(<code class="blue">false</code>);</code>
<code data-line="25">}</code>
<code data-line="26"><code class="red">const</code> someNum <code class="blue">=</code> <code
class="orange">Math</code>.<code class="purple">random</code>() * 10;</code>
<code data-line="27"><code class="red">const</code> today <code class="blue">=</code> <code class="red">new</code> <code class="orange">Date</<code class="purple">code></code>().<code class="purple">getFullYear</code>();</code>
<!-- What happened to the line above? -->
<code data-line="28"><code class="comment">/* Start JavaScript classes */</code></code>
</pre>
<p><strong>NOTE</strong>: For now this part is done but I am expecting errors when I start converting JS. I would prefer to be more positive but I do not think my regular expressions are ideal. I wanted to make all numbers blue but running that RegEx added a huge number of empty <code>code.blue</code> tags. I also was not able to escape a backtick to test my <code>backtick</code> RegEx. However, everything else worked and I only had to adjust a few lines and some indentations.</p>
<hr>
<h3>PHP Example</h3>
<pre class="code-block dark_block">
<code class="comment"><!-- RegEx order: 1. htmlAttr, 2. phpCustonFx, 3. phpHtmlTag, --></code>
<code class="comment"><!-- 4. phpKeywords, 5. jsFx, 6. singleQt, 7. dblQuote, 8. jsBool --></code>
<code data-line="1"></code>
<code data-line="2"><code class="red">class</code> <code class="orange">WordCountAndTimePlugin</code><code
class="orange"></code> {</code>
<code data-line="3"> <code class="red">function</code> <code class="purple">__construct</code>()<code
class="orange"></code> {</code>
<code data-line="4"> <code class="purple">add_action</code>(<code class="light-blue">'admin_menu'</code>, <code class="purple">array</code>($this, <code class="light-blue">'adminPage'</code>));</code>
<code data-line="5"> <code class="purple">add_action</code>(<code class="light-blue">'admin_init'</code>, <code class="purple">array</code>($this, <code class="light-blue">'settings'</code>));</code>
<code data-line="6"> <code class="purple">add_filter</code>(<code class="light-blue">'the_content'</code>, <code class="purple">array</code>($this, <code class="light-blue">'ifWrap'</code>));</code>
<code data-line="7"> }</code>
<code data-line="8"></code>
<code data-line="9"> <code class="red">function</code> <code class="purple">settings</code>()<code
class="orange"></code> {</code>
<code data-line="10"> <code class="purple">add_settings_section</code>(<code
class="light-blue">'wcp_first_section'</code>, <code class="blue">null</code>, <code
class="blue">null</code>, <code class="light-blue">'word-count-settings-page'</code>);</code>
<code data-line="12"> <code class="purple">add_settings_field</code>(<code
class="light-blue">'wcp_location'</code>, <code class="light-blue">'Display Location'</code>,</code> <code data-line="13"> <code class="purple">array</code>($this, <code
class="light-blue">'locationHTML'</code>), <code
class="light-blue">'word-count-settings-page'</code>, <code
class="light-blue">'wcp_first_section'</code>);</code>
<code data-line="14"> <code class="purple">register_setting</code>(<code
class="light-blue">'wordcountplugin'</code>, <code
class="light-blue">'wcp_location'</code>,</code>
<code data-line="15"> <code class="purple">array</code>(<code class="light-blue">'sanitize_callback'</code> <code class="blue"></code>=> <code class="purple">array</code>($this, <code
class="light-blue">'sanitizeLocation'</code>), <code class="light-blue">'default'</code> <code
class="blue"></code>=> <code class="light-blue">'0'</code>));</code>
<code data-line="16"> }</code>
<code data-line="17">}</code>
<code data-line="18">$wordCountAndTimePlugin <code class="blue"></code>= <code class="red">new</code> <code
class="purple">WordCountAndTimePlugin</code>();</code>
<code data-line="19"><code class="green">?</code>></code>
<code data-line="20"><<code class="green">div</code> <code class="blue">class</code><code class="blue"></code>=<code
class="light-blue">"container"</code>></code>
<code data-line="21"> <<code class="green">h3</code> <code class="blue">class</code><code class="blue"></code>=<code
class="light-blue">"custom-title"</code>><<code class="green">?php</code> <code
class="purple">esc_html_e</code>(<code class="light-blue">'Latest Articles'</code>, <code class="light-blue">'tower'</code>) ?><<code class="green"></code>/<code
class="green">h3</code>></code>
<code data-line="22"><<code class="green"></code>/<code class="green">div</code>></code>
</pre>
<p><strong>NOTE</strong>: I had some issues with the RegEx here. First, my comments RegEx did not grab my comment so I manually added <code>code.comment</code>. It did not take because it was on multiple lines, so it was split that way. Second, I was able to grab the custom function but not the <code><code class="red">new</code></code> instance of it. The new instance took on the color of functions (purple) - I did not change it to <code>code.orange</code>. Third, I was not able to grab the closing <code><code class="green">?</code></code> for the php tag, so I manually added <code>code.green</code>. Lastly, I did not try to grab the <code><code class="light-blue">$</code></code> prefix to <code>this</code>, so I manually added <code>code.blue</code>. I'll work on that one later.</p>
<hr>
<h3>Markdown Example</h3>
<pre class="code-block dark_block">
<code class="comment"><!-- RegEx order: 1. htmlAttr, 2. htmlComment, 3. htmlTag, 4. htmlEntity, --></code>
<code class="comment"><!-- 5. singleQt, 6. dblQuote, 7. mdHeadings, 8. mdLinks, --></code>
<code class="comment"><!-- 9. mdBlockQt, 10. mdDiffMinus, 11. mdDiffPlus, 12. mdLists --></code>
<code data-line="1"><code class="comment"><<code class="green"></code>!-- Markdown comment the same as for HTML --></code></code>
<code data-line="2"><code class="blue"># MARKDOWN CHEAT SHEET</code></code>
<code data-line="3"><code class="blue">#### How about H4 as a comparison</code></code>
<code data-line="4"></code>
<code data-line="5">[<code class="light-blue">Link</code><code class="light-blue"></code>](https://example.com)</code>
<code data-line="6">[<code class="light-blue">Link text</code><code class="light-blue"></code>](URL <code
class="light-blue">'Optional link title'</code>)</code>
<code data-line="7">![<code class="light-blue">picture alt text</code><code
class="light-blue"></code>](https://url.com/images/filename.png <code class="light-blue">'Title is optional'</code>)</code>
<code data-line="8">[<code class="light-blue">Strike thru section</code><code
class="light-blue"></code>](#strike-thru-section)</code>
<code data-line="9"><<code class="green">code</code>><<code class="green">img</code> <code
class="blue">alt</code><code class="blue"></code>=<code class="light-blue">"alt"</code> <code
class="blue">src</code><code class="blue"></code>=<code
class="light-blue">"https://url.com/images/filename.jpg"</code>><<code class="green"></code>/<code
class="green">code</code>></code>
<code data-line="10"><<code class="green">div</code> <code class="blue">align</code><code class="blue"></code>=<code
class="light-blue">"right"</code>><code class="red">&#8673;</code><<code class="green">a</code> <code class="blue">href</code><code class="blue"></code>=<code
class="light-blue">"#back-to-top"</code> <code class="blue">title</code><code class="blue"></code>=<code
class="light-blue">"Title"</code>>Back to Top<<code class="green"></code>/<code
class="green">a</code>><<code class="green"></code>/<code class="green">div</code>></code>
<code data-line="11">Some other important footnote.[<code class="light-blue">^2</code><code
class="light-blue"></code>]</code>
<code data-line="12">[<code class="light-blue">^1</code><code class="light-blue"></code>]: This is footnote number one.</code>
<code data-line="13">[<code class="light-blue">^2</code><code class="light-blue"></code>]: Here is the second footnote.</code>
<code data-line="14"></code>
<code data-line="15"><code class="orange">-</code> [<code class="light-blue"> </code><code class="light-blue"></code>] Incomplete _task_</code>
<code data-line="16"><code class="orange">-</code> [<code class="light-blue">x</code><code class="light-blue"></code>] Completed **task**</code>
<code data-line="17"></code>
<code data-line="18"><code class="orange">1.</code> list item</code>
<code data-line="19"><code class="orange">1.</code> Ordered item 2</code>
<code data-line="20"> <code class="orange">1.</code> Child item 1</code>
<code data-line="21"></code>
<code data-line="22"><code class="orange">-</code> bullet point</code>
<code data-line="23"><code class="orange">-</code> List item 2</code>
<code data-line="24"> <code class="orange">-</code> Child item 1</code>
<code data-line="25"></code>
<code data-line="26"><code class="green">> Blockquote</code></code>
<code data-line="27"><code class="green">> > Indented blockquote</code></code>
<code data-line="28"><code class="green">> img tags as block level _unless_ nested in table cells</code></code>
<code data-line="29"></code>
<code data-line="30"><code class="red">- this code or text is the old version</code></code>
<code data-line="31"><code class="red"><code class="green">+ this is what it was changed to</code></code></code>
</pre>
<p><strong>NOTE</strong>: Everything was relatively good until I got to lists and diff code blocks. I have to add <code>code.orange</code> for unordered lists, and <code>code.red</code> for the minus line in a diff code block. Also, blockquotes will only output as green if they do not have symbols other than alphanumeric and underscore, and for somereason I had to add <code>code.green</code> for the blockquotes - more RegEx work!</p>
<hr>
<h3>Other Code Examples</h3>
<p>I am considering adding syntax/languages like <em>Git</em> and <em>Git Bash</em>, <em>NPM</em> commands, <em>SQL</em>, <em>React/JSX</em> and <em>Astro</em>, <em>YAML</em>, <em>Apache</em>, and any other language or syntax that I come in contact with on my Front End journey.</p>
<p>However, there is not much syntax highlighting with Git commands, and I believe all NPM commands in the terminal are white. Also, the number of lines for a code block of Git or NPM commands are small and I could just add my color classes line by line for the few snippets that have color highlighting.</p>
<p>JSX like syntax seems to add the coloring for HTML and JavaScript together, so once I finish JavaScript, I should have what I need for Astro and JSX files.</p>
<p>Apache syntax highlighting would be good for <code>.htaccess</code> code, so that is one I will do. And it appears I can use the HTML regular expressions for Apache with a little tweaking. I would be interested in YAML only for GitHub actions, however I have no idea how to use Actions.</p>
<hr>
<!-- <h3>JSX Example</h3>
<pre class="code-block dark_block">
</pre>
<hr> -->
<div id="notes" class="notes">
<h2>NOTES</h2>
<ul>
<h3>How to use this</h3>
<li>In the CodePen version, you have to add your code in backticks to an array called <code>input</code>. That is only for anyone who wants to test this out before cloning my repo.</li>
<li>Once you do that, copy the code under <em>Code to copy for dark code block</em>.</li>
<li>Paste that code into your HTML file below the first <code><<code class="green">pre</code>></code> block in the comment field so the <code><<code class="green">li</code>></code> tags break to a new line.</li>
<li>Then remove the opening and closing <code><<code class="green">li</code>></code> tags and paste the remaining code
into your <code><<code class="green">pre</code>></code> block - DONE! The code in the
<code><<code class="green">pre</code>></code> tag will look funky but you should not have to touch it after
pasting it except for using <kbd>TAB</kbd> and/or <kbd>SPACEBAR</kbd> to align things.</li>
</ul>
<ul>
<h3>Issues, problems, and To-Do items</h3>
<li>As of <date>January 21st, 2023,</date> I'm getting empty <code>code.color</code> tags. They don't affect the display in the <code><<code class="green">pre</code>></code> block, but they should not be there. I will begin debugging the code to get rid of them when I am done the regular expressions for all the languages I want to cover. I made changes in my capture groups to get rid of them and it worked, but then some characters were not outputting.</li>
<li>A better way than using a string split into an array to grab the code: I want to either <strong>1)</strong> add a <code><<code class="green">textarea</code>></code> to paste the code and then grab it, or ideally <strong>2)</strong>
grab the code out of a file using the <em>FileReader API</em>.</li>
<li>As of January 21st I am using another JavaScript file (<code>input.js</code>) to get the code (see repo).</li>
<!-- <li>As of January 15th I switched from a functional approach to using Classes.</li> -->
<li>I'm open to any suggestions for the styling of my <code><<code class="green">code</code>></code>, <code><<code class="green">kbd</code>></code>, and <code><<code class="green">var</code>></code> tags.</li>
</ul>
<p>I am now going to work on removing empty duplicate code tags, and then create a <code>light.html</code> and <code>dark.html</code> files with a language select list. I added a <code><code class="blue">data</code></code> attribute to more easily locate each line visually, and to maybe use JavaScript to indent specific lines.</p>
<h3>Code, KBD, and Var element testing</h3>
<p>Testing: the <code><<code class="green">kbd</code>></code> element: <kbd>ENTER</kbd>, the
<code><<code class="green">samp</code>></code> element: <samp>samp tag</samp>, and the
<code><<code class="green">var</code>></code> element: <var>a<sup> 2</sup> +
b<sup>2</sup> =
c<sup>2</sup></var>. The strings <em>kbd</em>, <em>samp</em>,, and <em>var</em> are in a <code> tag.</p>
<p>Check out my GitHub repo <a href="https://github.com/Kernix13/pre-code-formatter"
target="_blank">pre-code-formatter</a> to see the updated code and full description in my <code>README.md</code>
file.</p>
<h2>Code to copy for HTML entity conversion stage only</h2>
<p>If you only want to have the reserved characters converted to HTML entities, than copy the code below.</p>
<p id="html_entities" class="html-entities"></p>
</div>
<hr>
<div class="file-reader">
<h3>Get code from <code><<code class="green">textarea</code>></code> (<span class="small">not functional at this time</span>)</h3>
<form>
<!-- <input type="file" name="readfile" id="readfile" /> -->
<!-- <input onchange="readFile(this)" type="file"> -->
<textarea id="mytextarea"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
<script src="./js/input.js"></script>
<script src="./js/script.js"></script>
<!-- <script src="./js/script2.js"></script> -->
</body>
</html>