そっとプロジェクト＠Ｗｉｋｉ

Markdownモード

最終更新：2020年11月27日 23:25

sotto_project

- view

管理者のみ編集可

@wikiのMarkdownモードで「Markdown記法一覧」を書いてみるテスト

アットウィキ(@WIKI)に、Markdownモードなんて出来てたのか。久々にアットウィキを使ってみた → https://t.co/4JJ2Bimjcc / “Markdownモード - アットウィキ(@WIKI)ご利用ガイド - アットウィキ” https://t.co/W4rxGk4MXm
— まめ狸@パラオ泊地→デン・ヘルダー501基地 (@mametanuki) March 12, 2020

元ネタ

■目次

段落と改行
見出し記法
- Atx形式の見出し記法
- Setext形式の見出し記法
リスト記法
- 箇条書きリスト記法
- 番号付きリスト記法
表組み記法（Markdown　Extra）
引用記法
pre記法
code記法
- はてな記法「自動リンク停止記法」の代用
強調記法
水平罫線記法
リンク記法
- 文中埋め込みリンク記法
- 定義参照リンク記法
【あとで書く】画像記法

■段落と改行

　Markdown記法では、１行以上の空行で挟まれた範囲内が段落として処理される。
　※段落内の改行は無視される！
　※段落内で改行したい場合は、行末に２つ以上の半角スペースを付けること！ （　面倒臭ェ…　）

１段落目の１行目。この改行は無視される→
文末に半角スペース×２あり→  
この行は、２行目として表示される

２段落目

…と書くと
　　↓

１段落目の１行目。この改行は無視される→ 文末に半角スペース×２あり→
この行は、２行目として表示される

２段落目

■見出し記法

　見出し記法には、Atx形式とSetext形式の２つがある。

■Atx形式の見出し記法

　はてな記法ではアスタリスク「*」だけど、Markdown記法では１～６個のシャープ「#」を使う。
　※素のテキストでの見易さのため、見出しが目立つように末尾に「#」を好きな数だけ付けることも可能。表示はされない。

#見出し１
##見出し２###############################################################
###見出し３
####見出し４
#####見出し５
######見出し６

…と書くと
　　↓

見出し１

見出し２

見出し３

見出し４

見出し５

見出し６

■Setext形式の見出し記法

　Markdown記法では、Atx形式の他に、見出しの次の行に等号「=」（第一レベルの見出し）とハイフン「-」（第二レベルの見出し）を下線として記述し、見出しを表現するSetext記法もある。
　下線として用いる「=」「-」の文字数は自由。

見出し１　（下線は、どんなに長くてもＯＫ）
==================================================================
見出し２　（下線は、１文字以上ならどんなに短くてもＯＫ）
-

…と書くと
　　↓

見出し１　（下線は、どんなに長くてもＯＫ）

見出し２　（下線は、１文字以上ならどんなに短くてもＯＫ）

■リスト記法

■箇条書きリスト記法

　はてな記法と同じハイフン「-」に加え、プラス記号「+」やアスタリスク「*」も使える。
　※記号の直後は、半角スペース or タブが必要！
　※リストと前の段落との間に空行が必要！
　※リスト内の階層は、半角スペース４つ or タブ１つを用いて表現する

- 箇条書きリスト
    - 箇条書きリスト（字下げで階層化）
    - 箇条書きリスト（字下げで階層化）
- 箇条書きリスト

…と書くと
　　↓

箇条書きリスト

箇条書きリスト（字下げで階層化）

箇条書きリスト（字下げで階層化）

箇条書きリスト

■番号付きリスト記法

　はてな記法ではハイフン「-」だけど、Markdown記法では番号の後ろにピリオド「.」を付けるという記法になる。
　※ピリオドの直後は、半角スペース or タブが必要！
　※リストと前の段落との間に空行が必要！
　※現状は、どんな番号を書いても１から順番に番号が振られる。
　※リスト内の階層は、半角スペース４つ or タブ１つを用いて表現する

3. 番号付きリスト
2. 番号付きリスト
1. 番号付きリスト
    9. 番号付きリスト（字下げで階層化）
    9. 番号付きリスト（字下げで階層化）
9. 番号付きリスト

…と書くと
　　↓

番号付きリスト

番号付きリスト

番号付きリスト

番号付きリスト（字下げで階層化）

番号付きリスト（字下げで階層化）

番号付きリスト

■表組み記法（Markdown Extra）

　はてな記法と同じパイプ記号「|」で区切る。
　実は、Markdown記法に表組み記法はない。Markdown記法を拡張したMarkdown Extraの表組み記法を採用したと思われる。
　※ 1行目に項目名（ヘッダ）を、2行目は項目名とデータの区切りを「-」で記入、3行目以降にデータを記入する形式を守ること！
　※表組みと前の段落との間に空行が必要！

|名前        |罪状                                    |謝罪|罪    |
|------------|----------------------------------------|----|------|
|銀髪ちゃん  |廊下で接触。肩ぶつかる。                |なし|★    |
|お菓子ちゃん|会合をサボる。**累計裏切り回数50回達成**|あり|★★★|

…と書くと
　　↓

名前罪状謝罪罪

銀髪ちゃん廊下で接触。肩ぶつかる。なし ★

お菓子ちゃん会合をサボる。累計裏切り回数50回達成 あり ★★★

名前	罪状	謝罪	罪
銀髪ちゃん	廊下で接触。肩ぶつかる。	なし	★
お菓子ちゃん	会合をサボる。累計裏切り回数50回達成	あり	★★★

　※左右両端の「|」および整形のための半角スペースは、省略可能

名前|罪状|謝罪|罪
-|--|-|-
銀髪ちゃん|廊下で接触。肩ぶつかる。|なし|★
お菓子ちゃん|会合をサボる。**累計裏切り回数50回達成**|あり|★★★

…と書くと
　　↓

名前罪状謝罪罪

銀髪ちゃん廊下で接触。肩ぶつかる。なし ★

お菓子ちゃん会合をサボる。累計裏切り回数50回達成 あり ★★★

名前	罪状	謝罪	罪
銀髪ちゃん	廊下で接触。肩ぶつかる。	なし	★
お菓子ちゃん	会合をサボる。累計裏切り回数50回達成	あり	★★★

　※2行目の区切り行で、区切りの「-」の両端にコロン記号「:」を付けると、その列は中央寄せになる
　※2行目の区切り行で、区切りの「-」の右端にコロン記号「:」を付けると、その列は右寄せになる

|名前        |罪状                                    |謝罪|罪    |
|:----------:|----------------------------------------|----|-----:|
|銀髪ちゃん  |廊下で接触。肩ぶつかる。                |なし|★    |
|お菓子ちゃん|会合をサボる。**累計裏切り回数50回達成**|あり|★★★|

…と書くと
　　↓

名前罪状謝罪罪

銀髪ちゃん廊下で接触。肩ぶつかる。なし ★

お菓子ちゃん会合をサボる。累計裏切り回数50回達成 あり ★★★

名前	罪状	謝罪	罪
銀髪ちゃん	廊下で接触。肩ぶつかる。	なし	★
お菓子ちゃん	会合をサボる。累計裏切り回数50回達成	あり	★★★

■引用記法

　はてな記法では「>>」だけの行と、「<<」だけの行で段落を挟むが、Markdown記法では引用文の行頭に鉤括弧「>」を置く。

>#引用箇所
>なお、*引用文の中ではMarkdown記法も使える*。
>
>- リスト記法も書ける
>- 見出し記法も書ける
>- 表組み記法もかける
>>##入れ子引用
>>「>」を重ねることで引用内でさらに引用を記述することも可能

…と書くと
　　↓

引用箇所

なお、引用文の中ではMarkdown記法も使える。

リスト記法も書ける

見出し記法も書ける

表組み記法もかける

入れ子引用

「>」を重ねることで引用内でさらに引用を記述することも可能

　※段落の１行目にさえ鉤括弧「>」を書いておけば、その段落全体が引用になる。 （スゲぇ楽チン！！）

>１段落目の１行目。この改行は無視される→
文末に半角スペース×２あり→  
この行は、２行目として表示される

２段落目

…と書くと
　　↓

１段落目の１行目。この改行は無視される→ 文末に半角スペース×２あり→
この行は、２行目として表示される

２段落目

■pre記法

　はてな記法では「>|」だけの行と、「|<」が行末に含まれる行で挟むが、Markdown記法では引用文の行頭に「4つ以上の半角スペース」あるいは「1つ以上のタブ」を置くことで、HTMLなどのソースコードを整形済みテキストとしてそのまま表示できる。
　※pre記法と前の段落との間に空行が必要！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5サンプル</title>
    </head>
    <body>
        <p>HTML5のソースコードサンプルだよ！</p>
    </body>
</html>

　※はてな記法のスーパーPre記法や、GitHub Flavored Markdownのような、プログラミング言語別のシンタックス・ハイライトは、まだ無いようだ。[http://nabetama.hatenablog.com/entry/2012/02/16/012633:title=gist記法:bookmark]も使えないようだ。

【9/26 追記】

　9/26、シンタックスハイライト機能が追加された。

Markdownモードにおいて、コードブロックのシンタックスハイライトに対応しました。

「```perl」のように言語を指定できます。

記法については「GitHub Flavored Markdown - Introduction」の「Syntax highlighting」セクションをご覧ください。

ブログのアイコンを設定できるようにしました - はてなブログ開発ブログ [http://staff.hatenablog.com/entry/2012/09/26/182527:bookmark]

■code記法

　はてな記法には無いが、Markdown記法ではバック・クォート「`」で囲むことで、文章中にHTMLタグなどのソースコードの一部を表示することができる。
　※表示するソースコード内にバック・クォートが含まれる場合は、２個以上のバック・クォートで囲めば、ソースコード内のバック・クォートも表示される

困った時の`<div>`頼みって、どうなのよ？…orz  
バック・クォートが表示されるよ！→`` `<div>` ``

…と書くと
　　↓

困った時の<div>頼みって、どうなのよ？…orz
バック・クォートが表示されるよ！→`<div>`

■はてな記法「自動リンク停止記法」の代用

　Markdown記法のcode記法は、はてな記法の自動リンク停止記法の代用として使える。自動リンク停止記法は、Markdownモードでも使えるので意味無いけど…。

id:mame-tanuki  
`id:mame-tanuki`

…と書くと
　　↓

id:mame-tanuki
id:mame-tanuki

■強調記法　

　はてな記法には無いが、Markdown記法ではアスタリスク「*」やアンダースコア「_」を…

文字の前後に１つ付けて挟むと、<em>タグで囲まれる→斜体で表示される
文字の前後に２つ付けて挟むと、<strong>タグで囲まれる→太字で表示される

斜体で表示されるよ！
斜体で表示されるよ！
太字で表示されるよ！
太字で表示されるよ！
太字の斜体で表示されるよ！
太字の斜体で表示されるよ！
…と書くと
　　↓

斜体で表示されるよ！
斜体で表示されるよ！
太字で表示されるよ！
太字で表示されるよ！
太字の斜体で表示されるよ！
太字の斜体で表示されるよ！

■水平罫線記法

　はてな記法には無いが、Markdown記法では３つ以上のハイフン「-」やアスタリスク「*」、アンダースコア「_」だけで構成される行によって水平罫線<hr />を表示できる。記号の間に半角スペースを混ぜることも可能。

---
**********************
________
 -    -   -   -    
*         *            *              *              *
_      _     _

…と書くと
　　↓

■リンク記法

　Markdown記法でのリンク表現は２つある。文中埋め込みリンク記法（Inline）と定義参照リンク記法（Reference）だ。

■文中埋め込みリンク記法

　はてな記法では、「[URL:title=リンクする文字列]」という書式だったが、Markdown記法では、「[リンクする文字](URL)」という書式で、文章中にリンクを埋め込むことができる。さらに「[リンクする文字](URL "リンクのツールチップ文字列")」という書式も可能。

毎朝、[はてなのトップページ](http://www.hatena.ne.jp/)にアクセスしてますか？  
毎朝、[はてなのトップページ](http://www.hatena.ne.jp/ "トップページを、どうぞご利用ください")にアクセスしてますか？

…と書くと
　　↓

毎朝、はてなのトップページにアクセスしてますか？
毎朝、はてなのトップページにアクセスしてますか？

■定義参照リンク記法

　Markdown記法には、文章中のリンクの参照先を文末等の別の場所で定義する記法もある。文章中にあると邪魔な非常に長いURLへのリンクなどは参照先のURLを文章の外で定義することで、素のテキストの状態でも読み易くすることができる。（いいね！）

　文章中に埋め込むリンクは、「[リンクする文字列][ID]」の書式で、リンクの定義は文章の任意の箇所で「[ID]: URL」という書式で指定する。さらにリンクの定義は「[ID]: URL "リンクのツールチップ文字列"」という書式も可能。
　※IDは全角でもＯＫ。 英字のIDの場合、大文字小文字の別をしないので注意。

- [わたしのブログ][1]
- [はてなのトップページ][htop]
- [クソ長いＵＲＬ][長URL]。本文中に超ぉ長いURLとか書いちゃうと、記事を書いている最中とか文章が見辛くなってウザいよね！

記事の本文。  
記事の本文。  
記事の本文。  

↓本文中にあると邪魔なので記事の下の方でまとめてリンクを定義するよ！  
[1]: http://mametanuki.hateblo.jp/
[HTop]: http://www.hatena.ne.jp/
[長URL]: http://ja.wikipedia.org/wiki/%E3%81%AF%E3%81%A6%E3%81%AA%E3%81%AE%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E4%B8%80%E8%A6%A7 "はてなのサービス一覧 - Wikipedia"

…と書くと
　　↓