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');
});
},
};Man kann das JS Library mit dem yarn Package Manager zu seinem Sage Template hinzufügen:
$ yarn add highlight.jsIch 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);
// update 18.03.2021: initHighlightingOnLoad ist seit 10.6 nicht mehr unterstützt
hljs.highlightAll();
}
export default {
init,
}Update 18.03 initHighlightingOnLoad() ist seit der VErsion 10.6 nicht mehr supportet!
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();
hljs.highlightAll();
}
export default {
init,
}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.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