mamimumemo.

ほぼ自分用。

Markdown記法まとめてみた

SlackとかGitHubとか、何かと触れる機会の多いMarkdown(.md)について勉強してみました。

Markdownとは

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。 本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

Markdown - ウィキペディア

手軽に無駄のない装飾をできるのが控えめに言って最高ですね。好きです。
本稿では、よく使う記法をまとめています。

見出し<h>

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6
<!-- atx-style -->

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

atx形式のヘッダーはお好みで閉じてもいいのです。ハッシュの数もお好みで。見た目の問題ですね。

## 見出し2 ##
### 見出し3 ###

#### 見出し4 #########
##### 見出し5 ########

h1とh2に関しては次のような書き方も。
=, -の数は1つ以上あれば任意です。これも見た目の問題ですかね。

<!-- Setext-style -->

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

改行<br>

mdって、HTMLなんかと同じでただ単に改行しただけだと改行としてみなしてくれないんですよね。でも、行末に半角スペースを2つ以上入れると…
改行できましたね。やったあ!
mdって、HTMLなんかと同じで
ただ単に改行しただけだと
改行としてみなしてくれないんですよね。
でも、行末に半角スペースを2つ以上入れると…  <!-- 行末に半角スペースが2匹います -->
改行できましたね。やったあ!

段落p

段落は
文と文の間に空行1を挟むことで
分けることができます。

改行と併用することで
とっても読みやすい文章になる、かも。

段落は  
文と文の間に空行を挟むことで  
分けることができます。

改行と併用することで  
とっても読みやすい文章になる、かも。
  1. タブまたは半角スペースのみを含む行であれば、空行として認識されます。


強調<em> <strong>

*または_で囲んで文字を強調します。

  • 1つ: em
  • 2つ: strong
  • 3つ: em + strong
*em*
_em_

**strong**
__strong__

***em + strong***
___em + strong___

引用<blockquote>

夏目漱石「私の個人主義

私は当時同時にその周旋ごとという方の以上をしないで。

現に今にお話しらも現にこの病気ですたばかりにあるばいませには仕事もっませだので、少しには信ずるたましまします。
行へいうありものは近頃たくさんが大分たたます。
すでに大森さんを攻撃否そう注意をした世間この考私か使用をというご経験なたあっんので、こうした今日は私か爺さん方向に廻るが、岡田さんの事を辺のそれをついにご批評と受けるてここ奴婢がお評価に纏めようにとうとうお誤解をありうたて、ほぼちょうど尊敬に次ぐだといるないものに解せますだ。

原文(青空文庫)

<!-- 見出し、段落、改行、リンクを併用してみました -->

> ##### 夏目漱石「私の個人主義」
> 私は当時同時にその周旋ごとという方の以上をしないで。
> 
> 現に今にお話しらも現にこの病気ですたばかりにあるばいませには仕事もっませだので、少しには信ずるたましまします。  
> 行へいうありものは近頃たくさんが大分たたます。  
> すでに大森さんを攻撃否そう注意をした世間この考私か使用をというご経験なたあっんので、こうした今日は私か爺さん方向に廻るが、岡田さんの事を辺のそれをついにご批評と受けるてここ奴婢がお評価に纏めようにとうとうお誤解をありうたて、ほぼちょうど尊敬に次ぐだといるないものに解せますだ。
> 
> [原文(青空文庫)](http://www.aozora.gr.jp/cards/000148/card772.html)
引用続き、
>の数を増やせば、ネストも簡単にできます。
> 引用続き、
>> >の数を増やせば、ネストも簡単にできます。

リスト<ul> <ol>

順不同リスト<ul>*, +, -のいずれかを使って作ります。

  • リスト1
  • リスト1
  • リスト1
* リスト1
* リスト1
* リスト1

+ リスト1
+ リスト1
+ リスト1

- リスト1
- リスト1
- リスト1

出力は全て同じ。
タブを入れることで階層化も可能です。

  • リスト2
    • リスト2.1
    • リスト2.2
      • リスト2.2.1
* リスト2
    * リスト2.1
    * リスト2.2
        * リスト2.2.1

順序付きリスト<ol>は任意の番号とピリオドを添えてあげればできあがり。

  1. ふじ
  2. たか
  3. なすび
1. ふじ
2. たか
3. なすび

<!-- 全部同じ番号でもへんてこりんな順番でも、ちゃんと並べてくれます -->

1. ふじ
1. たか
1. なすび

3. ふじ
1. たか
2. なすび

ulolを一緒に使うならこんなかんじ。

  1. ふじ
    • やま
  2. たか
    • とり
  3. なすび
    • やさい
    1. ふじ
        - やま
    1. たか
        - とり
    1. なすび
        - やさい
    

    罫線<hr>

    3つ以上の*, -, _のみで行を構成すると罫線が引けます。




    ***
    ---
    _____
    

    半角スペースを入れることもできます。

    * * *
    - - -
    _ _ _ _ _
    

    リンク<a>

    http://example0.jp
    <a href="http://example0.jp">http://example0.jp</a>

    例1
    <a href="http://example1.jp">例1</a>

    例2
    <a href="http://example2.jp" title="title属性値">例2</a>

    <http://example.jp>
    
    [例1](http://example1.jp)
    [例2](http://example2.jp "title属性値")
    

    文章内のどこかで定義すれば、好きなときに好きな場所から参照することができます。

    こっち呼んだりあっち呼んだりやっぱりこっち呼んだり。
    <!-- 定義 -->
    [参照先1]: http://example3.jp
    [参照先2]: http://example4.jp "title属性値"
    
    <!-- 参照 -->
    [こっち][参照先1]呼んだり[あっち][参照先2]呼んだりやっぱり[こっち][参照先1]呼んだり。
    

    画像<img>

    画像とリンクのシンタックスはとってもよく似ています。頭にびっくりを付けてみて。

    alt属性値<img src="https://placehold.jp/100x100.png?text=sample" alt="alt属性値">

    alt属性値<img src="https://placehold.jp/100x150.png?text=sample" alt="alt属性値" title="title属性値">

    ![alt属性値](https://placehold.jp/100x100.png?text=sample)
    ![alt属性値](https://placehold.jp/100x150.png?text=sample "title属性値")
    
    <!-- 定義 -->
    [参照先1]: https://placehold.jp/100x100.png?text=sample
    [参照先2]: https://placehold.jp/100x150.png?text=sample "title属性値"
    
    <!-- 参照 -->
    ![alt属性値][参照先1]
    ![alt属性値][参照先2]
    

    コード<code>

    バッククオート`で囲むことでインラインコードを挿入できます。

    インラインコード
    `インラインコード`
    

    コードブロックを挿入したいときは行頭に半角スペースを4つ用意するか、バッククオート3つ```で囲みます。

    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="UTF-8">
       <title></title>
    </head>
    <body>
        <!-- sample -->
    </body>
    </html>
    
        <!DOCTYPE html>
        <html>
        <head>
           <meta charset="UTF-8">
           <title></title>
        </head>
        <body>
            <!-- sample -->
        </body>
        </html>
    
    ```
    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="UTF-8">
       <title></title>
    </head>
    <body>
        <!-- sample -->
    </body>
    </html>
    ```
    

    上記以外でもこれ使えるなあ、みたいなものがあれば随時追加していきたいと思います。


    参考リンク