ハック | Markdown ガイド

概要

Markdown を使用するほとんどの人は、基本および拡張構文要素でニーズを満たすことができます。しかし、Markdown を長く使用していると、どうしても必要な機能がサポートされていないことに気付くでしょう。このページでは、Markdown の制限を回避するためのヒントとコツを紹介します。

ヒント: これらのハックは、Markdown アプリケーションで動作することを保証するものではありません。これらのハックを頻繁に使用する必要がある場合は、Markdown 以外のものを使用して記述することを検討してください。

下線

下線付きテキストは、Web ライティングではあまり見かけません。おそらく、下線付きテキストはリンクとほぼ同義だからでしょう。しかし、論文やレポートを書いている場合は、単語やフレーズに下線を引く必要があるかもしれません。Bear や Simplenote のようなアプリケーションでは下線付きテキストをサポートしていますが、Markdown はネイティブでは下線をサポートしていません。Markdown プロセッサが HTML をサポートしている場合は、<ins> HTML タグを使用して、ドキュメント内のテキストに下線を引くことができます。

Some of these words <ins>will be underlined</ins>.

レンダリングされた出力は次のようになります

これらの単語の一部は下線付きになります。

インデント（タブ）

タブと空白は Markdown では特別な意味を持ちます。末尾の空白を使用して改行を作成し、タブを使用してコードブロックを作成できます。しかし、昔ながらの方法で、タブキーを使用して段落をインデントする必要がある場合はどうでしょうか？Markdown には、簡単な方法がありません。

最善の策は、インデントをサポートする Markdown エディターを使用することかもしれません。これは、デスクトップパブリッシング指向のアプリケーションでは一般的です。たとえば、iA Writer では、アプリケーションの設定でエディターのインデント設定をカスタマイズできます。また、レンダリングされたドキュメントがインデントも含めて期待どおりに表示されるように、テンプレートのカスタマイズオプションも提供しています。

もう 1 つの選択肢は、Markdown プロセッサが HTML をサポートしている場合、改行しないスペースの HTML エンティティ（ ）を使用することです。これは、扱いにくくなる可能性があるため、最後の手段とするべきでしょう。基本的に、Markdown ソースのすべての   は、レンダリングされた出力ではスペースに置き換えられます。そのため、段落の前に   を 4 つ配置すると、段落は 4 つのスペースでインデントされているように見えます。

&nbsp;&nbsp;&nbsp;&nbsp;This is the first sentence of my indented paragraph.

レンダリングされた出力は次のようになります

これは、インデントされた段落の最初の文です。

中央揃え

テキストを中央揃えする機能は、論文やレポートを作成する際に不可欠です。残念ながら、Markdown にはテキスト配置の概念がありません（表を使用する場合を除く）。幸いなことに、使用できる HTML タグがあります：<center>。Markdown プロセッサが HTML をサポートしている場合は、中央揃えしたいテキストをこれらのタグで囲むことができます。

<center>This text is centered.</center>

レンダリングされた出力は次のようになります

このテキストは中央揃えです。

<center> HTML タグは技術的にはサポートされていますが、公式には非推奨となっています。これは、今のところ動作しますが、使用すべきではないことを意味します。残念ながら、純粋な HTML の代替手段はありません。CSS の代替手段のいずれかを使用してみることもできます。すべての Markdown アプリケーションが CSS をサポートしているわけではありませんが、使用しているアプリケーションが CSS をサポートしている場合は、<center> タグの代わりに次の方法があります。

<p style="text-align:center">Center this text</p>

Markdown アプリケーションでこれがサポートされている場合、出力は次のようになります

このテキストを中央揃え

色

Markdown ではテキストの色を変更することはできませんが、Markdown プロセッサが HTML をサポートしている場合は、<font> HTML タグを使用できます。color 属性を使用すると、色の名前または 16 進数の #RRGGBB コードを使用してフォントの色を指定できます。

<font color="red">This text is red!</font>

レンダリングされた出力は次のようになります

このテキストは赤です！

<font> HTML タグは技術的にはサポートされていますが、公式には非推奨となっています。これは、今のところ動作しますが、使用すべきではないことを意味します。残念ながら、純粋な HTML の代替手段はありません。CSS の代替手段のいずれかを使用してみることもできます。すべての Markdown アプリケーションが CSS をサポートしているわけではありませんが、使用しているアプリケーションが CSS をサポートしている場合は、<font> タグの代わりに次の方法があります。

<p style="color:blue">Make this text blue.</p>

Markdown アプリケーションでこれがサポートされている場合、出力は次のようになります

このテキストを青にします。

Markdown ファイルに、レンダリングされた出力に*表示されない*文を記述する必要がある場合があります。これらのコメントは、基本的に非表示のテキストです。ドキュメントの作成者には表示されますが、Web ページや PDF には出力されません。Markdown はネイティブではコメントをサポートしていませんが、何人かの進取の気性に富んだ人々が解決策を考案しました。

コメントを追加するには、テキストを角かっこで囲み、その後にコロン、スペース、シャープ記号を付けます（例：[comment]: #）。コメントの前後には空行を挿入する必要があります。

Here's a paragraph that will be visible.

[This is a comment that will be hidden.]: # 

And here's another paragraph that's visible.

レンダリングされた出力は次のようになります

これは表示される段落です。

これは表示される別の段落です。

**ヒント:** このヒントは、Stack Overflowからのものです。ピアレビューを受け、何千人もの人々によって使用されています!

アドモニション

アドモニションは、ドキュメントで警告、注記、ヒントに注意を喚起するためによく使用されます。Markdown はアドモニション用の特別な構文を提供しておらず、ほとんどの Markdown アプリケーションはアドモニションをサポートしていません（MkDocsは例外です）。

ただし、アドモニションを追加する必要がある場合は、ブロック引用と絵文字、強調を使用して、他の Web サイトで見られるアドモニションに似たものを作成できる場合があります。

> :warning: **Warning:** Do not push the big red button.

> :memo: **Note:** Sunrises are beautiful.

> :bulb: **Tip:** Remember to appreciate the little things in life.

レンダリングされた出力は次のようになります

⚠️ **警告:** 大きな赤いボタンを押さないでください。

📝 **注記:**日の出は美しいです。

💡 **ヒント:**人生の小さなことに感謝することを忘れないでください。

画像サイズ

画像の Markdown 構文では、画像の幅と高さを指定できません。画像のサイズを変更する必要があり、Markdown プロセッサがHTMLをサポートしている場合は、img HTML タグとwidth属性とheight属性を使用して、画像の寸法をピクセル単位で設定できます。

<img src="image.png" width="200" height="100">

レンダリングされた出力には、指定した寸法にサイズ変更された画像が含まれます。

画像キャプション

Markdown はネイティブでは画像キャプションをサポートしていませんが、2 つの回避策があります。Markdown アプリケーションがHTMLをサポートしている場合は、figure HTML タグとfigcaption HTML タグを使用して、画像にキャプションを追加できます。

<figure>
    <img src="/assets/images/albuquerque.jpg"
         alt="Albuquerque, New Mexico">
    <figcaption>A single track trail outside of Albuquerque, New Mexico.</figcaption>
</figure>

レンダリングされた出力は次のようになります

Albuquerque, New Mexico — ニューメキシコ州アルバカーキ郊外のシングルトラックトレイル。

**ヒント:** Markdown アプリケーションが CSS をサポートしている場合は、CSS を使用してキャプションの外観をスタイル設定できます。

Markdown アプリケーションが HTML をサポートしていない場合は、キャプションを画像のすぐ下に配置し、強調を使用してみてください。

![Albuquerque, New Mexico](/assets/images/albuquerque.jpg)
*A single track trail outside of Albuquerque, New Mexico.*

レンダリングされた出力は次のようになります

Albuquerque, New Mexico

ニューメキシコ州アルバカーキ郊外のシングルトラックトレイル。

リンクターゲット

新しいタブまたはウィンドウで開くリンクを作成したい場合があります。リンクの Markdown 構文では、target属性を指定できませんが、Markdown プロセッサがHTMLをサポートしている場合は、HTML を使用してこれらのリンクを作成できます。

<a href="https://markdownguide.dokyumento.jp" target="_blank">Learn Markdown!</a>

レンダリングされた出力は次のようになります

Markdown を学ぶ！

記号

Markdown は記号に特別な構文を提供していません。ただし、ほとんどの場合、使用したい記号を Markdown ドキュメントにコピーして貼り付けることができます。たとえば、円周率（π）を表示する必要がある場合は、Web ページで記号を見つけてドキュメントにコピーして貼り付けます。記号はレンダリングされた出力に期待どおりに表示されます。

または、Markdown アプリケーションがHTMLをサポートしている場合は、使用したい記号の HTML エンティティを使用できます。たとえば、著作権記号（©）を表示したい場合は、著作権の HTML エンティティ（©）を Markdown ドキュメントにコピーして貼り付けることができます。

記号の HTML エンティティの部分的なリストを次に示します

著作権（©）— ©
登録商標（®）— ®
商標（™）— ™
ユーロ（€）— €
左矢印（←）— ←
上矢印（↑）— ↑
右矢印（→）— →
下矢印（↓）— ↓
度（°）— °
円周率（π）— π

使用可能な HTML エンティティの完全なリストについては、Wikipedia のHTML エンティティのページを参照してください。

表の書式設定

Markdownのテーブルは、非常に扱いにくいことで有名です。テーブルセル内のテキストの書式設定には、多くのMarkdown構文要素を使用できません。しかし、少なくとも2つの一般的なテーブルの問題、つまり改行とリストについては、回避策があります。

テーブルセル内の改行

1つ以上の<br> HTMLタグを使用することで、テーブルセル内で段落を区切ることができます。

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title |
| Paragraph   | First paragraph. <br><br> Second paragraph. |

レンダリングされた出力は次のようになります

構文	説明
ヘッダー	タイトル
段落	最初の段落。 2番目の段落。

テーブルセル内のリスト

HTMLタグを使用することで、テーブルセル内にリストを追加できます。

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title |
| List        | Here's a list! <ul><li>Item one.</li><li>Item two.</li></ul> |

レンダリングされた出力は次のようになります

構文	説明
ヘッダー	タイトル
リスト	リストです！項目1。項目2。

Markdeepなどの一部のMarkdownアプリケーションは、見出しから目次（tocとも呼ばれます）を自動的に生成できますが、これはすべてのMarkdownアプリケーションで提供されている機能ではありません。ただし、Markdownアプリケーションが見出しIDをサポートしている場合は、リストとリンクを使用して、Markdownファイルの目次を作成できます。

#### Table of Contents

- [Underline](#underline)
- [Indent](#indent)
- [Center](#center)
- [Color](#color)

レンダリングされた出力は次のようになります

動画

MarkdownアプリケーションがHTMLをサポートしている場合、YouTubeやVimeoなどの動画ウェブサイトから提供されたHTMLコードをコピー＆ペーストすることで、Markdownファイルに動画を埋め込むことができます。MarkdownアプリケーションがHTMLをサポートしていない場合は、動画を埋め込むことはできませんが、画像と動画へのリンクを追加することで、ほぼ同じことができます。これは、事実上あらゆる動画サービスのあらゆる動画で可能です。

YouTubeではこれが簡単なので、例として使用します。たとえば、この動画を見てみましょう：https://www.youtube.com/watch?v=8q2IjQOzVpE。URLの最後の部分（8q2IjQOzVpE）は動画のIDです。このIDを取得して、次のテンプレートに配置できます

[![Image alt text](https://img.youtube.com/vi/YOUTUBE-ID/0.jpg)](https://www.youtube.com/watch?v=YOUTUBE-ID)

YouTubeはすべての動画の画像を自動的に生成します（https://img.youtube.com/vi/YOUTUBE-ID/0.jpg）。そのため、それを使用して、画像をYouTubeの動画にリンクできます。画像の代替テキストを置き換え、動画のIDを追加すると、例は次のようになります

[![Less Than Jake — Scott Farcas Takes It On The Chin](https://img.youtube.com/vi/PYCxct2e0zI/0.jpg)](https://www.youtube.com/watch?v=PYCxct2e0zI)

レンダリングされた出力は次のようになります

Markdownスキルを次のレベルに引き上げましょう。

60ページでMarkdownを学ぶ。初心者とエキスパートの両方を対象としたMarkdownガイドブックは、Markdown構文の開始と習得に必要なすべてを網羅した包括的なリファレンスです。

書籍を入手する

もっとMarkdownを学びたいですか？

ここで立ち止まらないでください！🚀 GitHubリポジトリにスターを付けて、下のメールアドレスを入力して、新しいMarkdownチュートリアルをメールで受け取ってください。スパムはありません！