markdown コードブロック シンタックス・ハイライト reference

Markdown コードブロックガイド:インラインコード,フェンスのブロック,シンタックスハイライト

マークダウンコードブロックの完全なガイドです インラインコード,フェンスのコードブロック,シンタックスで言語識別子を強調するコードブロック,インデントコードブロックを学びます.

W
WordToMD チーム
·

コードフォーマットは Markdown の最も強力な機能の1つです. Markdown コードシンタクスは 視覚的に異なるコードを保持します (ほとんどのプラットフォームでは) 構文が強調されています. このガイドでは Markdown コードブロック.

インラインコード

短いスニッペットまたは単一の表現を単一のバックティックに包む:

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

インラインコードは,周囲のテキストから視覚的に異なる単一空間フォントでレンダリングします. 使用する:

  • 機能とメソッド名: addEventListener()
  • 変数名: isLoading
  • ファイル名: package.json
  • 命令の引数: --verbose
  • ショートコード表現

このコードの内側にはバックティックが含まれている場合,ダブルバックティックを使用してそれを包むことができます.

`` `backtick inside` ``

囲まれたコードブロック

多行コードの場合,ブロックを開閉するために三重バックティック (`) を使用します.

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

挿入,間隔,そして新線は全て正確に保存されています.

シンタックス・ハイライト

シンタクスのハイライトを有効にするために,開く3回目バックティックの後に言語識別子を追加します.

```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
```

共通言語識別子

言語識別子
パイソンpython
JavaScriptjavascript or js
タイプスクリプトtypescript or ts
HTMLhtml
CSScss
JSONjson
YAMLyaml or yml
バッシュ/シェルbash or sh
SQLsql
Markdownmarkdown or md
ジャワjava
Cc
C++ 言語cpp
C# (英語)csharp
行ってgo
腐れrust
ルビーruby
PHPphp
スウィフトswift
コトリンkotlin
Rr
パワーシェルpowershell
ドッカーファイルdockerfile
XMLxml
TOMLtoml
HTTPhttp
差分diff

インデントされたコードブロック

古い Markdown 構文では,コードブロックに 4 スペースのインデントを使用しています.

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

これは CommonMark と互換性があるが,読解性が低く,言語識別子をサポートしていない. その 代わりに 囲い た ブロック (三つ の バックスティック) を 用い て ください.

Word ドキュメントからコード変換

Word (Courier New, Consolas, etc.) の単一空間テキストは,使用時にインラインコードに変換されます. WordToMD. Multi-line code in Word converts depending on how it was formatted:

  • モノスペースフォント段落 → 複数のインラインコードスニペットになる可能性があります
  • Word コードスタイル → コードブロックに変換する
  • 文字ブロック → 手動のフェンシングが必要かもしれない

変換後,コードセクションをチェックし,必要に応じて適切なフェンスを追加します:

  1. ブロックになるべきコードを見つける
  2. 背中を三重に包む
  3. 適切な言語識別子を追加する

言語特有の例

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"
}
```

ターミナルコマンド

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

差出力

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

YAML 設定

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

嵌入したコードブロック (ドキュメントのために)

Markdown を文書化する際に,バックティック3つを含むブロックを包むために4つのバックティックを使用します.

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

プラットフォームサポート

プラットフォームインラインコード囲まれた ブロックシンタックス・ハイライト
GitHub✅✅✅
GitLab (ギットラボ)✅✅✅
Obsidian✅✅✅
GitBook✅✅✅
Notion✅✅✅
Confluence (Markdown)✅✅✅
VS コード✅✅✅

ライン番号

標準 Markdown はコードブロックの行番号をサポートしていません. プラグインを介して追加します.

  • Prism.js 追加 {numberLines: true} コードフェンスで
  • GitHub Markdown でネイティブライン番号がない (代わりに GitHub Blame ビューを使用)
  • GitBook コードブロック設定による行番号

ブロックからコードをコピーする

GitHubと多くのプラットフォームは,コードブロックに自動的に"コピー"ボタンを追加します. これはレンダリングの強化です 特別なことは何も要しません

FAQ

なぜ私のコードブロックの構文がハイライトされていないのか? 言語識別子は欠けているか 綴り間違いがあるか プラットフォームは特定の言語をサポートしていないかです 上記の識別子リストをチェックしてください.

コードブロック内のバックタックを表示するには? バックティックは文字として扱われます 文字は文字として扱われます 特殊な取り扱いが必要とするのは 背中が3つあるフェンスだけです

私の Word ドキュメントには,色々なシンタックスでハイライトされたコードがありました. 顔の色は保たれるか? Markdown コードブロックは色格付けを保存しない. WordToMDはテキストをコードブロックに変換します. シンタクスのハイライトは Markdown レンダーによって言語識別子に基づいて適用されます.

コードブロック内の特定の行をハイライトできますか? 標準 Markdown はこれをサポートしていません. コメントを通じて強調する支援ライン: {1,3-5} 言語識別子の後です.

結論

マークダウンコードブロックはシンプルです:インラインコードのバックティック,ブロックの言語識別子を持つトリプルバックティックです. Word ドキュメントを Word で変換した後 WordToMD, 単空テキストがコード構文に正しく包装されていることを確認します. 適切な文法ハイライトを目標プラットフォームに追加します.