SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

ブログをMarkdown記法に変更してみた

だいぶ今更な感じですが、なんとなく時代の流れを感じたので、ブログの編集をMarkdownモードにしてみました。
てことで、自分がよく使いそうな記法をいろいろ試してみました。

以下、練習を兼ねて自分用メモ。

見出し記法

頭に#をつけると見出しに。#の数で見出しのレベルが変わる

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

※2015/09/23追記

Markdownには、#から######まで、それぞれh1からh6の6段階に対応した見出しの記法があります。はてなブログでは、記事内の見出しとしてh3からh5を想定しているので、上記のうち###から#####を使用して記事を書くとよいでしょう。

記事中の見出しから目次を自動的に作成する「目次記法」を追加しました - はてなブログ開発ブログ

はてなブログとしては、記事内の見出しとしてはh3~h5を想定してるみたいです。 そういえば、はてなダイアリーでも、記事内の見出しはh3から始まってましたね。
一応、h1,h2で見出しを作っても目次記法での目次にも反映されてます。
ですが、Markdownで書くときは「###」の見出しから使い始めるのがよいかもしれません。

箇条書き記法

箇条書きは「-」「+」「*」のどれかを行頭に書く。 はてな記法では「-」は番号付きリストだったけど、Markdownでは箇条書きになるので注意。 あと、リストの階層化は半角スペース×4 or タブで。

- 箇条書き1
- 箇条書き2
    - 箇条書き2.1
    - 箇条書き2.2
  • 箇条書き1
  • 箇条書き2
    • 箇条書き2.1
    • 箇条書き2.2

番号付きリスト記法

番号付きリストは、番号の後ろに「.」をつける。 (ピリオドの後には半角スペースも。) ここで頭につけた数字は、番号付きリストには反映されず、自動で連番の数値が振られるみたい。

3. 番号付きリスト1
2. 番号付きリスト2
    3. 番号付きリスト2.1
    3. 番号付きリスト2.2
  1. 番号付きリスト1
  2. 番号付きリスト2
    1. 番号付きリスト2.1
    2. 番号付きリスト2.2

基本はこんな感じ。

|項目1  |項目2  |
|-------|-------|
|てすと |あああ |
|hoge   |hoge   |
項目1 項目2
てすと あああ
hoge hoge

はてな記法と似た感じだけど、表の見出し行の定義の仕方とかが違います。

セルの右寄せ/センタリング/左寄せとかもできるんで、もっと細かいことするときは、↓のページとか見ながらやればいいかな。
GitHub Flavored Markdown - User Documentation

引用記法

引用は、引用している範囲の行頭すべてに「>」をつける

引用している部分 この中でもMarkdown記法でいろいろ書けるみたい。

見出し

  • 箇条書き1
  • 箇条書き2

pre記法

コードをブログに書くときに毎度使うんで、頻繁に使うやつですね。

「```」というようにバッククォート3つでコードを囲みます。 最初のバッククォート×3のあとにファイルタイプを指定すると、シンタックスハイライトがされます。

    public sealed partial class MainPage : MainPageBase
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    }

code記法

文中にシンタックスハイライトを含むコードを書くことができるみたい。 「`」バッククォート一個でコードを囲んでおくと、インラインのコードブロックとして表示できます。 意外と便利かも。
インラインコードブロックのテスト。例えばpublic Page();こんな風に文中にコードを差し込める。

文字の装飾

強調表示

「*」または「_」で文字を囲むと、イタリック体での強調表示になります。
「**」「***」と囲む数を増やすと、太字、太字+イタリックとさらに強調した表示になります。

イタリックでの強調表示
太字での強調表示
太字+イタリックでの強調表示

打消し線

「\~\~」チルダ二つで囲むと、文字を打ち消し線で消します。
テスト

その他

リンク

リンクは以下のような形式で作成できます。

[表示する文字列](URL)

ほかにもこんな風に書くことで、ページのタイトルをリンクにしたりカード形式の表示をしたりできる。

[リンク先ページのURL:title]
[リンク先ページのURL:embed]

それぞれ、以下のような表示になります。
はてな

画像

各種自動リンク記法が使えるようなので、画像ははてな記法と同じように書けます。
http://hatenadiary.g.hatena.ne.jp/keyword/%E3%81%AF%E3%81%A6%E3%81%AA%E8%A8%98%E6%B3%95%E4%B8%80%E8%A6%A7?kid=188#inline

[f:id:フォトライフのリンク先:plain:w350]

f:id:minami_SC:20150923010102j:plain:w350

続きを読む

長い記事を書いた時には欠かせない、「続きを読む」の機能 <!-- more -->と書くと、そのあとの部分がリンクをクリックしたら読めるような形式になります。

水平線

「---」とか、「***」みたいに、「-」「*」を3つ以上続けて書くと水平線が表示できます。


(↑この部分が、「***」で作られた水平線。)