Tag: WordPress

Categories
Blog Development

Mermaid

Vor einigen Wochen hat ein Kollege in einem internen TecTalk das Tool Mermaid vorgestellt und mein Interesse geweckt.

Mit Mermaid kann man Diagramme erstellen. Das können andere Tools auch, aber Mermaid verfolgt einen eigenen Ansatz: Während andere Tools Diagramme erzeugen, die zB als Bilder (png, jpeg, ...) exportiert und so in anderen Dokumenten verwendet werden können, generiert Mermaid die Diagramme aus Code/Text heraus.

Mermaid
Generate diagrams from markdown-like text.

GitHub - mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

Dadurch, dass die Diagramme aus Code generiert werden, sind sie sehr leicht anpassbar und können beispielsweise in der Projekt Readme verwendet werden, ohne dass erst das Diagramm in einem eigenen Tool bearbeitet, exportiert, in das Projekt kopiert und in der Readme verlinkt werden muss.

-> "Documentation as Code"

Homepage von Mermaid

GitHub von Mermaid

Live Editor um direkt online loslegen zu können

Klingt auf jeden Fall sehr interessant, auf diese Weise etwas schnell grafisch dokumentieren zu können.

Ich werde die Integration in WordPress, GitHub und Eclipse ansehen.

Beispiel

Diesen Code:

Beispielcode

wandelt Mermaid in dieses Diagramm um:

Bild eines Mermaid-Diagrammes

Das Beispiel ist aus dem Live Editor von Mermaid.

WordPress

Die Auswahl an WordPress Plugins für Mermaid ist überschaubar:

Aufgrund der Anzahl aktiver Installationen entscheide ich mich für ein Plugin von Terry Lin. Ich habe erst überlegt, nur das reine Mermaid Plugin zu nehmen, mich dann aber für den kompletten Markdown Editor mit Mermaid Unterstützung entschieden, denn es könnte eine gute Ergänzung zu meinen Code Mirror Block Plugin sein.

WP Githuber MD installiert. Getestet. Deinstalliert.
Problem: Mit dem Plugin kann man NUR noch den Markdown Editor verwenden und nicht mehr den Live Editor von WordPress.
Ich möchte aber gezielt einzelne Markdown bzw. Mermaid Blöcke in meine Seite einbinden und ansonsten den bequemen WYSIWYG Editor verwenden.
Und während ich das hier im WP Editor schreibe, merke ich, dass ich das Plugin noch gar nicht deinstalliert habe und trotzdem kein Markdown verwenden muss. Nach einiger Suche finde ich dann die Möglichkeit, Markdown ein- bzw. auszuschalten. Allerdings geht das immer nur für den ganzen Post. Ich möchte das aber nur für einzelne Blöcke verwenden und nicht deswegen den ganzen Post im Texteditor schreiben müssen.

Nächster Test: WP Mermaid

WP Mermaid is smart enough that loads mermaid.js only when your posts contain Mermaid syntax, by detecting the use of shortcode and block. So it will not be loaded on your website everywhere.

https://www.commoninja.com/discover/wordpress/plugin/wp-mermaid

WP Mermaid Plugin installiert, neuen WP Mermaid Block hinzugefügt, in diesen den Code von der Live Seite hineinkopiert und so sieht es dann aus:

graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car]

Funktioniert. Schnell. Einfach. Funktional.

Perfekt, das wollte ich. Plugin bleibt installiert.

GitHub

Wie funktioniert es in GitHub?
Dieser Blogeintrag verrät es: Include diagrams in your Markdown files with Mermaid

Auf die GitHub Seite, eine README.md eines Projektes im Browser im Editor geöffnet, in Edit file den Code eingegeben und im Preview das Diagramm angesehen.

Eclipse

In meinem Eclipse habe ich noch keinen Markdown Editor, wenn ich eine .md Datei öffnen möchte, erscheint der Hinweis:

Da ich bisher selten Markdown verwendet habe, habe ich das ignoriert, auf die Vorschau verzichtet und im Texteditor gearbeitet.

Ich vermute, dass ich Mermaid nur in Markdown Dateien verwenden kann, daher muss ich einen passenden Editor suchen.

Bisher war übrigens ein Markdown Editor in Eclipse enthalten, aber im Release 2022-06 wurde er irrtümlich entfernt.
Über Install New Software ist Mylyn WikiText schnell nachinstalliert.

Code
Preview

Der Markdown Editor funktioniert, aber leider Mermaid nicht.

Kein Mermaid Support in Eclipse?
Kann ich mir eigentlich nicht vorstellen, aber ich konnte kein Plugin und keine Anleitung finden.
Ich belasse es erstmal dabei, zur Not erstelle ich die Diagramme online und sehe sie mir dann in GitHub an bis ich eine Lösung für Eclipse gefunden habe.

UPDATE

Das WP Mermaid Plugin scheint nicht richtig zu funktionieren, denn während es im Editor Modus so aussieht, wie es soll, sieht es bei "normalen" Aufruf der Seite verunglückt aus:

Und so sieht es im Editor aus:

Das Problem ist bekannt:

UPDATE 2

Heute (07.06.23) habe ich das WP Mermaid Plugin auf Version 1.0.2 geupdated.

So sieht es jetzt im Editor im Bearbeiten-Modus aus:

Mermaid Diagramm bearbeiten

Und so sieht es in der normalen Ansicht aus:

Mermaid Diagramm in der normalen Ansicht

Jetzt scheint es also wirklich zu funktionieren! 🥳

Categories
Blog

Real Bug

In my second Blogpost I wrote about a bug, that was not a bug, but then I had to figure out, that there is a bug.

The syntax hightlighting is working while editing a blogpost or viewing it as single post. But not on the home page. To enable it on the home page I had to change the 'Enable Code Block on Home Page' setting. Works fine.

I wrote my second Blogpost about this and then the syntax highlighting was gone again.

I disabled the second post: The syntax highlighting of the fist post was there again.
I enabled the second post again: The syntax highlighting of the fist post was gone :'(

Next test:
I added block of code in my second post.
The code of the second post was highlighted on the Home Page. And also the code of the first post on the Home Page!

I removed the block of code from my second post and added this cool piece of code to this post:

10 PRINT "Hello World"
20 GOTO 10

Now the syntax hightlighting works on home page for this (third) post and the first post.
As long as the first post on the home pages has a code block, the code blocks of all posts on the home page will work.

So if you see an post on my home page without syntax highlighting, just wait until I write a new post with a piece of code or open the single post page.

Categories
Blog

WordPress Blog

Test

I want to start a blog to note down some development stuff I do, therefore I want to test, if WordPress might be a good choice to quickly and easily setup an own blog.

Testing WordPress is pretty easy if you can use Docker.
There is a good documentation how you can do this.
In short: Only create one docker-compose file and start it up.

cd my_wordpress
nano docker-compose.yml
docker-compose up -d &
version: '3.3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
       WORDPRESS_DB_NAME: wordpress
volumes:
    db_data: {}

Just open http://localhost:8000 to create a user and start testing WordPress.

I tried the Code Syntax Block Plugin first, but then I was more satisfied with the CodeMirror Blocks Plugin.

Installation

Create sub-domain ingo.kaulbach.de, install WordPress with CodeMirror Blocks Plugin, Sample Content deleted. Done 🙂

As last part of installation I added a "K" graphic from Icons8 as favicon.