引用文とコードブロック
Updated
2021/8/8 10:42
Author
Jumpei Ikegamiorder
4
Markdownで、引用文やコードブロックを表示する方法を紹介します。
引用文
ある文章を引用文として表示するには、すべての行の行頭に「
>（だいなり） + 半角スペース」を付加します。Markdown
↑esaでの引用文表示
変換後のHTMLは、
blockquoteタグに対応します。ちなみに、引用文の記法を二重にすることで、引用文中にさらに引用文を含めることもできます。
Markdown
↑esaでの二重引用文表示
なお、一重引用文と二重引用文との間は一行あけないと意図通りに表示されないことがあります。その場合は、間に改行をはさみ、その空の行の行頭に「
> 」を付けましょう。
コードブロック
コードブロックとは、プログラムのコードを見やすく表示するためのものです。
ある文章をコードブロックとして表示するには、文章全体を「
```（バッククォート3つ）」で囲みます。Markdown
↑esaでのコードブロック表示
変換後のHTMLは、
preタグ（preformatted text、整形済みテキスト）の中にcodeタグが入ったものに対応します。ちなみに、Markdownツールによっては、開始の「
```」の直後にコードに使われている言語名またはその略称（たとえばjavascriptとかjsとか）を記述することで、その言語を解釈して見やすく表示してくれる場合があります。（コードを見やすく表示する機能のことを、シンタックスハイライトと呼びます。）Markdown
↑esaでのコードブロック表示（インタックスハイライト有り）
引用文とコードブロックの使い分け
引用文は、地の文と区別したい文章に対して広く使われます。コードブロックは、本来はプログラミング言語などで書かれたコードを表示するためのものです。しかしながら実際のMarkdownドキュメントにおいては、日本語の文章を地の文と区別するためにコードブロックが使われている場合もよくあります。
一般的に、引用文とコードブロックには次のような違いがあります。
- 表示されるときのスタイルが異なる
- 特にコードブロックは、文が横幅を超えると横にスクロールしないといけなくなる
- コードブロックの方が、文章の前後を「
```」で囲むだけなので記述が楽
↑上: 引用文、下: コードブロック
基本的には、日本語の文章に対しては引用文を使った方が実際の用途にも則していますし、長い文もスクロール無しで全て表示されるので、望ましいことが多いです。
ただし、やはり複数行におよぶ引用文は行頭の「
2. HTMLとJavaScriptで、入力された全ての行の先頭に> をつける変換ツールをつくる2021/6/20 5:422021/8/8 8:44> 」を全ての行に付けるのが面倒です。そこで、チュートリアルではそのテキスト操作を一発で実現するテキスト変換ツールを作ることができます。ぜひやってみてください。
↑Markdown引用文生成ツール