DeuAq.com >> Leben >  >> Elektronik

Syntaxhervorhebung in Google Docs: Code professionell formatieren – Anleitung für Entwickler

Als Entwickler wissen Sie: Syntaxhervorhebung macht Quellcode lesbar und übersichtlich. Texteditoren wie Notepad++ punkten hier mit Farben und Schriftarten für Keywords und Strukturen. Google Docs eignet sich dank Cloud und Kollaboration hervorragend für Teamarbeit – doch native Syntax-Highlighting fehlt. Kein Problem: Mit Add-ons und Web-Tools bringen Sie Farbe in Ihren Code.

Syntaxhervorhebung in Google Docs: Code professionell formatieren – Anleitung für Entwickler

In dieser praxisnahen Anleitung, basierend auf jahrelanger Erfahrung mit Google Workspace, zeige ich Ihnen bewährte Methoden, um Syntaxhervorhebung in Google Docs zu integrieren. Ob Add-ons oder externe Highlighter: So bleibt Ihr Dokument professionell.

Code Pretty: Schnelle Syntaxformatierung

Code Pretty ist ein zuverlässiges Add-on für Google Docs. Es hebt ausgewählten Code automatisch hervor – ohne komplizierte Einstellungen. Installieren Sie es kostenlos über Google Workspace Marketplace und erteilen Sie die Berechtigungen.

Öffnen Sie Ihr Dokument, gehen Sie zu Erweiterungen > Code Pretty. Kopieren Sie diesen JavaScript-Beispielcode (Strg+C) in Docs:

<!DOCTYPE html>
<html>
<body>

<h2>Was kann JavaScript?</h2>

<p>JavaScript kann HTML-Attribute ändern.</p>
<p>In diesem Fall ändert JavaScript das src (source)-Attribut eines Bildes.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Schalte das Licht ein</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Schalte das Licht aus</button>

</body>
</html>

Fügen Sie ihn ein (Strg+V), markieren Sie den Code und wählen Sie Erweiterungen > Code Pretty > Auswahl formatieren. Ergebnis: Saubere Hervorhebung, wie im Screenshot.

Syntaxhervorhebung in Google Docs: Code professionell formatieren – Anleitung für Entwickler

Passen Sie die Schriftgröße an: Erweiterungen > Code Pretty > Einstellungen.

Syntaxhervorhebung in Google Docs: Code professionell formatieren – Anleitung für Entwickler

Code Blocks: Mehr Themen und Flexibilität

Code Blocks übertrifft Code Pretty mit diversen Themes. Installieren Sie es kostenlos aus dem Marketplace.

Fügen Sie den JavaScript-Code wie oben ein. Starten Sie die Seitenleiste via Erweiterungen > Code Blocks > Starten.

Syntaxhervorhebung in Google Docs: Code professionell formatieren – Anleitung für Entwickler

Markieren Sie den Code (ohne Leerraum), wählen Sie JavaScript und ein Thema. Klicken Sie Formatieren – perfekte Hervorhebung!

Syntaxhervorhebung in Google Docs: Code professionell formatieren – Anleitung für Entwickler

Externe Highlighter wie TextMate nutzen

Für maximale Kontrolle: Web-Apps wie TextMate. Kopieren Sie Code hinein, wählen Sie Sprache und Theme, klicken Highlight.

Syntaxhervorhebung in Google Docs: Code professionell formatieren – Anleitung für Entwickler

Kopieren Sie die Vorschau (Strg+C) und fügen Sie sie in Docs ein (Strg+V).

Syntaxhervorhebung in Google Docs: Code professionell formatieren – Anleitung für Entwickler

Mit diesen Tools machen Sie Google Docs zum vollwertigen Code-Editor. Kein Desktop-Editor nötig! Haben Sie eigene Tipps? Teilen Sie sie in den Kommentaren.