ブラウザから Markdown をプレビュー (gulp + browser-sync 使用)

なにこれ

VSCode で 日本語の Markdown ファイルをプレビューしながら編集するとゴミ文字が入るのが辛かったので、ブラウザから Markdown をプレビューできるようにした。

• Visual Studio Code で制御文字が混ざる問題 – kawaken’s blog
• Visual Studio Code の日本語問題まとめ – Qiita

gulpfile

• markdown ファイル (*.md) と画像ファイル (*.jpg, *.png) の変更を監視
• markdown ファイルの変更検知時に html へコンパイル
• 画像ファイルの変更検知時に画像ファイルを軽量化

使い方

$ git clone https://gist.github.com/c0acec9a768ae06268c82404d5d57fd5.git gulp-markdown-browser-sync
$ cd gulp-markdown-browser-sync

$ brew install libjpeg libpng
$ npm install -g gulp@next
$ npm install -g gulp-rename gulp-image gulp-markdown gulp-watch gulp-changed gulp-layout gulp-imagemin gulp-front-matter
$ npm install -g pug del
$ npm install -g browser-sync

$ mkdir images
# images ディレクトリに画像ファイルを設置

$ vim index.md
# なんか書く

$ mkdir -p dest/images
$ gulp

# dest 配下にコンパイルされた html と軽量化された画像ファイル
# ができてブラウザが開く