markdown blok kode penekanan sintaksis reference

Markdown Code Blocks Guide: Inline Code, Fenceed Blocks, dan Syntax Highlighting

Panduan lengkap untuk blok kode Markdown. Pelajari kode inline, blok kode yang dikelilingi, sintaksis yang menyoroti pengidentifikasi bahasa, dan blok kode tersirat.

W
WordToMD Tim
·

Pemformatan kode adalah salah satu fitur terkuat Markdown. Apakah Anda mendokumentasikan fungsi, menunjukkan perintah terminal, atau menulis tutorial, sintaks kode Markdown menjaga kode secara visual berbeda, diformat dengan benar, dan (di sebagian besar platform) disorot sintaks. Panduan ini mencakup semua tentang Markdown blok kode.

Kode Inline

Bungkus cuplikan pendek atau ekspresi tunggal dalam backtick tunggal:

Use `console.log()` to print output.
Set the variable with `const x = 42;`.
The file is saved as `README.md`.

Kode inline render dalam font monospace, secara visual berbeda dari teks sekitarnya. Gunakan untuk:

  • Nama fungsi dan metode: addEventListener()
  • Nama variabel: isLoading
  • Nama file: package.json
  • Argumen perintah: --verbose
  • Ekspresi kode pendek

Jika kode inline Anda berisi backtick, gunakan backtick ganda untuk membungkusnya:

`` `backtick inside` ``

Blok Kode yang Terbengkalai

Untuk kode multi-baris, gunakan backtick triple (`) untuk membuka dan menutup blok:

```
This is a code block.
It preserves all whitespace and line breaks.
No formatting is applied inside.
```

Indentasi, jarak, dan garis baru semuanya terpelihara dengan tepat.

Penekanan sintaksis

Tambahkan pengidentifikasi bahasa setelah membuka tiga backtick untuk mengaktifkan penekanan sintaksis:

```python
def greet(name: str) -> str:
    return f"Hello, {name}!"

print(greet("World"))
```
```javascript
const greet = (name) => `Hello, ${name}!`;
console.log(greet("World"));
```
```bash
#!/bin/bash
echo "Hello, World!"
ls -la ~/Documents
```

Identifier Bahasa Umum

BahasaIdentifier (pengidentifikasi)
Pythonpython
JavaScriptjavascript or js
TypeScripttypescript or ts
HTMLhtml
CSScss
JSONjson
YAMLyaml or yml
Bash / Shellbash or sh
SQLsql
Markdownmarkdown or md
Jawajava
Cc
C++cpp
C#csharp
Pergilah.go
Tembagarust
Rubyruby
PHPphp
Swiftswift
Kotlinkotlin
Rr
PowerShellpowershell
Dockerfiledockerfile
XMLxml
TOMLtoml
HTTPhttp
Diffdiff

Blok Kode yang Termasuk

Sintaksis Markdown yang lebih tua menggunakan indentasi 4-ruang untuk blok kode:

    function oldStyle() {
        return "This is a code block";
    }

Ini CommonMark-kompatibel tetapi kurang dapat dibaca dan tidak mendukung pengidentifikasi bahasa. Sebaliknya, gunakan blok-blok yang terbengkalai (backtick tiga).

Konversi Kode dari Word Dokumen

Teks monospace di Word (Courier New, Consolas, dll.) dikonversi menjadi kode inline saat Anda menggunakan WordToMD. Multi-line code in Word converts depending on how it was formatted:

  • Paragraf font monospace → Mungkin menjadi beberapa snippet kode inline
  • Word Code gaya → Mengkonversi ke blok kode
  • Blok teks secara harfiah → Mungkin perlu pagar manual

Setelah konversi, periksa bagian kode dan tambahkan pagar yang tepat jika diperlukan:

  1. Temukan kode yang seharusnya menjadi blok
  2. Membungkusnya dengan backticks tiga
  3. Tambahkan pengidentifikasi bahasa yang sesuai

Contoh-Contoh Khusus Bahasa

Permintaan HTTP

```http
POST /api/users HTTP/1.1
Host: api.example.com
Content-Type: application/json
Authorization: Bearer TOKEN

{
  "name": "Alice",
  "email": "alice@example.com"
}
```

Terminal Komando

```bash
npm install
npm run build
npm run dev
```

Output Diff

```diff
- const oldValue = "hello";
+ const newValue = "world";
  console.log(newValue);
```

Konfigurasi YAML

```yaml
server:
  host: localhost
  port: 8080
  debug: true
database:
  url: postgresql://localhost:5432/mydb
```

Blok Kode Tertanam (Untuk Dokumentasi)

Saat mendokumentasikan Markdown itu sendiri, gunakan 4 backtick untuk membungkus blok yang berisi 3 backtick:

````markdown
```python
# This is a code block inside documentation
```
````

Dukungan Platform

PlatformKode InlineBlok-Blok yang DibentengiPenekanan sintaksis
GitHub✅✅✅
GitLab✅✅✅
Obsidian✅✅✅
GitBook✅✅✅
Notion✅✅✅
Confluence (Markdown)✅✅✅
Kode VS✅✅✅

Angka Baris

Standar Markdown tidak mendukung nomor baris dalam blok kode. Beberapa platform dan generator situs statis menambahkan ini melalui plugin:

  • Prism.js (digunakan oleh banyak SSG) add {numberLines: true} di pagar kode
  • GitHub tidak ada nomor baris asli dalam render Markdown (gunakan tampilan GitHub Blame sebagai gantinya)
  • GitBook nomor baris melalui pengaturan blok kode

Menyalin Kode dari Blok

GitHub dan banyak platform menambahkan tombol Copy ke blok kode secara otomatis. Ini adalah peningkatan rendering itu tidak memerlukan apa-apa yang khusus dalam Markdown Anda.

FAQ

Mengapa sintaks blok kode saya tidak disorot? Baik pengidentifikasi bahasa hilang atau salah eja, atau platform tidak mendukung bahasa tertentu. Periksa daftar identifier di atas.

Bagaimana saya menunjukkan backticks di dalam blok kode? Di dalam blok kode yang tertutup, backtick diperlakukan sebagai karakter harfiah. Hanya pagar tiga-backtick membutuhkan penanganan khusus.

Dokumen Word saya memiliki kode sintaksis yang disorot dengan warna-warni. Akan WordToMD melestarikan warna? Tidak Markdown blok kode tidak mempertahankan pemformatan warna. WordToMD mengubah teks menjadi blok kode; penandai sintaksis kemudian diterapkan oleh Markdown renderer berdasarkan pengidentifikasi bahasa.

Bisakah saya menonjolkan garis tertentu dalam blok kode? Standar Markdown tidak mendukung ini. Beberapa platform (seperti Astro dengan Shiki, atau Hugo) mendukung garis yang menyoroti melalui komentar: {1,3-5} setelah identifikasi bahasa.

Kesimpulan

Blok kode markdown sederhana: backtick untuk kode inline, triple backtick dengan pengidentifikasi bahasa untuk blok. Setelah mengkonversi dokumen Word dengan WordToMD, memeriksa bahwa teks monospace telah dibungkus dengan benar dalam sintaksis kode, dan menambahkan pengidentifikasi bahasa untuk penekanan sintaksis yang tepat pada platform target Anda.