[3.1.10] highlight.js

In diesem Forum gibt es Starthilfe zum neuen Extension-System von phpBB 3.1/3.2. Fragen zur Entwicklung von Extensions und zur Konvertierung von phpBB 3.0.x MODs sind ebenfalls willkommen.
Antworten
ango
Mitglied
Beiträge: 11
Registriert: 03.02.2011 13:14

[3.1.10] highlight.js

Beitrag von ango »

Da ich einige Schwierigkeiten bei der Integration von highlight.js hatte, beschreibe ich hier mein Vorgehen.
Folgende Änderungen fügen dem BBcode [ code ] highlight.js syntax highlighting hinzu:
Änderungen in viewtopic_body.html :

Code: Alles auswählen

<!-- EVENT viewtopic_topic_title_prepend -->

Code: Alles auswählen

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
<script>var hljsCSS = "//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/default.min.css";</script>

Code: Alles auswählen

<!-- EVENT viewtopic_body_postrow_post_after -->

Code: Alles auswählen

<script>
if(document.getElementsByTagName("code").length){var selectCode=function(b){SelectText(b.parentNode.parentNode.querySelector("code"))},SelectText=function(b){if(document.body.createTextRange){var a=document.body.createTextRange();a.moveToElementText(b);a.select()}else if(window.getSelection){var d=window.getSelection();a=document.createRange();a.selectNodeContents(b);d.removeAllRanges();d.addRange(a)}},hljsProcess=function(){var b=new XMLHttpRequest;b.onreadystatechange=function(){if(4==b.readyState&& 200==b.status){var a=document.createElement("link");a.type="text/css";a.rel="stylesheet";a.href=hljsCSS;document.getElementsByTagName("head")[0].appendChild(a);a=document.querySelectorAll(".codebox > code");for(var d=/.hljs{(.+?)}/gi.exec(b.responseText)[1].concat(";").match(/(.+?):(.+?);/gi),c=a.length-1;-1<c;c--){for(var e=document.createElement("pre").appendChild(a[0].cloneNode(!0)),f=d.length-1;-1<f;f--){var g=/(.+?):(.+?);/i.exec(d[f]);e.style[g[1]]=g[2]}e.style.font="inherit";e.style.whiteSpace= "pre";a[0].outerHTML=e.outerHTML;a=document.querySelectorAll(".codebox > code");wrap(a[0],document.createElement("pre"))}a=document.querySelectorAll("pre code");for(c=a.length-1;-1<c;c--)a[c].innerHTML=a[c].innerHTML.replace(/<br>/gi,"&#13;&#10;");hljs.initHighlighting()}};b.open("GET",hljsCSS,!0);b.send()},wrap=function(b,a){b.parentNode.insertBefore(a,b);a.appendChild(b)};hljsProcess()};
</script>
Liste der verfügbaren Styles: Link |Demo
Zuletzt geändert von ango am 19.05.2017 03:12, insgesamt 13-mal geändert.
Benutzeravatar
Dr.Death
Moderator
Moderator
Beiträge: 17395
Registriert: 23.04.2003 08:22
Wohnort: Xanten
Kontaktdaten:

Re: [3.1.10] highlight.js

Beitrag von Dr.Death »

Moin,

vielen Dank für Deine Mühen und das Bereitstellen Deiner Arbeit, aber das gibt es bereits als fertige Extension.... ohne das man an den Core Dateien von phpBB etwas ändern muss ... :roll: :wink:

https://phpbb-extensions.ga/extensions/ ... ghter.html
ango
Mitglied
Beiträge: 11
Registriert: 03.02.2011 13:14

Re: [3.1.10] highlight.js

Beitrag von ango »

Mit "einige Schwierigkeiten bei der Integration" meine ich zwei Dinge die mein Skript gegenüber der existierenden Extension korrigiert:
  • Falsches Rendering durch <br> Tags die phpBB in den Source einfügt wurde korrigiert. (=> sonst alles in .hljs-meta Tags)
    Blink-Effekt (Pagereflow) beim Seitenaufbau reduziert. Die Extension registriert ein onload Event, während mein Skript sofort nachdem das relevante html verfügbar ist die Änderungen vornimmt.
Zudem rendert mein Skript sowohl existierende [ code ] Tags, als auch neu hinzugefügte BBcodes der Form <pre><code>{TEXT}</code></pre> .
Antworten

Zurück zu „Extension Bastelstube“