hljs-enhance
Version:
Adds a little extra stuff to highlight.js
40 lines (38 loc) • 3.09 kB
Plain Text
Paste the HTML below into the <head> section:
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- 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 -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->