コードフォーマットは 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 |
| JavaScript | javascript or js |
| タイプスクリプト | typescript or ts |
| HTML | html |
| CSS | css |
| JSON | json |
| YAML | yaml or yml |
| バッシュ/シェル | bash or sh |
| SQL | sql |
| Markdown | markdown or md |
| ジャワ | java |
| C | c |
| C++ 言語 | cpp |
| C# (英語) | csharp |
| 行って | go |
| 腐れ | rust |
| ルビー | ruby |
| PHP | php |
| スウィフト | swift |
| コトリン | kotlin |
| R | r |
| パワーシェル | powershell |
| ドッカーファイル | dockerfile |
| XML | xml |
| TOML | toml |
| HTTP | http |
| 差分 | 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 コードスタイル → コードブロックに変換する
- 文字ブロック → 手動のフェンシングが必要かもしれない
変換後,コードセクションをチェックし,必要に応じて適切なフェンスを追加します:
- ブロックになるべきコードを見つける
- 背中を三重に包む
- 適切な言語識別子を追加する
言語特有の例
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} 言語識別子の後です.
関連ガイド
- Markdown 構文 チートシート 完全参照
- Word から API 文書 コード重量のドキュメント
- Word から GitHub Markdown GitHub 特定のコードフォーマット
結論
マークダウンコードブロックはシンプルです:インラインコードのバックティック,ブロックの言語識別子を持つトリプルバックティックです. Word ドキュメントを Word で変換した後 WordToMD, 単空テキストがコード構文に正しく包装されていることを確認します. 適切な文法ハイライトを目標プラットフォームに追加します.