<追記>記事を2つに分けました。
長くなってしまったので、2つに分けました。
前編では軽い使い方とお役立ち拡張機能の紹介、
後編では使いこなしTipsの紹介みたいな構成になっています。
Markdownとは
これ私の授業ノートです。(ちなみに書いている授業でやっている内容は全く分かっていません。)
内容はどうでもいいんです。
これ、どうやって書いたでしょう？
察しはついていると思いますが、これWordでも、とっつきにくいLaTeXでもなく、Markdownなんです!!
え？Wordで良くないって？
Wordって例えば、ここの文字タイトルだから文字を大きくしようとかって時に一々フォントのところで、フォントサイズいじるのが面倒くさくないですか？
しかも、ファイルは重いし、開くの時間かかるし、編集を有効にする押すの遅いだるいし。
え？LaTeXで良くない？
pdf文書だけじゃなく、見た目もめちゃくちゃ凝れて、スライドも作れて、webページに変換できるからurlですぐ共有できるのはmarkdownだけだよ!!
時代はmarkdown一択!!
Markdownを書いてみよう
適当な場所でファイルを右クリックするとこのようにCodeで開くという項目が出現します。
現れない人はおそらくVSCodeがパソコンに入っていません。
お使いのPCは大変危険な状態です。早急にインストールしましょう。
VSCodeがインストールされてるのに、この項目がない方はおそらくインストールするときのオプションに「Codeで開くを追加する」的なのがあったと思います。それを有効にしてインストールし直しましょう。インストールし直しても、データは消されません。
さて、VSCodeでまず適当な名前を付けたMarkDownファイルを作成します。
それでは右側のエディター部分で実際にファイルを作ってみましょう。
エディター部分は、ただのメモ帳と同じです。
下のような文を打ってみましょう。
# タイトル
これは本文です。
入力し終わったら、ctrl + Kを押した後にvキーを押します。すると画面が2つに分かれました。
右側が完成品で、左側が編集画面ということです。
Markdown使いこなし~初級編~
タイトル文字
さっき入力した文字から、#と半角スペースを消しましょう。すると「タイトル」という文字が小さくなると思います。
#と半角スペースを行の先頭入れるとその文字は大きくなります。
ちなみに、#の個数で文字の大小が調整できます。
太字
太字のやり方も覚えましょう。
太字にしたい文字を**で囲むと太字になります。
画像
と書くと画像を貼れます。
例えば、と書くと、こんな感じで画像が貼れます。
箇条書き
あと、よく使うのが箇条書きですね。
行の先頭に*と半角スペースを書くと箇条書きになります。
あっ、言うのを忘れていました。
VSCodeのデフォルトの設定では、行の末尾に半角スペースを2つ打たないと改行されません
でも、毎回行の最後にスペースを2つ打つのは大変です。
なので、良い設定をお教えいたします。
vscodeにおすすめのMarkdownの設定
拡張機能編
とりあえず色々便利な拡張機能があるので、お好きなものを入れつつユーザー設定に進みましょう。
拡張機能はctrl+shift+xで開けます。
Path Autocomplete
VScode使用者なら大半の人が入れているであろう定番拡張機能。
英名の通り、ファイル名を打とうとすると補完してくれます。
テキスト校正くん
Wordとかにもある、文章をチェックしてくれる機能をvscodeでも利用できるようにする機能です。
Paste Image
markdownに画像を貼りたいときに大活躍する拡張機能。
クリップボード上に保存されている画像をCtrl + Pするだけで、ドキュメントに貼り付けられます。
Markdown All In One
Markdownを書く上で痒い所に手が届くショートカットキーを山ほど追加してくれる。
ここでは書ききれないほど、色んな機能があるので詳しくは拡張機能の詳細を確認しよう。
Draw.io Integration
Vscode上でDraw.ioが使えてしまうという拡張機能。
ちょっとした図を書くのにも便利。
Markdown PDF
Markdownを簡単にPDFに変換できる。これがあれば、レポートなども作成できます。
PDF以外にもHtmlやpng等にも対応。
ユーザー設定編
ユーザー設定はCtrl + ,キーで開けます。
改行設定
先ほど改行するときはスペースを2回入れるといいましたが、Enterキーで改行する方法もあります。
Markdown > Preview:Breaksの項目にチェックマークを入れてください。
Markdown-pdf拡張機能を入れた方は、
Markdown-pdf: Breaksも追加でチェックマークを入れましょう。片方だけ入れちゃうとプレビューと出来上がったpdfが異なってしまいます。
スタイル設定
vscodeデフォルトのmarkdownの見た目でも良いのですが、少し見にくいので私はgithubで使われているスタイルを適用しています。
適用の仕方ですが、
Ctrl + Shift + Pで出現するフォームにSetting.jsonと打ち、基本設定:ユーザー設定を開く(JSON)を選択します。
settings.jsonが開かれるので、一番後ろから2番目 }の上の行に以下の文字列を追加します。
"markdown.styles": ["https://boxfish-jp.github.io/githubmarkdown/github-markdown.css"],
"markdown-pdf.styles": [
"https://boxfish-jp.github.io/githubmarkdown/github-markdown.css"
]
これで設定は完了です。これで快適なmarkdownライフが過ごせます。
後編へ続く