hljs-enhance
Version:
Adds a little extra stuff to highlight.js
162 lines (145 loc) • 6.82 kB
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.5/css/all.min.css>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/web-ignition@2.1/dist/reset.min.css>
<script defer src=https://cdn.jsdelivr.net/npm/dna-engine@3.1/dist/dna-engine.min.js></script>
<script defer src=https://cdn.jsdelivr.net/npm/web-ignition@2.1/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=https://cdn.jsdelivr.net/npm/hljs-enhance@2.0/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=https://cdn.jsdelivr.net/npm/hljs-enhance@2.0/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>