Kann man Highlight.js ins WordPress implementieren?

Kann man Highlight.js ins WordPress implementieren?

Wenn man ein Blog über technischen Sachen schreibt kommt früher oder später auf die Idee die Beispiele nach dem Syntax darzustellen.

Nach kurze Suche bin auf das Framework highlight.js gestoßen was mehr als 180 Programmier- und Skript Sprachen nach 95 Templates darstellen kann.

Nach dem Setup sieht mein PHP Code Snippet so aus:

/**
 * Theme assets
 */
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), false, null);
    wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);

    if (is_single() && comments_open() && get_option('thread_comments')) {
        wp_enqueue_script('comment-reply');

    }
}, 100);

CSS wird so dargestellt:

/*
=============== 
Variables
===============
*/

:root {
  /* dark shades of primary color*/
  /* --clr-primary-1: hsl(43, 86%, 17%); */
  --clr-primary-1: hsl(184, 91%, 17%);
  --clr-primary-2: hsl(185, 84%, 25%);
  --clr-primary-3: hsl(185, 81%, 29%);
  --clr-primary-4: hsl(184, 77%, 34%);
  --clr-primary-5: #2caeba;
  /* lighter shades of primary color */
  --clr-primary-6: hsl(185, 57%, 50%);
  --clr-primary-7: hsl(184, 65%, 59%);
  --clr-primary-8: hsl(184, 80%, 74%);
  --clr-primary-9: hsl(185, 94%, 87%);
  --clr-primary-10: hsl(186, 100%, 94%);
  /* darkest grey - used for headings */
  --clr-grey-1: hsl(209, 61%, 16%);
  --clr-grey-3: hsl(209, 34%, 30%);
  --clr-grey-4: hsl(209, 28%, 39%);
  /* grey used for paragraphs */
  --clr-grey-5: hsl(210, 22%, 49%);
}

Wenn man Javascript verwendet wird es so aussehen:

import lozad from 'lozad';
import googlemaps from '../comps/google-maps';
import highlighter from '../comps/highlighter';
export default {
  init() {
    // JavaScript to be fired on all pages

  const observer = lozad();
	observer.observe();
  },
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired
    googlemaps.init();
    highlighter.init();
    $('#toggle').click(function() {
      $(this).toggleClass('active');
      $('#overlay').toggleClass('open');
    });
    },
};

Installation

Man kann das JS Library mit dem yarn Package Manager zu seinem Sage Template hinzufügen:

$ yarn add highlight.js

Ich habe nach der Installation unter /resources/assets/scripts ein comp Ordner erstellt und das JS File mit dem Namen highlighter.js erstellt. Nach dem Motto „Use only what you need“ habe ich nur die Syntaxen importiert die ich in meinem Blog voraussichtlich benötigen werde:

import hljs from 'highlight.js/lib/core';
import apache from 'highlight.js/lib/languages/apache';
import bash from 'highlight.js/lib/languages/bash';
import javascript from 'highlight.js/lib/languages/javascript';
import php from 'highlight.js/lib/languages/php';
import nginx from 'highlight.js/lib/languages/nginx';
import css from 'highlight.js/lib/languages/css';

Man kann hier auch das Template importieren was man benutzen will, ich habe das Theme Ocean ausgewählt:

import 'highlight.js/styles/ocean.css';

Man muss am Ende noch ein init Funktion erstellen und diese exportieren:

function init() {
hljs.registerLanguage('apache', apache);
hljs.registerLanguage('bash', bash);
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('php', php);
hljs.registerLanguage('nginx', nginx);
hljs.registerLanguage('css', css);
hljs.initHighlightingOnLoad();
}

export default {
	init,
}

So sieht das gesamte highlighter.js File aus:

import hljs from 'highlight.js/lib/core';
import apache from 'highlight.js/lib/languages/apache';
import bash from 'highlight.js/lib/languages/bash';
import javascript from 'highlight.js/lib/languages/javascript';
import php from 'highlight.js/lib/languages/php';
import nginx from 'highlight.js/lib/languages/nginx';
import css from 'highlight.js/lib/languages/css';
import 'highlight.js/styles/ocean.css';

function init() {
hljs.registerLanguage('apache', apache);
hljs.registerLanguage('bash', bash);
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('php', php);
hljs.registerLanguage('nginx', nginx);
hljs.registerLanguage('css', css);
hljs.initHighlightingOnLoad();
}

export default {
	init,
}

Bereit zur Kooperation?

Nächster Schritt ist dass man sein File in den Routen importiert. Da ich es überall verwenden wollte habe ich highlighter in das common.js eingefügt:

import highlighter from '../comps/highlighter';export export default {
  init() {
    // JavaScript to be fired on all pages
  },
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired
      highlighter.init();
   
    },
};

Wenn man aber die Assets mit yarn build:production erstellen möchte kommt die folgende Fehlermeldung:

$ webpack --env.production --progress --config resources/assets/build/webpack.config.js
 94% asset optimization                                                               

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                               16:42:42

 error  in ./node_modules/highlight.js/styles/ocean.css

Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
| 
| /* Ocean Comment */
| .hljs-comment,
| .hljs-quote {
|   color: #65737e;

 @ ./resources/assets/scripts/comps/highlighter.js 8:0-39
 @ ./resources/assets/scripts/routes/common.js
 @ ./resources/assets/scripts/main.js
 @ multi ./scripts/main.js ./styles/main.scss

 10 assets
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Troubleshooting

Damit man auch css in die JS Files importieren kann muss die Webpack Konfiguration angepasst werden.

Unter ./resources/assets/build müssen die folgenden Skripte angepasst werden:

config.js:

Hier muss das Path für node_modules unter paths hinzugefügt werden:

paths: {
  ...
    assets_node_modules: path.join(rootPath, 'node_modules'),
  ...
  },

webpack.config.js:

test: /\.css$/,
        include: [config.paths.assets, config.paths.assets_node_modules], // <-- used newly created path here
...

Nach dem können die Assets neu erstellt und deployed werden.

Wie man das macht findest du hier

Foto: Ferenc Almasi on Unsplash