Menulis konten Anda

Pemformatan Markdown dan HTML

Sebagian besar konten kami di DevSite ditulis dalam Markdown, yang merupakan format penulisan yang dirancang untuk kesederhanaan dan keterbacaan oleh manusia dalam teks biasa. DevSite secara otomatis mengonversi Markdown ke HTML untuk ditampilkan di web.

Untuk mempelajari Markdown khusus Google yang setara dengan elemen HTML umum, gunakan lembar contekan di go/g3mark-cheat. Anda dapat mengakses dokumentasi lengkap untuk Markdown Google, yang juga disebut CommonMark, di sini .

Berikut adalah beberapa contohnya:

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

Kapan harus menggunakan HTML, bukan Markdown

Ada item tertentu yang tidak kami tulis menggunakan Markdown, termasuk:

  • Sertakan file: Semua file include harus berupa file HTML dan oleh karena itu tidak boleh menyertakan elemen yang ditulis dalam Markdown. Untuk panduan tentang cara membuat file include, lihat Menggunakan kembali konten di seluruh halaman.

  • Tabel: Tabel Markdown sulit diformat dan dikelola, jadi kami menggunakan HTML untuk tabel, bahkan dalam file Markdown.

  • Gambar: Penggunaan HTML untuk gambar memberikan fleksibilitas yang lebih besar untuk format dan penempatan gambar. Lihat panduan Penerbitan DevSite untuk Gambar.

  • Zippies: Zippies, yang dikenal sebagai widget yang dapat diluaskan di Devsite, harus dalam HTML dan dibungkus dalam tag <div>.

Format konten umum

Ikuti pedoman link untuk mengetahui kapan harus membuka link di tab yang sama dan kapan harus membuka link di tab baru. Jika perlu membuka link di tab baru, Anda dapat memformat link dengan cara berikut:

Markdown

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

HTML

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

Tabel

Untuk mengetahui jenis tabel yang ditawarkan Devsite dan HTML yang sesuai, lihat panduan Penerbitan DevSite untuk Tabel.

Tips:

  • Jika Anda ingin tabel tidak memiliki batas, gunakan class="columns"

  • Jika Anda ingin tabel memiliki padding dan garis pemisah (seperti halaman ini) gunakan class="columns extra-padding" dan tag <hr> dalam baris terpisah di antara baris konten.

Bagian yang dapat diperluas

Untuk Workspace, kita menggunakan class arrow-icon untuk menata gaya zippy. Berikut adalah contoh widget yang dapat dilipat (widget yang dapat diluaskan) untuk Workspace:

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

Untuk menggunakan sampel ini, ganti variabel berikut:

  • UNIQUE_ZIPPY_ID: Masukkan ID yang deskriptif dan unik agar Anda dapat langsung mengarahkan ke zippy, misalnya, direct-admin-access.
  • ZIPPY_HEADING: Masukkan teks yang harus dilihat pengguna sebelum meluaskan zippy.
  • YOUR_CONTENT: Masukkan konten yang harus dilihat pengguna saat zippy diperluas.

Untuk mengetahui informasi selengkapnya tentang widget yang dapat diluaskan di DevSite, lihat panduan Penerbitan DevSite, Widget: Dapat Diluaskan .

Menyertakan konten yang dibagikan

Untuk menggunakan kembali konten di beberapa halaman, Anda dapat menggunakan include, yang merupakan versi DevSite dari penggunaan cuplikan di beberapa artikel di Composer.

Untuk panduan tentang cara membuat file include dan menggunakan include dalam konten, lihat Menggunakan kembali konten di seluruh halaman.

Menambahkan link kustom ke judul

DevSite membuat atribut ID HTML untuk setiap header. Untuk menjaga konsistensi jika judul berubah, Anda dapat menambahkan ID anchor kustom ke judul dengan menambahkan {:#your-id} di samping teks judul, misalnya:

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

Tips: Untuk membuat ID penautan kustom secara otomatis untuk semua judul dalam file, tekan Command (\⌘) + H (Ctrl + H di Windows). ID penanda kustom yang ada tidak akan diubah.

Untuk mengetahui informasi selengkapnya, lihat panduan publikasi DevSite untuk ID Header.