Inhalte schreiben

Markdown- und HTML-Formatierung

Die meisten Inhalte auf DevSite sind in Markdown geschrieben, einem Format, das für Einfachheit und Lesbarkeit in Nur-Text entwickelt wurde. DevSite konvertiert Markdown automatisch in HTML, damit es im Web angezeigt werden kann.

Eine Übersicht über die Google-spezifischen Markdown-Entsprechungen gängiger HTML-Elemente finden Sie unter go/g3mark-cheat. Die vollständige Dokumentation zu Google-Markdown, auch CommonMark genannt, finden Sie hier.

Hier einige Beispiele:

HTML Markdown
<b>bold text</b>
<strong>bold text</strong>		 **bold text**
<i>italic text</i>
<em>italic text</em>		 *italic text*
<h2>Heading 2</h2>
<h3>Heading 3</h3>		 ## Heading 2
### Heading 3
<a href="url.com">Link</a> [Link](url.com)
<p>paragraph</p> Paragraph
<ol>
  <li>Ordered list first item</li>
  <li>Second item</li>
</ol>		 1. Ordered list first item
1. Second item
1. Third item
<ul>
<li>Unordered list first item</li>
  <ul>
    <li>Nested list item</li>
  </ul>
<li>Second item</li>
</ul>		 * Unordered list first item
    * Nested item (indent 4-spaces)
* Second item

Wann sollte HTML anstelle von Markdown verwendet werden?

Für bestimmte Elemente verwenden wir kein Markdown, z. B.:

  • Include-Dateien: Alle Include-Dateien sollten HTML-Dateien sein und daher keine Elemente enthalten, die in Markdown geschrieben sind. Eine Anleitung zum Erstellen von Include-Dateien finden Sie unter Inhalte auf mehreren Seiten wiederverwenden.

  • Tabellen: Markdown-Tabellen können schwierig zu formatieren und zu verwalten sein. Daher verwenden wir HTML für Tabellen, auch in Markdown-Dateien.

  • Bilder: Wenn Sie HTML für Bilder verwenden, haben Sie mehr Flexibilität bei Bildformat und ‑platzierung. Weitere Informationen finden Sie im Leitfaden zum Veröffentlichen von DevSites unter Bilder.

  • Zippies: Zippies, auf Devsite als minimierbare Widgets bezeichnet, müssen in HTML vorliegen und in ein <div>-Tag eingeschlossen sein.

Gängige Inhaltsformate

Beachten Sie die Richtlinien für Links, um zu erfahren, wann Links im selben Tab und wann in einem neuen Tab geöffnet werden sollten. Wenn Sie einen Link in einem neuen Tab öffnen müssen, können Sie ihn auf folgende Weise formatieren:

Markdown

[Accessible content](/style/accessibility){:target="_blank"}

HTML

<a href="/style/accessibility" target="_blank">Accessible content</a>

Tabellen

Informationen zu den Arten von Tabellen, die auf DevSite angeboten werden, und dem entsprechenden HTML-Code finden Sie im DevSite-Veröffentlichungsleitfaden unter Tabellen.

Tipps:

  • Wenn Ihre Tabelle keine Rahmen haben soll, verwenden Sie class="columns".

  • Wenn Ihre Tabelle Abstände und Trennlinien haben soll (wie auf dieser Seite), verwenden Sie class="columns extra-padding" und <hr>-Tags in einer separaten Zeile zwischen den Inhaltszeilen.

Maximierbare Abschnitte

In Workspace verwenden wir die Klasse arrow-icon, um das Zippy zu gestalten. Das folgende Beispiel zeigt ein Zippy-Widget (ein minimierbares/maximierbares Widget) für Workspace:

<div>
  <devsite-expandable class="arrow-icon" id="UNIQUE_ZIPPY_ID">
    <h4 class="showalways">ZIPPY_HEADING</h4>
    <div>
      YOUR_CONTENT
    </div>
  </devsite-expandable>
</div>

Wenn Sie dieses Beispiel verwenden möchten, ersetzen Sie die folgenden Variablen:

  • UNIQUE_ZIPPY_ID: Geben Sie eine aussagekräftige und eindeutige ID ein, damit Sie direkt auf den Zippy verweisen können, z. B. direct-admin-access.
  • ZIPPY_HEADING: Geben Sie den Text ein, der dem Nutzer angezeigt werden soll, bevor er das Zippy-Element maximiert.
  • YOUR_CONTENT: Geben Sie den Inhalt ein, der dem Nutzer angezeigt werden soll, wenn das Zippy-Element maximiert wird.

Weitere Informationen zum minimierbaren Widget von DevSite finden Sie im DevSite-Veröffentlichungsleitfaden unter Widgets: Expandable.

Geteilte Inhalte einbeziehen

Wenn Sie Inhalte auf mehreren Seiten wiederverwenden möchten, können Sie Includes verwenden. Das ist die DevSite-Version der Verwendung von Snippets in mehreren Artikeln in Composer.

Eine Anleitung zum Erstellen von Include-Dateien und zum Verwenden von Includes in Ihren Inhalten finden Sie unter Inhalte auf mehreren Seiten wiederverwenden.

Überschriften benutzerdefinierte Anker hinzufügen

DevSite erstellt für jede Überschrift ein HTML-ID-Attribut. Um die Konsistenz beizubehalten, falls sich die Überschrift ändert, können Sie einer Überschrift eine benutzerdefinierte Anker-ID hinzufügen, indem Sie {:#your-id} neben dem Überschriftentext einfügen, z. B.:

## Apply filters to your search results {:#apply-filters}

Tipp: Wenn Sie automatisch benutzerdefinierte Anker-IDs für alle Überschriften in einer Datei erstellen möchten, drücken Sie Befehlstaste (\⌘) + H (Strg + H unter Windows). Vorhandene benutzerdefinierte Anker-IDs werden nicht geändert.

Weitere Informationen finden Sie im DevSite-Veröffentlichungsleitfaden für Header-IDs.