理系大学生のためのMarkdown活用ガイド ~前編~

# <追記>記事を2つに分けました。
長くなってしまったので、2つに分けました。

前編では軽い使い方とお役立ち拡張機能の紹介、
後編では使いこなしTipsの紹介みたいな構成になっています。

https://qiita.com/boxfish_jp/items/4ec8cf578a9137254257

# Markdownとは
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/ac6b1562-7301-3962-7dd0-5b5b0b839247.png)

これ私の授業ノートです。(ちなみに書いている授業でやっている内容は全く分かっていません。)
内容はどうでもいいんです。
**これ、どうやって書いたでしょう？**

察しはついていると思いますが、これWordでも、とっつきにくいLaTeXでもなく、**Markdownなんです!!**

え？Wordで良くないって？
Wordって例えば、ここの文字タイトルだから文字を大きくしようとかって時に一々フォントのところで、フォントサイズいじるのが面倒くさくないですか？
しかも、ファイルは重いし、開くの時間かかるし、編集を有効にする押すの遅いだるいし。

え？LaTeXで良くない？
pdf文書だけじゃなく、見た目もめちゃくちゃ凝れて、スライドも作れて、webページに変換できるからurlですぐ共有できるのはmarkdownだけだよ!!

**時代はmarkdown一択!!**

# Markdownを書いてみよう
適当な場所でファイルを右クリックするとこのようにCodeで開くという項目が出現します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/4ca9f7ae-394d-7c01-0de8-2a3b9d602266.png)
現れない人はおそらくVSCodeがパソコンに入っていません。
お使いのPCは大変危険な状態です。早急にインストールしましょう。
VSCodeがインストールされてるのに、この項目がない方はおそらくインストールするときのオプションに「Codeで開くを追加する」的なのがあったと思います。それを有効にしてインストールし直しましょう。インストールし直しても、データは消されません。

さて、VSCodeでまず適当な名前を付けたMarkDownファイルを作成します。
![md1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/317fc420-fd81-344b-b0b4-4ca49a492892.gif)
それでは右側のエディター部分で実際にファイルを作ってみましょう。
エディター部分は、ただのメモ帳と同じです。

下のような文を打ってみましょう。
```qiita.md
# タイトル
これは本文です。
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/3a01316c-1814-3432-99c6-ded86dba36b1.png)

入力し終わったら、`ctrl + K`を押した後に`v`キーを押します。すると画面が2つに分かれました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/3424c7e6-eb23-522e-2e23-4ab8b546e56e.png)

:::note info
右側が完成品で、左側が編集画面ということです。
:::

# Markdown使いこなし~初級編~
## タイトル文字
さっき入力した文字から、`#`と`半角スペース`を消しましょう。すると「タイトル」という文字が小さくなると思います。

:::note info
`#`と`半角スペース`を行の先頭入れるとその文字は大きくなります。
:::

ちなみに、`#`の個数で文字の大小が調整できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/9f4e3498-126e-ead2-265a-2b79605dc370.png)

## 太字
太字のやり方も覚えましょう。

:::note info
太字にしたい文字を`**`で囲むと太字になります。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/e49ead7b-3658-ad6e-6091-4179dfd057ed.png)

## 画像
:::note info
`![画像の説明](画像のパスまたはurl)`と書くと画像を貼れます。
:::
例えば、`![ヨシ！](https://comisoku.com/wp-content/uploads/2020/10/20201013113308.jpg)`と書くと、こんな感じで画像が貼れます。
![切実な望み](https://comisoku.com/wp-content/uploads/2020/10/20201013113308.jpg)

## 箇条書き
あと、よく使うのが箇条書きですね。

:::note info
行の先頭に`*`と`半角スペース`を書くと箇条書きになります。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/832e2994-042e-d2f4-e20c-448193d7ed3c.png)

あっ、言うのを忘れていました。

:::note warn
VSCodeの**デフォルト**の設定では、**行の末尾に`半角スペース`を2つ打たないと改行されません**
:::

でも、毎回行の最後にスペースを2つ打つのは大変です。
なので、良い設定をお教えいたします。

# vscodeにおすすめのMarkdownの設定
## 拡張機能編
とりあえず色々便利な拡張機能があるので、お好きなものを入れつつユーザー設定に進みましょう。

拡張機能は`ctrl+shift+x`で開けます。
### Path Autocomplete
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/a1e58b9e-0c7e-ce87-6b3b-bcd1354bc761.png)

VScode使用者なら大半の人が入れているであろう定番拡張機能。
英名の通り、ファイル名を打とうとすると補完してくれます。
![path autocompleteの実演](https://raw.githubusercontent.com/ionutvmi/path-autocomplete/master/demo/path-autocomplete.gif)

### テキスト校正くん
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/e6873f24-2b37-ac82-3bc7-dcf93adcc434.png)

Wordとかにもある、文章をチェックしてくれる機能をvscodeでも利用できるようにする機能です。
![テキスト校正くん](https://raw.githubusercontent.com/ics-creative/project-japanese-proofreading/e8089210cafe8577d2d385a429ff6ec0aac5da02/images/demo.gif)

### Paste Image
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/43acf5cd-0c0b-5218-dbc3-7d9667083e34.png)
markdownに画像を貼りたいときに大活躍する拡張機能。
クリップボード上に保存されている画像を`Ctrl + P`するだけで、ドキュメントに貼り付けられます。
![Paste Imageの説明](https://raw.githubusercontent.com/mushanshitiancai/vscode-paste-image/master/res/vscode-paste-image.gif)

### Markdown All In One
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/29aaa72c-7a25-7277-3328-07590efe7e0c.png)
Markdownを書く上で痒い所に手が届くショートカットキーを山ほど追加してくれる。
ここでは書ききれないほど、色んな機能があるので詳しくは拡張機能の詳細を確認しよう。

### Draw.io Integration
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/621fc8be-be9e-c932-765b-27b73177fbd8.png)
Vscode上でDraw.ioが使えてしまうという拡張機能。
ちょっとした図を書くのにも便利。
![Draw.io Integrationの説明](https://raw.githubusercontent.com/hediet/vscode-drawio/c2709107abcc7c0973d567ce123422344654acf7/docs/demo.gif)

### Markdown PDF
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/0e1af9cf-25cf-d2bb-cc76-4d37b198560b.png)
Markdownを簡単にPDFに変換できる。これがあれば、レポートなども作成できます。
PDF以外にもHtmlやpng等にも対応。

## ユーザー設定編
ユーザー設定は`Ctrl + ,`キーで開けます。
### 改行設定
先ほど改行するときはスペースを2回入れるといいましたが、`Enter`キーで改行する方法もあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/893debd5-3926-c699-9a4e-22ce6d1fbdcb.png)

`Markdown > Preview:Breaks`の項目にチェックマークを入れてください。
>Markdown-pdf拡張機能を入れた方は、`Markdown-pdf: Breaks`も追加でチェックマークを入れましょう。片方だけ入れちゃうとプレビューと出来上がったpdfが異なってしまいます。

### スタイル設定
vscodeデフォルトのmarkdownの見た目でも良いのですが、少し見にくいので私はgithubで使われているスタイルを適用しています。

適用の仕方ですが、
`Ctrl + Shift + P`で出現するフォームにSetting.jsonと打ち、`基本設定:ユーザー設定を開く(JSON)`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/14126da3-eea0-c389-8ba2-ca94ff95604f.png)
settings.jsonが開かれるので、一番後ろから2番目 `}`の上の行に以下の文字列を追加します。
```JSON
"markdown.styles": ["https://boxfish-jp.github.io/githubmarkdown/github-markdown.css"],
"markdown-pdf.styles": [
    "https://boxfish-jp.github.io/githubmarkdown/github-markdown.css"
]
```

これで設定は完了です。これで快適なmarkdownライフが過ごせます。

# 後編へ続く

https://qiita.com/boxfish_jp/items/4ec8cf578a9137254257