メモの書き方 - Markdown応用編 #mimemo version 10

2016/05/30 20:55 by mimemo mimemo
  ：追加された部分   ：削除された部分
（差分が大きい場合、文字単位では表示しません）
メモの書き方 - Markdown応用編 #mimemo
[メモの書きかた - Markdown基礎編](/m/YJbOxkGe2ovd35W)では、Markdownの基本的な記法を説明しました。

基礎編で書いた内容は、Markdownの最も基本的な書き方で、mimemo以外のMarkdown対応サービスやアプリでも普通に使えるはずです。

一方で、基本的なMarkdownだけでは少し足りない部分もあり、より便利に快適にメモを書けるよう、拡張された記法というのがあり、mimemoでもその拡張された記法を取り入れたり、独自に機能追加している部分があります。

ここからは応用編として、そんな独自拡張の部分や、より便利に書くためのノウハウをお伝えしていきます。

# Markdownの拡張記法

## 表をつくる

表を作りたい時は、ちょっと複雑ですが

```markdown
| 表の見出し１ | 表の見出し２ | 表の見出し３|
| ---------- | :--------: | --------: |
| 表の中身１A  | 表の中身２A | 表の中身３A |
| 表の中身１B  | 中身２B     | 中身３A    |
```

このように書けば

----

| 表の見出し１ | 表の見出し２ | 表の見出し３|
| ---------- | :--------: | --------: |
| 表の中身１A  | 表の中身２A | 表の中身３A |
| 表の中身１B  | 中身２B     | 中身３A    |

----

このような表になります。

２行目が表の見出しと本体の区切りで、「:」を右/左/両方につけることで、表の本体側の列の左寄せ/中央寄せ/右寄せをコントロールすることができます。

## 定義リスト

定義リストというのは、例えば辞書のように、「用語＋用語の説明」が繰り返されるようなリストです。
２種類書き方があり、

````markdown
用語その１
:     定義その１

用語その２
:  定義その２

      定義内のコード

    定義内の段落
````

↓↓↓↓

----
用語その１
:     定義その１

用語その２
:  定義その２

      定義内のコード

    定義内の段落

----

もう一つの書き方が

````markdown
用語１
  ~ 定義１

用語２
  ~ 定義２A
  ~ 定義２B
````

↓↓↓↓↓↓↓

---------
用語１
  ~ 定義１

用語２
  ~ 定義２A
  ~ 定義２B
--------

となります。



## 脚注

脚注というのはこのように→[^1]小さなリンクをつけて、メモの最後に説明を載せたい場合の書き方です。

[^1]:こんなふうに

```markdown
脚注[^2]を書くことができます

[^2]:ページの下部で本文の枠外に記載される短文のこと
```
このように書くと

----
脚注[^2]を書くことができます

[^2]:ページの下部で本文の枠外に記載される短文のこと
-----

と表示され、メモの一番下に「ページの下部で本文の枠外に記載される短文のこと」という説明が表示されているはずです。

## チェックリスト

`[ ]`と書くことで、チェックボックスが表示され、TODOリストやお買い物リストなど、チェックリストを簡単に作れます。

```markdown
[x] メモを書く
[ ] ボールペンを買う
[ ] メールを送る
```
と書くと

----

[x] メモを書く
[ ] ボールペンを買う
[ ] メールを送る

----

こうなります。
`[x]`というふうに「x」（エックス）を入れると、チェックされた状態になります。
編集できるメモであれば、そのままチェックを入れたりはずしたりできます。

## 目次をつくる

長いメモの場合に、メモ内の見出しを元に、目次を自動生成することができます。

```
@[TOC](目次のタイトルです)
```
と書くことで、

----
@[TOC](目次のタイトルです)

----
となります。


## コードのハイライトと行番号

コードの色付けには「[highlight.js](https://highlightjs.org/)」を使っています。
基本的には自動でわりとよい感じに色付けしてくれますが、埋め込む際、「```」の直後に言語名を入れることで、確実に言語に合わせた色分けができます。

言語名の後に`:file.txt`のように「コロン＋ファイル名等」を書くと、コードの左上にファイル名などを表示させることができます。

また、「=」をつけることで、行番号の表示ができます。「=」の後に数字を指定すると、行番号の開始番号も指定できます。

````markdown
```javascript:file.txt=99
var foo = 'bar'
function baz(hoge){
	return hoge.substr(1,5);
}
```
````
↓↓↓↓
```javascript:file.txt=99
var foo = 'bar'
function baz(hoge){
	return hoge.substr(1,5);
}
```


# より快適にメモを書くために

## 絵文字の利用

mimemoでは、絵文字については、通常のUnicode絵文字を使う事を推奨しています。

GithubやSlackなどのサービスでよくある「:bow:」のような記法は使えませんが、代わりに、編集画面で「 :」（半角スペース+コロン） を入力すると、絵文字の入力を補助するパネルが開き、そこでUnicode絵文字を入力できるようになっています。

## 自動埋め込み変換

mimemoでは、文中にURLを貼り付けると、自動でリンクするようになっていますが、YouTubeやVimeo、Google Mapsなど、動画や地図、音楽、写真など特定のサービスのURLの場合、それを埋め込みコンテンツに自動変換します。
ページに動画などを貼りたい場合は、そのページのURLをコピペするだけです。

その代わり、各サービスが提供している埋め込みコードは貼り付けられませんのでご注意ください。

埋め込み対応しているサイトは、[メモの書き方 - コンテンツの埋め込み](#)のページをご覧ください。

※ もし、上のページにない、メモに埋め込みたいコンテンツがある場合は、**HTTPSとoEmbedに対応したサービス**であれば対応できますので、ぜひリクエストをお寄せください。

## キーボードショートカット

* メモの編集中に、`Ctrl+S`（Macの場合は`Cmd+S`）で保存できます

----

[メモの書きかた](/m/Dz2XWn4vQlYApmx)
[メモの書きかた - Markdown基礎編](/m/YJbOxkGe2ovd35W)
メモの書きかた - Markdown応用編 ←イマココ
[メモの書きかた - コンテンツを埋め込む](/m/J3kyw8o38l6Lrg7)
[メモの書きかた - スライドショー機能を活用する](https://mimemo.io/m/xpgOEoQbKlDWnZP)
[メモの書き方](/m/Dz2XWn4vQlYApmx)
[メモの書き方 - Markdown基礎編](/m/YJbOxkGe2ovd35W)
メモの書き方 - Markdown応用編 ←イマココ
[メモの書き方 - コンテンツを埋め込む](/m/J3kyw8o38l6Lrg7)
[メモの書き方 - スライドショー機能を活用する](https://mimemo.io/m/xpgOEoQbKlDWnZP)

メモの書きかた - Markdown基礎編では、Markdownの基本的な記法を説明しました。

基礎編で書いた内容は、Markdownの最も基本的な書き方で、mimemo以外のMarkdown対応サービスやアプリでも普通に使えるはずです。

一方で、基本的なMarkdownだけでは少し足りない部分もあり、より便利に快適にメモを書けるよう、拡張された記法というのがあり、mimemoでもその拡張された記法を取り入れたり、独自に機能追加している部分があります。

ここからは応用編として、そんな独自拡張の部分や、より便利に書くためのノウハウをお伝えしていきます。

Markdownの拡張記法

表をつくる

表を作りたい時は、ちょっと複雑ですが

| 表の見出し１ | 表の見出し２ | 表の見出し３|
| ---------- | :--------: | --------: |
| 表の中身１A  | 表の中身２A | 表の中身３A |
| 表の中身１B  | 中身２B     | 中身３A    |

このように書けば

表の見出し１ 表の見出し２ 表の見出し３
表の中身１A 表の中身２A 表の中身３A
表の中身１B 中身２B 中身３A

このような表になります。

２行目が表の見出しと本体の区切りで、「:」を右/左/両方につけることで、表の本体側の列の左寄せ/中央寄せ/右寄せをコントロールすることができます。

定義リスト

定義リストというのは、例えば辞書のように、「用語＋用語の説明」が繰り返されるようなリストです。
２種類書き方があり、

用語その１
:     定義その１

用語その２
:  定義その２

      定義内のコード

    定義内の段落

↓↓↓↓

用語その１
定義その１
用語その２

定義その２

定義内のコード

定義内の段落

もう一つの書き方が

用語１
  ~ 定義１

用語２
  ~ 定義２A
  ~ 定義２B

↓↓↓↓↓↓↓

用語１
定義１
用語２
定義２A
定義２B

となります。

脚注

脚注というのはこのように→[1]小さなリンクをつけて、メモの最後に説明を載せたい場合の書き方です。

脚注[^2]を書くことができます

[^2]:ページの下部で本文の枠外に記載される短文のこと

このように書くと

脚注[2]を書くことができます

と表示され、メモの一番下に「ページの下部で本文の枠外に記載される短文のこと」という説明が表示されているはずです。

チェックリスト

[ ]と書くことで、チェックボックスが表示され、TODOリストやお買い物リストなど、チェックリストを簡単に作れます。

[x] メモを書く
[ ] ボールペンを買う
[ ] メールを送る

と書くと



こうなります。
[x]というふうに「x」（エックス）を入れると、チェックされた状態になります。
編集できるメモであれば、そのままチェックを入れたりはずしたりできます。

目次をつくる

長いメモの場合に、メモ内の見出しを元に、目次を自動生成することができます。

@[TOC](目次のタイトルです)

と書くことで、

目次のタイトルですMarkdownの拡張記法表をつくる定義リスト脚注チェックリスト目次をつくるコードのハイライトと行番号より快適にメモを書くために絵文字の利用自動埋め込み変換キーボードショートカット

となります。

コードのハイライトと行番号

コードの色付けには「highlight.js」を使っています。
基本的には自動でわりとよい感じに色付けしてくれますが、埋め込む際、「```」の直後に言語名を入れることで、確実に言語に合わせた色分けができます。

言語名の後に:file.txtのように「コロン＋ファイル名等」を書くと、コードの左上にファイル名などを表示させることができます。

また、「=」をつけることで、行番号の表示ができます。「=」の後に数字を指定すると、行番号の開始番号も指定できます。

```javascript:file.txt=99
var foo = 'bar'
function baz(hoge){
	return hoge.substr(1,5);
}
```

↓↓↓↓

var foo = 'bar'
function baz(hoge){
	return hoge.substr(1,5);
}
99 100 101 102file.txt

より快適にメモを書くために

絵文字の利用

mimemoでは、絵文字については、通常のUnicode絵文字を使う事を推奨しています。

GithubやSlackなどのサービスでよくある「:bow:」のような記法は使えませんが、代わりに、編集画面で「 :」（半角スペース+コロン） を入力すると、絵文字の入力を補助するパネルが開き、そこでUnicode絵文字を入力できるようになっています。

自動埋め込み変換

mimemoでは、文中にURLを貼り付けると、自動でリンクするようになっていますが、YouTubeやVimeo、Google Mapsなど、動画や地図、音楽、写真など特定のサービスのURLの場合、それを埋め込みコンテンツに自動変換します。
ページに動画などを貼りたい場合は、そのページのURLをコピペするだけです。

その代わり、各サービスが提供している埋め込みコードは貼り付けられませんのでご注意ください。

埋め込み対応しているサイトは、メモの書き方 - コンテンツの埋め込みのページをご覧ください。

※ もし、上のページにない、メモに埋め込みたいコンテンツがある場合は、HTTPSとoEmbedに対応したサービスであれば対応できますので、ぜひリクエストをお寄せください。

キーボードショートカット

  • メモの編集中に、Ctrl+S（Macの場合はCmd+S）で保存できます

メモの書き方
メモの書き方 - Markdown基礎編
メモの書き方 - Markdown応用編 ←イマココ
メモの書き方 - コンテンツを埋め込む
メモの書き方 - スライドショー機能を活用する

  1. こんなふうに ↩︎

  2. ページの下部で本文の枠外に記載される短文のこと ↩︎