Fryboyter

Bitte um Hilfe - Hugo und Prism.js

Um mal wieder über den Tellerrand zu schauen, bin ich gerade dabei mich in Hugo einzuarbeiten. Als Grundlage dient hierfür fryboyter.de und die dort veröffentlicheten Artikel.

Da der Code-Highlighter von Hugo für mich einige Nachteile hat, wollte ich weiter Prism nutzen. Am Artikel https://fryboyter.de/index-twig-des-fryboyter-themes beiße ich mir allerdings die Zähne aus. Obwohl der Code in <pre> und <code> Tags gepackt ist interpretiert Hugo scheinbar die <div> Tags. In Zeile 2 wird unter Hugo also nur “Fryboyter” angezeigt. Und nicht “<div class=“header”><h1><a href=“{{ paths.hosturl }}”>Fryboyter</a></h1></div>”. Bei Code-Beispielen ist das irgendwie blöd…

Ausgehend davon, dass es ein Problem von Hugo in Kombination mit Prism ist, habe ich im Forum von Hugo eine Support-Anfrage gestellt. Leider konnte mir bisher aber noch niemand helfen.

Wegen der Support-Anfrage habe ich ich ein Repository auf Codeberg veröffentlicht in dem zwei Artikel vorhanden sind. Einer bei dem das Hervorheben des Codes klappt und einer bei dem es nicht klappt. Ruft man den “Problem-Artikel” direkt bei Codeberg auf, kommt es zu gleichen fehlerhaften Anzeige. Und das obwohl hier Prism gar nicht geladen werden sollte. Also ich vermutlich eher Hugo oder Markdown an sich das Problem.

Daher möchte ich kurz in die Runde fragen, ob jemand eine Idee hat wie man das Problem lösen kann? Auf einen anderen Code-Highlighter möchte ich möglichst nicht umsteigen.

OSBN | Allgemein

Defer und Prism

Binde Javascript mit defer ein, haben sie gesagt. Für die Syntaxhervorhebung nutze ich Prism. Aufgrund des Ratschlags habe ich daher das Script per <script defer src=\”/theme/fryboyter/js/prism.js“></script> eingebunden. Keine gute Idee wie ich festgestellt habe.

In einigen Fällen habe ich zum Beispiel folgenden Code hervorgehoben:

$IP_DES_RASPBERRY:$PORT_VON_CADDY
root /pfad/zum/Mirrorverzeichnis
gzip
browse

Beim ersten Aufruf des Artikels wurde allerdings folgendes angezeigt:

$IP_DES_RASPBERRY:$PORT_VON_CADDY
root /pfad/zum/Mirrorverzeichnis
gzip
browse
$IP_DES_RASPBERRY:$PORT_VON_CADDY

Kurz gesagt die erste Zeile wird am Ende des Blocks noch einmal angezeigt. Nicht gut. Aktualisiert man die Seite, wird es aber korrekt angezeigt. Beim jeweils ersten Aufruf ist mir dann aufgefallen, dass folgender Fehler in den Entwicklerwerkzeugen des Browsers angezeigt wird.

Uncaught TypeError: Cannot read property 'children' of null
    at prism.js?d46722219d:18
    at Array.forEach (<anonymous>)
    at n (prism.js?d46722219d:18)
    at NodeList.forEach (<anonymous>)
    at prism.js?d46722219d:18

Ok Zeile 18 der Datei prism.js ist wohl das Problem.

!function(){if("undefined"!=typeof self&&self.Prism&&self.document){var e="line-numbers",t=/\n(?!$)/g,n=function(e){var n=r(e),s=n["white-space"];if("pre-wrap"===s||"pre-line"===s){var l=e.querySelector("code"),i=e.querySelector(".line-numbers-rows"),a=e.querySelector(".line-numbers-sizer"),o=l.textContent.split(t);a||(a=document.createElement("span"),a.className="line-numbers-sizer",l.appendChild(a)),a.style.display="block",o.forEach(function(e,t){a.textContent=e||"\n";var n=a.getBoundingClientRect().height;i.children[t].style.height=n+"px"}),a.textContent="",a.style.display="none"}},r=function(e){return e?window.getComputedStyle?getComputedStyle(e):e.currentStyle||null:null};window.addEventListener("resize",function(){Array.prototype.forEach.call(document.querySelectorAll("pre."+e),n)}),Prism.hooks.add("complete",function(e){if(e.code){var r=e.element.parentNode,s=/\s*\bline-numbers\b\s*/;if(r&&/pre/i.test(r.nodeName)&&(s.test(r.className)||s.test(e.element.className))&&!e.element.querySelector(".line-numbers-rows")){s.test(e.element.className)&&(e.element.className=e.element.className.replace(s," ")),s.test(r.className)||(r.className+=" line-numbers");var l,i=e.code.match(t),a=i?i.length+1:1,o=new Array(a+1);o=o.join("<span></span>"),l=document.createElement("span"),l.setAttribute("aria-hidden","true"),l.className="line-numbers-rows",l.innerHTML=o,r.hasAttribute("data-start")&&(r.style.counterReset="linenumber "+(parseInt(r.getAttribute("data-start"),10)-1)),e.element.appendChild(l),n(r),Prism.hooks.run("line-numbers",e)}}}),Prism.hooks.add("line-numbers",function(e){e.plugins=e.plugins||{},e.plugins.lineNumbers=!0}),Prism.plugins.lineNumbers={getLine:function(t,n){if("PRE"===t.tagName&&t.classList.contains(e)){var r=t.querySelector(".line-numbers-rows"),s=parseInt(t.getAttribute("data-start"),10)||1,l=s+(r.children.length-1);s>n&&(n=s),n>l&&(n=l);var i=n-s;return r.children[i]}}}}}();

Ok, ich verstehe so ziemlich rein gar nichts. Es hilft mir also nicht weiter. Nachdem ich etwas im Bugtracker von Prism gesucht habe, habe ich dort ein bereits behobenen Problem mit bezüglich der Einbindung per defer gefunden. Dessen Symptome waren aber nicht mit meinem Problem vergleichbar. Trotzdem habe ich mal schaut was passiert, wenn ich Prism nicht mit defer einbinde. Und schon ist mein Problem verschwunden. Da es hinsichtlich der Ladezeit gefühlt keinen Unterschied gibt ob ich nun defer verwende oder nicht, habe ich defer einfach wieder entfernt. Und was lernen wir daraus? Nicht jeder Tipp zur Seitenoptimierung macht pauschal Sinn.

OSBN | Allgemein

Fryboyter.de nun mit Code Highlighter

Vor ein paar Monaten bin ich von Wordpress auf Bolt CMS umgestiegen. Hierbei musste ich auf die eine oder andere Funktion verzichten. Unter anderem auf einen Code Higlighter. Es gibt zwar zwei Plugins, aber diese sind leider veraltet und funktionieren mit Bolt 3.x nicht und ich bekomme es nicht gebacken diese entsprechend anzupassen.

Daher hatte ich mit CSS etwas zusammengebastelt um Codebeispiele zumindest als solche zu kennzeichnen. Das Ergebnis war mehr schlecht als recht. Bei zu langen Zeilen musste man beispielsweise horizontal scrollen. Und Zeilennummern gab es auch keine mehr. Blöd wenn man den Code an einer bestimmten Stelle erklären will.

Ich habe mich daher dazu entschlossen einen Code Highlighter zu installieren. Entschieden habe ich mich schlussendlich für Prism. Zukünftig wird nun Code farblich hervorgehoben und Zeilennummern ink. Umbruch gibt es nun auch wieder.

#!/bin/bash 
echo "Wie ist Ihr Name?"
read ANTWORT
if [ "$ANTWORT" == "root" ]
    then
        echo "Hallo, Administrator. Das ist eine sehr lange Zeile um einen Zeilenumbruch zu provozieren."
    else
        echo "Hallo, Anwender."
fi

Der ganze Spaß hat aber auch Nachteile. Zum einen muss ich nun einige Artikel anpassen, da ich oft zu faul war, die richtige Klasse bei den Code-Tags zu hinterlegen (z. B. <code> anstelle von <code class=“language-bash”>. Und für die Zeilennummern muss ich die <pre> Tags um <pre class=“line-numbers” style=“white-space:pre-wrap;”> erweitern. Naja muss ich halt wieder das fleißige Bienchen spielen… Ein weiterer Nachteil ist, dass die Seite nun ca. 12 KB schwerer ist, da nun eine Javascript-Datei und eine CSS-Datei zusätzlich geladen werden. Ich denke das ist zu verkraften.

OSBN | Allgemein