12 メモの書き方 - Markdown応用編 #mimemo みんなに公開

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

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

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

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

Markdownの拡張記法

表をつくる

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

| 表の見出し1 | 表の見出し2 | 表の見出し3|
| ---------- | :--------: | --------: |
| 表の中身1A  | 表の中身2A | 表の中身3A |
| 表の中身1B  | 中身2B     | 中身3A    |

このように書けば


表の見出し1 表の見出し2 表の見出し3
表の中身1A 表の中身2A 表の中身3A
表の中身1B 中身2B 中身3A

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

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

定義リスト

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

用語その1
:     定義その1

用語その2
:  定義その2

      定義内のコード

    定義内の段落

↓↓↓↓


用語その1
定義その1
用語その2

定義その2

定義内のコード

定義内の段落


もう一つの書き方が

用語1
  ~ 定義1

用語2
  ~ 定義2A
  ~ 定義2B

↓↓↓↓↓↓↓


用語1
定義1
用語2
定義2A
定義2B

となります。

脚注

脚注というのはこのように→[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. ページの下部で本文の枠外に記載される短文のこと ↩︎

12

メモを他の人に見せる

このメモを見せたい人に、このURL(今開いているページのURLです)を教えてあげてください

コメント(2)

  • someone

  • someone

  • mimemo mimemo

    ご利用ありがとうございます。

    グレーの四角の中に文字が入るのは「ソースコード」用の記法(三つのバッククオート「```」で上下挟む)をお使いいただいた時になります。
    https://mimemo.io/m/YJbOxkGe2ovd35W (の一番下です)

    目次については、見出しになっている行(行頭に「#」「##」「###」等「#」を入れて見出しにした行)が全て自動で目次に入る仕組みになっておりますので、目次に入れたくないものは、見出しにせずに書いていただく必要がございます。

  • someone

    利用させて頂いてる者です。2つ分からない点があります。グレーの四角?で分けたい点と、目次の作り方がいまいちよく分かりません……。目次をつくる@[TOC](タイトル)を入力すると他の目次になって欲しくない部分まで自動で入れられてしまいます。