HTMLより簡単なマークアップ言語「Markdown」

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

ブログやウェブサイトに文章を書く場合、読む人が見やすいように文章を構造化し見出しをつけて、大切な部分は色を変えたり太字にしたりして目立つようにする。リストや表にするなどの工夫をしていると思います。

通常はHTMLという言語で、「タグ」をつかって文章を装飾していくわけですが、開始タグや終了タグ、リンクタグや見出しタグなど手書き(手打ち)するにはちょっと面倒。。。
そんな時、簡単に文章を構造化できる言語が「Markdown」です。

「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グル―バー(英語版)により作成された。-ウィキペディア

普段使いできるMarkdown記法一覧

普段使いする表現はそんなに多くありません。ここではMarkdownで表現できるもののうち、普段使いそうなものだけピックアップします。

テキストの装飾に関するもの

見出し h1~h6

「#(シャープ)」の後には半角スペースが必要です。「#」1個~6個が見出し1~見出し6に対応しています。

# 見出し1
## 見出し2

見出しの下に「=(イコール)」を3個以上つなげると見出し1に、「-(ハイフン)」を3個以上つなげると見出し2になります。

見出し1
=====
見出し2
-----

強調 strong

太字にする場合は「**(アスタリスク2個)」か 「__(アンダーバー2個)」で囲みます。

**太字アスタリスクver**
__太字アンダーバーver__

太字アスタリスクver
太字アンダーバーver

リスト

リストの上下には空行が必要です。「*」「+」「-」「数字.」の後には半角スペースが必要です。

記号型リスト ul

文頭に「*」「+」「-」のどれかを入れる。

* list1
+ list2
- list3
- list4
  • list1
  • list2
  • list3
  • list4

数字型リスト ol

文頭に「数字.」を入れる。数字はなんでもよいみたい。「1.2.3….」ではなく、「1.1.1….」とするほうが入れ替えに便利です。

1. list1
1. list2
1. list3
  1. list1
  2. list2
  3. list3

文章の整形

段落 p

文章の後に「enter」を2回入れる。(1行空行を入れる)

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ(ここに入れる→)

あああああああああああああああああ

改行 br

改行を入れたい箇所で「半角スペース2個」入れる。

あああああああ(ここに入れる→)
あああああ

引用 blockquote

引用テキストの文頭に「>(右向きカッコ?)」を入れる。

> 「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当な~

「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当な~

水平線(区切り線) hr

1行の中に、3つ以上の「-(ハイフン)」か「*(アスタリスク)」を並べる。

---
***


リンク

通常リンク

[リンクのテキスト](リンクのアドレス)

[キメウェブ](https://kimeweb.com)

キメウェブ

タイトル(リンク先の補足情報)付きリンク

タイトル付きはこちら。マウスオーバーするとタイトルが表示されます。
リンクのアドレスと”リンクのタイトル”の間には半角スペースが必要です。

[リンクのテキスト](リンクのアドレス "リンクのタイトル")

[キメウェブ](https://kimeweb.com "キメウェブへはこちらから")

キメウェブ

コード表示

これはブログ機能を使ったほうが早くて綺麗かもですが、ちょっとだけご紹介します。
Markdown記法した部分は該当の装飾がされてしまいます。Markdown記法の説明をする時にはテキストそのまま表示されてほしいのでコード表示機能を使います。「`(バッククォート shift+@)」で囲むとその部分は変換されません。「`」とテキストの間には半角スペースが必要です。

`# 見出し1 `

複数行にわたるコードを表示する場合は、行頭に4個以上の半角スペースを入れます。ここでは見えていませんが、すべての行頭に4個半角スペースが入っています。

# 見出し1
## 見出し2

ページ上部の「見出し」で紹介したように大きな見出しに変換されていません(*’▽’)

まとめ

その他、画像の埋め込みや、テーブル作成、注釈の表記なんかもできるようですが、その辺は必要な時によきソフトやブログの機能を使ったほうが早く綺麗にできると思います。

ひとつ気になるところといえば、htmlタグでいう「target=”_blank”」にあたる記法が無いようなんです( ;∀;)

今見ているページからリンク先の外部サイトを見る度に同一ページ内に表示されたら戻るのが面倒ですよね。。。別のサイトは別ウィンドウか別タブで開いてほしいのですけどね。

とりあえずは、簡単なテキストはMarkdownを使って書いておき、ブログ(Wordpressなど)に貼りつけ、リンクや画像を挿入、修正して仕上げていくという使い方になりそうです。

WordPressとの連携や、「target=”_blank”」の設定方法についてはまたのちほど。

また、Markdown記法しているのにうまく表示されない場合は、記号前後の半角スペースや、行の前後の空行のあるなしが微妙に影響してたりします。スペースを入れたり消したり、行の挿入などを試してみるとよいと思います。

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする

スポンサーリンク