メインコンテンツまでスキップ

コードブロック付きMarkdownファイルの作成

ヒント

Markdownの適切にフォーマットされたコードブロックは、ドキュメントの可読性と保守性を向上させます。

基本的なコードブロック​

インラインコード​

インラインコードにはシングルバッククォートを使用します：

  • 単語：variable
  • 複数の単語：function parameter
  • 記号を含む：npm install package-name

フェンスドコードブロック​

複数行のコードにはトリプルバッククォートを使用します：

これは基本的なコードブロックです
シンタックスハイライトはありません

言語固有のハイライト​

開始バッククォートの後に言語名を追加します：

const greeting = 'Hello, World!';
console.log(greeting);
def greet(name):
    print(f"Hello, {name}!")

高度なフォーマット​

行番号​

一部のMarkdownプロセッサは行番号をサポートしています：

// この行はハイライトされます
const x = 1;
// これらの行はハイライトされます
// これも同様です
const y = 2;

タイトルバー​

コードブロックにタイトルを追加できます：

app.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

差分ブロック​

コードの変更を差分構文で表示：

- const oldCode = '削除される';
+ const newCode = '追加される';
  const unchanged = '変更なし';

MDXの機能​

インタラクティブなコードブロック​

// JavaScriptの例
function add(a, b) {
  return a + b;
}

ライブコード例​

function Button() {
  return (
    <button onClick={() => alert('クリックされました！')}>
      クリックしてください
    </button>
  );
}

一般的な言語​

Web開発​

index.html
<!DOCTYPE html>
<html>
<head>
    <title>例</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>
styles.css
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}
app.ts
interface User {
    name: string;
    age: number;
}

const user: User = {
    name: "John",
    age: 30
};

バックエンド開発​

Main.java
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
query.sql
SELECT users.name, orders.order_date
FROM users
JOIN orders ON users.id = orders.user_id
WHERE orders.status = 'completed';

ベストプラクティス​

1. 一貫したフォーマット​

✅ 推奨：

# タイトル

## セクション

\```javascript
// コードはここに
\```

❌ 非推奨：

#タイトル
##セクション
\```javascript
//コードはここに
\```

2. 明確な言語指定​

✅ 推奨：

\```python
def example():
    pass
\```

❌ 非推奨：

\```
def example():
    pass
\```

3. 適切なインデント​

✅ 推奨：

- リストアイテム
  \```javascript
  const x = 1;
  \```

❌ 非推奨：

- リストアイテム
\```javascript
const x = 1;
\```

特殊なケース​

シェルコマンド​

コマンドライン指示の場合：

# 出力付きのコマンド
$ npm install package
Installing package...
Done!

環境変数​

.env
API_KEY=your_api_key_here
DB_HOST=localhost
DB_PORT=5432