Der Advanced WYSIWYG-Editor unterstützt zwei Möglichkeiten, Code in Ihren Artikeln anzuzeigen: Inline-Code und Codeblöcke.
- Inline-Code formatiert einen kurzen Ausschnitt oder Befehl innerhalb einer Textzeile, um ihn visuell von der umgebenden Prosa zu unterscheiden.
- Der Codeblock zeigt einen mehrzeiligen Codeblock als separaten Abschnitt mit Syntaxhervorhebung, einem Sprachlabel und einer Kopieroption.
Document360 verwendet Prism.js zur Syntaxhervorhebung und unterstützt eine Vielzahl von Programmiersprachen in Codeblöcken.
Empfohlene Szenarien
- Verwenden Sie Inline-Code, um innerhalb eines Satzes auf einen Variablennamen, Dateipfad, Befehl oder Parameter zu referenzieren – zum Beispiel "Setzen Sie den Wert auf
max_retries3" - Verwenden Sie einen Codeblock für mehrzeilige Skripte, API-Anfragebeispiele, Konfigurationsdateien oder Codeleser, die kopieren und ausgeführt werden müssen.
- Verwenden Sie ein benutzerdefiniertes Sprachlabel, wenn Sie eine proprietäre Skriptsprache oder ein Konfigurationsformat dokumentieren, das in der Standardliste nicht verfügbar ist
- Verwenden Sie Codeblöcke innerhalb von Tab-Elementen, um denselben API-Aufruf in mehreren Sprachen nebeneinander anzuzeigen – zum Beispiel Python, JavaScript und cURL in separaten Tabs
Inline-Code
Inline-Code wird direkt auf ausgewählten Text innerhalb eines Absatzes angewendet, ohne einen neuen Block zu erstellen.
- Wählen Sie den Text aus, den Sie als Inline-Code formatieren möchten.
- Klicken Sie in der schwebenden Symbolleiste auf das Inline-Code-Symbol oder verwenden Sie die Tastenkombination
Ctrl + E.
Der ausgewählte Text erscheint innerhalb des Satzes als Code gestaltet.
Code Block
Ein Codeblock erstellt einen eigenen Abschnitt zur Darstellung von mehrzeiligem Code mit Syntaxhervorhebung.
Um einen Codeblock einzufügen, verwenden Sie eine der folgenden Methoden:
- Klicken Sie auf das Code-Block-Symbol im Schnelleinfügemenü (erscheint, wenn ein Block leer ist)
- Drei Backticks
```eingeben und drückenEnter - Benutze den Schrägstrich-Befehl
/code blockund drückeEnter
Nach dem Einfügen eines Codeblocks:
- Klicken Sie auf den Codeblock – ein schwebendes Menü erscheint.
- Wählen Sie die gewünschte Sprache aus dem Dropdown-Menü für die Syntaxhervorhebung aus.
- Geben Sie Ihren Code in den Block ein.
Um den Block zu kopieren, klicken Sie auf das Kopieren-Symbol . Um es zu entfernen, klicken Sie auf das Löschen-Symbol .
Setzen eines benutzerdefinierten Sprachlabels: Wenn die benötigte Sprache nicht in der Liste ist, wähle im Dropdown-Menü Benutzerdefiniert , klicke auf das Bearbeiten-Symbol , gib deinen gewünschten Titel ein und wähle Aktualisieren.
Im Advanced WYSIWYG-Editor benötigt ein Codeblock immer eine Überschrift. Um die Überschrift auf der Knowledge Base-Seite auszublenden, wenden Sie benutzerdefiniertes CSS über Einstellungen > Knowledge Base-Seite > Custom CSS & JavaScript an. Dadurch wird die Überschrift in allen Codeblöcken auf der Seite verdeckt. Wenn du Codeblöcke ohne Überschrift bevorzugst, nutze stattdessen den Markdown-Editor.
Unterstützte Sprachen
Document360 unterstützt Syntaxhervorhebung für die folgenden Sprachen (unter anderem):
HTML, C#, Java, JavaScript, XML, JSON, CSS, SQL, Python, Markdown, PHP, PowerShell, Ruby und Text.
Für eine vollständige Liste siehe die von Prism unterstützten Sprachen.
Best Practices
- Verwenden Sie Inline-Code für kurze Referenzen (eine Zeile oder weniger) und Codeblöcke für längere Referenzen
- Wählen Sie immer die richtige Sprache für Ihren Codeblock aus – präzise Syntaxhervorhebung verbessert die Lesbarkeit und signalisiert den Lesern die richtige Sprache
- Füge deinem Codeblock eine beschreibende Überschrift hinzu, damit die Leser wissen, was der Code macht, bevor sie ihn lesen
- Halte Codeblöcke fokussiert – ein Block pro separatem Ausschnitt oder Beispiel; Vermeiden Sie es, nicht zusammenhängenden Code in einem einzigen Block zu kombinieren
- Halte den Code sauber und frei von Platzhalter-Kommentaren, die Fehler verursachen könnten, wenn sie direkt ausgeführt werden