visual studio codeでmarkdownを書く環境を作ったお話

弄ってみた

動機・目的

  • 最近visual studio code(以下vscode)を使う機会が増えた
  • エディタ切り替えるの面倒くさいしmarkdownもvscodeでササッと書きたい
  • markdownのプレビューをある程度いじりたい
  • 本の内容とか手軽にまとめられたらうれしい

以下macOS Sierraで動作させていく。

vscodeに環境を作っていく

vscodeのプラグインのインストール

  • Markdown Preview Enhanced
    • 高機能なmarkdownプレビューのプラグイン(らしい)
  • Paste Image
    • クリップボードの画像をmarkdown記法 or html記法で貼り付けれる

プラグインの設定をする

Markdown Preview Enhanced

コマンドパレットで「Markdown Preview Enhanced: Customize CSS」を開く。
style.lessを編集してmarkdown preview enhancedのスタイルを決める。
以下簡単に設定してみたやつ。本の内容まとめるにはこれで十分だった。

.centerは画像センタリングするときに使うクラスとして作ったけど、imgタグに設定したほうがよかったかもしれない。

Paste Image

今回はペーストするイメージの保存先を作業ディレクトリの img/ 以下に置くっていうのと、画像をペーストする際にmarkdown記法ではなく<img>タグを使って表示させるようにする。

macOSでは command + shift + control + 4 でスクショ結果をそのままクリップボードに貼り付けられるからめちゃくちゃ便利。

 

markdown用のエディタがあるけどvscodeをよく使うならありだと思う。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください