hljs-enhance

Adds a little extra stuff to highlight.js

(Most importantly, code within the <code> tags can be aligned with the surrounding HTML and still render properly.)

Fork me on GitHub
Code for Syntax Highlighting

         <pre><code class=language-javascript>
            console.log('Hello');
         </code></pre>
      

      console.log('Hello');
   
Caption Above

         console.log('Hello');
      

         console.log('Hello');
      
Caption Below
Example 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();
      
Example 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>
      
Example 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"
         }
      
Trim Box without Code
Put the class hljs-enhance on the <figure> tag to make a box with the trim even if there is no code.