HCL Connections bietet mit TinyMCE einen modernen Editor, der auch Symtax-Hervorhebung für Programmcode unterstützt. Dies ist sehr praktisch, um beispielsweise Dokumentationen in einem Wiki zu erstellen. Zur Hervorhebung wird die mächtige quelloffene Bibliothek PrismJS verwendet.
Deren Potenzial lässt sich standardmäßig leider nicht nutzen: Ab Werk steht Syntax-Highlighting nur für C, C++, C#, Java, JavaScript, CSS, PHP, Python und Ruby angeboten. Dies sind zwar gebräuchliche Sprachen. Doch in einem Wiki werden verschiedene Dinge dokumentiert: Mal ein Ausschnitt aus einem Dockerfile, eine Nginx Konfigurationsdirektive oder ein beispielhafter JSON-Datensatz. Bei Datenbanken könnte man eine SQL-Abfrage dokumentieren wollen. Je nach eingesetzter Technologie könnte man diese Liste noch deutlich weiter führen. Daher ist hier in meinen Augen Vielfältigkeit wichtig und sinnvoll.
Alle von PrismJS unterstützten Sprachen nutzen
Wie mächtig PrismJS ist, lässt sich an der Zahl von unterstützten Sprachen deutlich: Über 200 sind es an der Zahl, darunter auch alte Sprachen oder Exoten. Im Grunde muss nur die jeweilige Komponente geladen werden. Sie enthält Regeln und Muster, welche Codebestandteile wie hervorgehoben werden sollen. Leider lädt Connections dies nur für die oben genannten Sprachen. Und es existiert derzeit keine offizielle Möglichkeit, um zusätzliche Sprachen laden zu können. Allerdings kann man mit etwas Aufwand die JavaScript-Dateien entsprechend erweitern.
Das Highlighting in Connections ist in zwei Teile aufgegliedert: Zum einen die Editor-Ansicht, während eine Wiki-Seite im Editor bearbeitet wird. Hier kommt direkt prism.js zum Einsatz. Zusätzlich gibt es noch eine lesende Ansicht beim Aufruf eines Artikels, ohne den Bearbeiten-Knopf zu drücken.
Voraussetzungen und Vorbereitung
Komponenten für Sprachen herunterladen
Zunächst müssen wir die JavaScript-Dateien herunterladen, welche die Syntax-Regeln für die gewünschte Sprache erhalten. Da Connections derzeit derzeit eine ältere Version 1.18 einsetzt, sollten wir diese nicht direkt aus dem GitHub-Repository laden. Der dortige Stand entspricht bereits v1.20. Um Konflikte zu vermeiden empfehle ich, die Dateien der entsprechenden Version von einem CDN zu laden: Highlighting-Dateien für V1.18 auf JsDelivr.
Beispielhaft möchten wir Docker zum Highlighting von Dockerfiles integrieren. Hierfür laden wir die Datei prism-docker.js vom oben verlinkten CDN herunter. Ihr Inhalt muss später im TinyMCE-Bundle eingefügt werden.
Editor-JAR entpacken
Im Folgenden wird von einer Connections 6.5.1 Installation ausgegangen. TinyMCE ist bereits entsprechend der Dokumentation eingerichtet und aktiviert, sodass der Editor genutzt werden kann.
Auf dem WebSphere-Server navigieren wir in ${PROVISION_PATH}/webresources, um die Jar-Datei des TinyMCE-Editors zu entpacken. Im Folgenden Artikel wird hierfür /opt/IBM/shared/provision/webresources/ verwendet.
cd /opt/IBM/shared/provision/webresources/
unzip tiny.editors.connections_4.2.1.1.jarDie JS-Dateien befinden sich nun im Unterordner resources, mit denen wir im Folgenden arbeiten werden.
Lesende Ansicht ohne Editor
Die Datei resources/render/prism.js mit einem Texteditor öffnen, etwa vim
vim resources/render/prism.jsund den Inhalt der heruntergeladenen JS-Datei prism-docker.js ans Ende einfügen.
Highlighting im Ediermodus des Editors
Öffne die Datei resources/tinymce/tinymce-bundle.min.js mit einem Texteditor (vim) und suche nach Prism.languages.csharp=
In vim dazu folgendes eintippen:
/Prism.languages.csharp=Vor dieser Zeichenkette steht eine öffnende, geschweifte Klammer {. Zwischen der Klammer und Prism.languages.csharp= muss der Inhalt der Komponente zum Highlighting eingefügt werden. In diesem Beispiel also der Datei prism-docker.js.
Neue Sprache im Editor anbieten
Nach diesen beiden Änderungen sind die Syntax-Regeln in Connections verfügbar. Allerdings stehen diese dadurch nicht automatisch im Editor zur Auswahl, wenn man auf Codebeispiel klickt. Hierzu muss man die config.js Datei im Verzeichnis ${SHARED_DIRECTORY}/customization/javascript/tiny/editors/connections bearbeiten.
Mit dem Array externalPlugins können Plugins überschrieben werden. Durch Überschreiben des Codesample-Plugins (verantwortlich für das Syntax-Highlighting) lässt sich ein Array der zur Verfügung stehenden Sprachen setzen. Dort inkludieren wir Docker.
Beispiel:
externalPlugins: [{
name: "codesample",
url: "/connections/resources/web/tiny.editors.connections/tinymce/plugins/codesample/plugin.min.js",
settings: {
codesample_global_prismjs: true,
codesample_languages: [
{ text: 'C', value: 'c' },
{ text: 'C#', value: 'csharp' },
{ text: 'C++', value: 'cpp' },
{ text: 'CSS', value: 'css' },
{ text: 'Dockerfile', value: 'docker' },
{ text: 'JavaScript', value: 'javascript' },
{ text: 'Java', value: 'java' },
{ text: 'PHP', value: 'php' },
{ text: 'Python', value: 'python' },
{ text: 'Ruby', value: 'ruby' },
{ text: 'Ruby', value: 'ruby' }
]
}
}Editor-Jar neu packen und Anwendungen neu starten
Damit die Änderungen an den JavaScript-Dateien von WebSphere geladen werden, muss man sie neu packen.
sudo zip -r tiny.editors.connections_4.2.1.1.jar resourcesAllerdings lädt WebSphere diese Jar-Dateien nur beim Start. Daher ist ein Neustart der Common-Anwendung in der ISC notwendig. Darüber hinaus auch jede Anwendung, worin der Editor verwendet wurde. Testet man beispielsweise in Wikis, muss also auch Wikis neu gestartet werden.
Das neue Highlighting ist nicht nutzbar?
Wichtig zu wissen: Seit CR1 wird das Highlighting nicht mehr On-the-fly beim Laden der Seite generiert. Stattdessen scheint TinyMCE beim speichern PrismJS aufzurufen. Das generierte HTML zum Highlighting wird im Quelltext des Editors gespeichert. Änderungen in der lesenden Ansicht werden daher erst sichtbar, wenn man auf Bearbeiten klickt und die Seite erneut speichert!