プログラミング向上雑記

プログラミングが趣味のだらだら学生。自作したプログラムの紹介やいまハマってることなんかを適当に書いていったりいかなったり。Twitterはこちら→ @niishi_8

知って得する?!簡単に綺麗なメモがとれるMarkdown!~Boostnoteで覚えなくて済ませるMarkdownの書き方~

f:id:kirari0831:20160120015604p:plain

この記事に書いてあること

  • Boostnoteを使いながらMarkdownの書き方を覚える
  • Markdown初心者向けに使い方から書き方まで説明
  • Markdownの書き方なんて覚えたくないよと言う方向けにBoostnoteの活用法の説明

Markdownの書き方については色んなサイトがありますので、
この記事では3番目の項目を推したいですね一番最後に書いてあります。

目次


Markdownってなに?

www.markdown.jp

上記のサイトから一部引用すれば、

Markdown(マークダウン)は、文章の書き方です。デジタル文書を活用する方法として考案されました。特徴は、 手軽に文章構造を明示できること 簡単で、覚えやすいこと 読み書きに特別なアプリを必要としないこと それでいて、対応アプリを使えば快適に読み書きできること などです。Markdownはジョン・グルーバー(John Gruber)によって2004年に開発され、最初は Daring Fireball: Markdown で公開されました。その後、多くの開発者の手を経ながら発展してきました。

簡単にまとめるとMarkdownを使うと簡単な書き方で綺麗な文章がかけるよ!という感じです。

実は私も結構最近になって初めて知ったのですが、めちゃくちゃ簡単ですぐに覚えることができました。と言うか、よく使うのは決まっているのでそれだけ覚えれば十分です。何を覚えればいいかなどは強調して説明していこうと思います。

はてなブログの記事を書くときは

と3つから選択することができるのですが、Markdownが使えるのが分かります。それくらいMarkdownはポピュラーなんで是非ともおさえておきましょう。

Boostnoteってなに?

niisi.hatenablog.jp

以前の記事で紹介したので詳しくはそちらをご覧ください。

簡単にまとめると、
手軽にメモを取ることが出来るプログラマのためのメモ帳です。

今回はMarkdownを書く際にBoostnoteを使いますのでよろしければダウンロードしておいてください。

ちなみに、私はいま大学に通っているのですがパソコンでメモを取るときにWindows付属のメモ帳を使っている人やWordを使っている人を良く見かけるのですが、Markdown対応アプリでMarkdownを使った方が効率的だし綺麗にメモ書けます!。これは断言してもいいので、Markdown知らない人はこの記事読んで覚えると良いです。

本題!Markdownの書き方

重要そうなものから順に書いていきます!!
覚える人が苦手と言う方は、最初に挙げる見出しリスト、この二つだけでも覚えれば十分です。

それでも覚えるのは嫌だ!!ってかたには秘策を用意してあるので是非最後まで読んでみてください。

見出し

超重要項目の一つ!これだけは覚えておきたいものの一つ。

シャープ(#)の数で見出しの深さが決まる。
シャープ一個で一番大きな見出しになり、2個、3個と増えていくと徐々に小さくなる。
#の後に必ず半角の空白を入れること!

書き方

# 大きい見出し  
## ちょい大きな見出し
### 普通見出し
#### ちょい小さい見出し
##### 小さい見出し
###### かなり小さい見出し

表示結果

大きい見出し

ちょい大きい見出し

普通見出し

ちょい小さい見出し

小さい見出し
かなり小さい見出し

まとめると、

  • 文頭に#を置く
  • #の後には必ず半角空白を入れる

以上2点だけ覚えればオッケー!


リスト

見出し同様に超重要項目の一つ。こちらも是非覚えよう。
リストには箇条書きリスト数字付きリストの二つがあるのでそれぞれみていく。

箇条書き

文頭に-(マイナス)か*(アスタリスク)か+(プラス)を置く。
見出しのときと同様に記号の後に半角空白を一つ必ず入れる

書き方

- リスト1
    - リスト1-1
    - リスト1-2
* リスト2
    * リスト2-1
        * リスト2-1-1

+ リスト3

表示結果

  • リスト1
    • リスト1-1
    • リスト1-2
  • リスト2

    • リスト2-1
      • リスト2-1-1
  • リスト3

数字付き

数日付きリストにしたい場合は数字. リスト名という風にしましょう。
入れる数字は何でも構いません。順番通りにしなくて大丈夫です。
こちらも半角空白を入れるのを忘れずに!

書き方

1. リスト
2. リスト
3. リスト
    1. リスト
    2. リスト


1. 数字は
1. 何でもよいが
1. 表示する際は
1. 必ず順番通りになってしまう

表示結果

  1. リスト
  2. リスト
  3. リスト

    1. リスト
    2. リスト
  4. 数字は

  5. 何でもよいが
  6. 表示する際は
  7. 必ず順番通りになってしまう

まとめると、

  • 箇条書きにしたいなら文頭に-を置く
  • 数字リストにしたいなら文頭に数字.を置く
  • 数字に入れるものは見た目とは異なる事に気をつける
  • 空白を必ず入れる

これだけ覚えておけばオッケー!

段落と改行

さて、いまの二つさえ覚えてもらえれば最低限いけるのですが、まだまだ使える機能はあります。
地味によく使うのが段落と改行でしょうね。
特に改行はよく使うけど忘れがちなので覚えておくとよいでしょう。

段落

段落を変えるには空行を一行入れるだけ。

書き方

第1段落:段落を変えるには空行を一行以上いれればオッケー!

第2段落:ねっ?変わったでしょう。
まだこの行は第2段落だよ~ん



第3段落:これだけ空行開けても同じ

表示結果

第1段落:段落を変えるには空行を一行以上いれればオッケー!

第2段落:ねっ?変わったでしょう。 まだこの行は第2段落だよ~ん

第3段落:これだけ空行開けても同じ

改行

改行をするには、改行する前の行の最後に空白2個入れるだけ。
書き方を忘れると言うよりかは入れ忘れることが多いAtomとかだとエディタの改行だけでMarkdownの方も改行される機能があったりする。Boostnoteの方にもそう言う機能入れてくれたら助かるかも。

書き方

改行をするには最後の行に空白を2個以上入れる。スペースを最後に2回(空白有⇒   
ほらっ変わった。(空白有⇒  
空白を入れないとエディタでは改行されていても改行されないので要注意。(空白無⇒
改行されないんだな~これが。

表示結果

改行をするには最後の行に空白を2個以上入れる。スペースを最後に2回(空白有⇒
ほらっ変わった。 空白を入れないとエディタでは改行されていても改行されないので要注意。(空白無⇒ 改行されないんだな~これが。

まとめると、

  • 段落は空行を間に入れるだけ
  • 改行は最後に半角空白を2個入れるだけ
  • 改行入れわすれやすいので注意

強調表現

強調表現もおさえておくとよいものの中の一つ。無くても困らないけど有るとめっちゃ便利!表現に幅が出るよん。
*で斜体強調、**で太字強調、***で斜体かつ太字で強調。

書き方

*斜体で強調* ←斜体になってないよね?ならこっちはどうだ!⇒ *Italic*  
**太字で強調**  
***斜体&太字で強調*** ←斜体になってないよね?ならこっちはどうだ!!⇒ ***Bold&Italic***

表示結果

斜体で強調 ←斜体になってないよね?ならこっちはどうだ!⇒ Italic
太字で強調
斜体&太字で強調 ←斜体になってないよね?ならこっちはどうだ!!⇒ Bold&Italic

注意点
フォントにMeiryoとか斜体サポートされていないフォント使ってると斜体で表示されないので注意。
まあ斜体はあんま使いどころないので太字強調だけ覚えておきましょう。

まとめると、

  • 斜体強調(*)はうまくいかないときがある
  • 太字強調(**)だけ覚えればいいよ!

ソースコードの書き方

こっからは人によって全然使わないものもあるから、少しずつ重要度が下がってくよ~
ブログをMarkdownでかく時にはバリバリ使うものだから覚えておくといいと思うけど、普通のメモをとるだけだと要らないかも(?)

一行だけ

``で囲むだけ。
シングルクォートじゃなくてバッククォートな!

書き方

`loadImage()`

表示結果

loadImage()

複数行

そのまま

最初と最後をバッククォート3つ```で囲む。

書き方

```
void setup(){
size(600,600);
noStroke();
}
```

表示結果

void setup(){
    size(600,600);
    noStroke();
}

色付き(シンタックスハイライト)

最初のバッククォートの後に言語名

書き方

```processing
void setup(){
size(600,600);
noStroke();
}
```

表示結果

void setup(){
    size(600,600);
    noStroke();
}

まとめると、

  • ソースコード載せる時は```で囲む
  • シングルクォートじゃなくてバッククォートであることに注意
  • 色付けたかったら言語名を記入

引用

引用は以下の通り。よくある感じですね。

書き方

> 引用したい文の文頭に">"をいれる  
> うぇーい
>> 二重引用には">>"を文頭におく  
>> うぇーい

表示結果

引用したい文の文頭に">"をいれる
うぇーい

二重引用には">>"を文頭におく
うぇーい

水平線

区切りたい時に使う。 アスタリスクとかハイフンを3つ以上連続で繋げればいいんだけど、それぞれの間に空白があっても構わない。

書き方

***
* * *
------------
- - -
_________
_ _ _ _ _ _

表示結果







上記のどれでも可!

リンク

リンクだけ

URLを貼り付けるだけでオッケー!

書き方

https://b00st.io/jp/

表示結果

https://b00st.io/jp/

名前付きリンク

[名前](URL)と記述すると名前が表示される。

書き方

[Boostnote](https://b00st.io/jp/)

表示結果

Boostnote

表組み

1段目がヘッダで2段目は中央揃えなどの指定法 ヘッダとそろえ方の指定は必須

書き方

|ヘッダ|ヘッダ|ヘッダ|
|:--:|:--|--:|
|中央揃え|左揃え|右揃え|
|あんぱんまん|カレーパンマン|食パンマン|

表示結果

ヘッダ ヘッダ ヘッダ
中央揃え 左揃え 右揃え
あんぱんまん カレーパンマン 食パンマン

随時追加予定...

書き方なんか覚えたくない!覚えられないよ!と言う方向け

さて、今回は長ったらしくMarkdownの書き方をかいてきたわけですが「そんな書き方覚えてられっか!」と言う方もいるのではないでしょうか。

また、一気に説明されても急には覚えられないと言う方も多いでしょう。私自身、最初のうちはリンクの貼り方やソースコードの貼りつけなんかは覚えられなかったですし、いまでも表組みの書き方を覚えられていません。

そう言う時にどうするかといったら、こういったMarkdownの書き方が載っているサイトを検索したりブックマークしておいたサイトを見に行ったりするわけですが、それはめちゃくちゃダルいですよね。

じゃあどうするかといったら、Boostnoteを使うわけです!!

Boostnoteはプログラマのためのメモ帳だったわけですから、こういうときに忘れないようにメモをしておくわけです。それでMarkdownの書き方がわからなくなったときにBoostnoteを呼び出すショートカットキーを押してメモを見ればいいのです!

ちなみにここまで一気に飛ばしてきた方のためにBoostnoteの紹介記事を再掲しておきます。

niisi.hatenablog.jp

それでは具体的にどうやってBoostnoteをどう使えばいいかと言うと...

  1. Boostnoteで適当なフォルダを作る。("Markdown覚書"とか)
  2. 同じく適当なファイルを作る。("Markdownの書き方一覧"とか)
  3. 以下の内容をコピーする
    1. Markdown書き方一覧(2016年1月27日まで公開)のページに飛び、Copyを押す
    2. 上記のリンクが有効でなければ、この記事の最後に貼りつけるソースコードをコピーする。
  4. 2.で作ったファイルに3.でコピーした内容を貼り付ける

これだけで終わり!

f:id:kirari0831:20160120015211p:plain

Markdownを使っていて書き方が分からなくなったらショートカットキーを押してBoostnoteを開きいまつくったファイルを確認しましょう!(ショートカットキーについては先程記載した私の記事に詳しく書いてあります。)

それではMarkdownとBoostnoteを上手く使って便利なメモライフを堪能してください!

余談

今回Markdownの使い方の例を挙げたわけなんですが、Boostnoteをダウンロードしてきたときに最初から作成されているdefaultフォルダに今回書いたようなMarkdownの記述例ものっければ便利かなあなんて思いました。
あと、最近v0.5.2が出たそうなんだけど俺のBoostnoteくんが最新版になってるかどうかわからん*1

ソースコード

もし先程載せたMarkdown書き方一覧このリンクが有効でなくなってたら、以下の内容をコピーしてください。

# 見出し

# 大きい見出し
## ちょい大きい見出し
### 普通見出し
#### ちょい小さい見出し
##### 小さい見出し
###### かなり小さい見出し



# リスト

## 箇条書き
- リスト
    - リスト
    - リスト
* リスト
    * リスト
        * リスト

+ リスト


## 数字付き
1. リスト
2. リスト
3. リスト
    1. リスト
    2. リスト


1. 数字は
1. 何でもよいが
1. 表示する際は
1. 必ず順番通りになってしまう




# 段落と改行


## 段落
第1段落:段落を変えるには空行を一行以上いれればオッケー!

第2段落:ねっ?変わったでしょう。



第3段落:これだけ開けても大丈夫


## 改行
改行をするには最後の行に空白を2個以上入れる(スペースを最後に2回⇒)   
ほらっ変わった。
空白を入れないとエディタでは改行されていても改行されないので要注意。



# 強調表現
`*`1個で*斜体で強調*  
`**`2個で**太字で強調**  
`***`3個で***斜体&太字で強調***

フォントにMeiryoとか使ってると、斜体で表示されないので注意。  
まあ斜体はあんま使いどころないので太字で強調だけ覚えておきましょう。



# ソースコードの書き方

## 一行だけ
シングルクォートじゃなくて**バッククォート**な!
`loadImage()`


## 複数行

### そのまま
\``` ←\は取り除いておいてください
void setup(){
    size(600,600);
    noStroke();
}
\``` ←\は取り除いておいてください

### SyntaxHighlight
最初のバッククォートの後に言語名
\```processing ←\は取り除いておいてください
void setup(){
    size(600,600);
    noStroke();
}
\``` ←\は取り除いておいてください



# 引用
> 引用したい文の文頭に">"をいれる  
> うぇーい
>> 二重引用には">>"を文頭におく  
>> うぇーい



# 水平線
区切りたい時に使う。
アスタリスクとかハイフンを3つ以上連続で繋げればいいんだけど、それぞれの間に空白があっても構わない。

***
* * *
------------
- - -
_________
_ _ _ _ _ _

上記の**どれでも**可!



# リンク
## リンクだけ
URLを**貼り付けるだけ**でオッケー!

https://b00st.io/jp/

## 名前付きリンク
`[名前](URL)`と記述すると名前が表示される。

[Boostnote](https://b00st.io/jp/)



# 表組み
1段目がヘッダで2段目は中央揃えなどの指定法
ヘッダとそろえ方の指定は**必須**!

|ヘッダ|ヘッダ|ヘッダ|
|:--:|:--|--:|
|中央揃え|左揃え|右揃え|
|あんぱん|を|食べたい|

*1:+_+