📚

ChatGPTでコードブロック付きMarkdownをきれいに出力する

2024/11/29に公開

ChatGPTでコードブロック付きMarkdownをきれいに出力する方法

ChatGPTでコードブロックを含むMarkdownを生成すると、表示が少し崩れることはありませんか?例えば、こんな感じです。


問題例

以下の画像のように、ChatGPTが出力したMarkdownでは、コードブロック内に3つのバッククォートが含まれているせいで、思った通りに表示されていません。

表示崩れ

コードブロック付きのMarkdownを出力する場面って意外と多いですよね。この問題を解決する方法を紹介します!


解決方法

解決策としては、ChatGPTに以下のプロンプトを送るだけです。

出力はMarkdown形式で行い、Markdownのドキュメントは4つのバッククォートで囲んでください。

改善後の質問
回答

これを使えば、表示崩れの心配はなくなります!

カスタムインストラクションの活用

毎回プロンプトを送る手間を省くために、ChatGPTのカスタムインストラクション機能を使うのもおすすめです。この方法を使えば、Markdown形式の出力を常にバッククォートで囲むよう指示を保存できます。

ChatGPTにどのように応答してほしいかセクションに以下を記載します:

When you write in Markdown format, always enclose the entire Markdown document with at least four backticks (`). If the document itself contains code blocks with four or more sequential backticks (`), use a greater number of backticks to enclose the document, ensuring proper rendering without breaking the formatting.

設定例

カスタムインストラクション設定例

これを設定することで、Markdown出力が一貫して崩れないようになります。ぜひ試してみてください!


どうしてこれで解決するの?

Markdownにはちょっとした仕様があります。通常、コードブロックは3つのバッククォートで囲んで書きますが、その中でさらにコードブロックを書く場合、外側を4つのバッククォートで囲む必要があります。

実は、バッククォートの数は4つである必要はなく、どんどん増やしていくことが可能です。

これは、GitHubを始めとし、多くのMarkdown対応ツールで使えるようです。

参考

GitHub Flavored Markdown Spec

以下は具体例です。


サンプル

以下のように、コードブロック全体を4つのバッククォートで囲みます。

````markdown
```python
print("Hello, World!")
```
````

出力結果

```python
print("Hello, World!")
```

コードブロックが崩れると見た目がぐちゃっとして残念な気持ちになりますが、この方法を使えばもう安心!Markdownでの表現をストレスなく楽しめると思います。

ぜひ試してみてください!

Discussion