-
Notifications
You must be signed in to change notification settings - Fork 0
/
spec.html
executable file
·161 lines (145 loc) · 6.57 KB
/
spec.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
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>hljs-enhance • Adds a little extra stuff to highlight.js</title>
<link rel=icon href=https://centerkey.com/graphics/bookmark.png>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6/css/all.min.css>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/web-ignition@2.2/dist/reset.min.css>
<script defer src=https://cdn.jsdelivr.net/npm/dna-engine@3.2/dist/dna-engine.min.js></script>
<script defer src=https://cdn.jsdelivr.net/npm/web-ignition@2.2/dist/lib-x.min.js></script>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- hljs-enhance -->
<!-- ============ -->
<!-- Adds a little extra stuff to highlight.js -->
<!-- Stuff: -->
<!-- 1) Normalizes code indent to first column of display box -->
<!-- 2) Trims whitespace around code -->
<!-- 3) Adds border with option for caption (<figcaption>) -->
<!-- 4) Adds hover effect to syntax highlighting -->
<!-- -->
<link rel=stylesheet href=https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8/build/styles/docco.min.css>
<link rel=stylesheet href=hljs-enhance.css>
<script defer src=https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8/build/highlight.min.js></script>
<script defer src=https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8/build/languages/http.min.js></script>
<script defer src=hljs-enhance.js></script>
<!-- -->
<!-- Style theme listing (and example css filenames): -->
<!-- https://highlightjs.org/static/demo -->
<!-- default.min.css, dark.min.css, monokai.min.css, sunburst.min.css -->
<!-- Example conversion of theme name to css filename: -->
<!-- "Atom One Dark" ===> atom-one-dark.min.css -->
<!-- Usage (simple): -->
<!-- <pre><code class=language-javascript> -->
<!-- console.log('Hello'); -->
<!-- </code></pre> -->
<!-- Usage (with caption): -->
<!-- <figure> -->
<!-- <figcaption>Hello Message</figcaption> -->
<!-- <pre><code class=language-javascript> -->
<!-- console.log('Hello'); -->
<!-- </code></pre> -->
<!-- </figure> -->
<!-- Example languages: -->
<!-- javascript, html, css, less -->
<!-- For showing HTML code, first encode at: -->
<!-- https://www.convertstring.com/EncodeDecode/HtmlEncode -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
</head>
<body>
<header>
<h1>hljs-enhance</h1>
<h2>Adds a little extra stuff to highlight.js</h2>
<p>
(Most importantly, code within the <code><code></code>
tags can be aligned with the surrounding HTML and still render properly.)
</p>
<a id=fork-me href=https://github.com/center-key/hljs-enhance>Fork me on GitHub</a>
</header>
<main>
<figure>
<figcaption>Code for Syntax Highlighting</figcaption>
<pre><code class=language-html>
<pre><code class=language-javascript>
console.log('Hello');
</code></pre>
</code></pre>
</figure>
<pre><code class=language-javascript>
console.log('Hello');
</code></pre>
<figure>
<figcaption>Caption Above</figcaption>
<pre><code class=language-javascript>
console.log('Hello');
</code></pre>
</figure>
<figure>
<pre><code class=language-javascript>
console.log('Hello');
</code></pre>
<figcaption>Caption Below</figcaption>
</figure>
<figure>
<figcaption>Example JavaScript</figcaption>
<pre><code class=language-javascript>
const help = {
selector: '.help-me',
show(elem) {
const msg = elem.dataset.title;
document.getElementById('message').textContent = msg;
},
setup() {
const listener = (event) =>
event.target.matches(help.selector) && help.show(event.target);
document.addEventListener('click', (event) => help.show);
},
};
help.setup();
</code></pre>
</figure>
<figure>
<figcaption>Example HTML</figcaption>
<pre><code class=language-html>
<!-- Slide -->
<section>
<h3>Images and Arrows</h3>
<img class=prime data-width=5% src=logo.png alt=logo>
<div class=down-arrow></div>
<img class=prime data-x=a,2.3 data-width=20%
src=https://dna-engine.org/graphics/dna-logo.png alt=logo>
</section>
</code></pre>
</figure>
<figure>
<figcaption>Example HTTP</figcaption>
<pre><code class=language-http>
POST /api/v1/books/3001 HTTP/1.1
Host: example.org
Content-Type: application/json; charset=utf-8
Content-Length: 125
{
"id": 3001,
"title": "Go JavaScript",
"author": "Jake"
}
</code></pre>
</figure>
<figure class=hljs-enhance>
<figcaption>Trim Box without Code</figcaption>
<div>
Put the class <code>hljs-enhance</code> on the <code><figure></code> tag to make
a box with the trim even if there is no code.
</div>
</figure>
</main>
<footer>
<p>
<a href=https://github.com/center-key/hljs-enhance/blob/main/hljs-enhance.css>hljs-enhance.css</a>
</p>
<p>
<a href=https://github.com/center-key/hljs-enhance/blob/main/hljs-enhance.js>hljs-enhance.js</a>
</p>
</footer>
</body>
</html>