[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.
ango
Mitglied
Beiträge: 11
Registriert: 03.02.2011 13:14

[3.1.10] highlight.js

Beitragvon ango » 17.05.2017 03:46

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: 15279
Registriert: 23.04.2003 08:22
Wohnort: Xanten
Kontaktdaten:

Re: [3.1.10] highlight.js

Beitragvon Dr.Death » 17.05.2017 07:23

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

Beitragvon ango » 17.05.2017 14:22

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> .


Zurück zu „Extension Bastelstube“