Tabstopps in Visual Editor-Lösungen von Content Management Systemen wie WordPress oder Confluence

(Last Updated On: 18. August 2015)

Wenn Sie ein Blogger oder Online-Redakteur sind, der in Content Management Systemen wie Atlassien Confluence, WordPress, MediaWiki und Co desöfteren Beiträge mit Quellcode-Ausschnitten postet, nutzen Sie wahrscheinlich sehr häufig <pre>-Tags, um diesen Quellcode mit Tabstopps und Leerzeichen einzurücken, um ihn im Beitrag besser einzurücken. CMS wie beispielsweise wordpress bieten hierzu die Möglichkeit, über die Einstellung Vorformatiert Text eine kleine Box zu erzeugen, in welche eingerückter Quellcode aus einem Texteditor direkt eingefügt werden kann.

Wenn Sie bei einigen CMS Quellcode in der Visual-Editor-Ansicht einfügen, werden Sie bei manchen Content Management Systemen feststellen, dass die Einrückungen dann verloren gehen. Bei WordPress ist dies seit einigen Versionen nicht mehr der Fall, hier können Sie direkt in der Visual Editor Ansicht den eingerückten Text einfügen und die Tabstopps werden ohne Probleme übernommen.

Und auch bei Confluence können Sie unter Insert • Other macro • Code block eine Box für den Quellcode erzeugen und dort dann direkt den eingerückten Quellcode einfügen.

Damit Sie bei den anderen CMS eingerückten Quellcode erhalten, müssen Sie in die Quellcode-ansicht wechseln, also in die Ansicht, in welcher der HTML-Code angezeigt wird. Dort suchen Sie dann nach den <pre>-HTML-Tags, welche die box für den Quellcode auszeichnen, und fügen in das Innere den Quellcode an. Nun erhalten Sie eingerückten Quellcode.

So oder so: diese Lösungen sind aber nur dann wirklich akzeptabel, wenn Sie den Code, den Sie in Ihren Beiträgen dokumentieren wollen, bereits vorher in einem Texteditor oder in einer Entwicklungsumgebung vorformatiert haben.

Wenn Sie hingegen einfach nur ein paar Beispiele aus dem Bauch heraus coden wollen und die Texte direkt in der Codebox selber einrücken wollen, schauen Sie ins Leere. Denn sobald Sie die Tabulator-Taste auf der Tastatur betätigen, um dies zu tun, navigieren Sie in Ihrem Browserfenster die Links in dem Content Management System durch, anstatt den Text einzurücken.

Ein Mittel, welches für viele spontane Coding-Sessions reichen würde, ist einmal durch eine der oben geschilderten Methoden einen eingerückten Text in eine <pre>-Box einzufügen und zu schauen, wie viele Leerzeichen das Content Management System für einen Tabstopp macht – denn die Einrückung in der Code-Box wird simpel und einfach durch Leerzeichen realisiert, nicht wie im Texteditor durch „wirkliche“ Tabstopps. Das werden Sie erkennen, wenn Sie in der Codebox den Cursor mit den Pfeiltasten navigieren. Im Falle von WordPress wird ein Tabstopp standardmäßig als vier Leerzeichen interpretiert. Grundsätzlich könnten Sie also für einen Tabstopp einfach vier Leerzeichen setzen und so innerhalb eines <pre>-Blockes Ihren Code einrücken. Für größere sponante Coding-Sessions würden Sie den Code dann wahrscheinlich sowieso schon wieder in einem Texteditor vorschreiben, bevor Sie ihn in das CMS einfügen.

Nur für den Fall, dass Sie aber der Workaround mit den Leerzeichen nicht befriedigt, hier noch ein anderer kleiner Tipp: Sie können mit Textbausteinsoftware wie beispielsweise PhraseExpress ein Makro auf eine Tastenkombination wie beispielsweise Strg+Q legen und über dieses Makro dann die notwendige Anzahl an Leerzeichen eintippen lassen.

 

Wenn dir dieser Post gefallen hat, teile ihn doch auf Social Media, abonniere und verfolge mich per E-Mail, RSS-Feed, Social Media oder registriere dich auf meiner Seite. Wenn du registriert bist, like den Post bitte, wenn er dir gefallen hat!