VS Code Automating Markdown compilation

2015年11月19日

VSCode 開発環境

t f B! P L

Markdownで書きたい

なぜかMarkdownで書くことは決めていたのですが、何を使って書くのが楽なのかは、全然分からない。 Visual Studio Codeなら見えがよいっぽい環境が楽に手に入りそうな感じがあったので、 お試しと、Automating Markdown compilationまでやってみました。 Markdownの記法に慣れ親しんでもいないし、思い入れも無いです。


経緯

Markdownは、blogの文章を書く用に使用したいと思いました。 それで、いくつか試してみました、

  • StackEdit 有料だったので、やめました。今思えば、お金払ってもよかったかも。
  • emacsのMarkdown-mode、C-c C-c pでプレビューできる。今思えば、これでも良かったのかも。
  • AtomはMarkdownプレビューなんか遅いらしい、Sublime Textは、金がかかるっぽい。
  • はてなに移ってもいいかなって思って調べたけど、公告入るのでやめた。

というわけで、放置していたbloggerに、Markdownで書いて、出力したhtmlを貼り付ける方式にしました。


Install Visual Studio Code

https://code.visualstudio.com/ から入れた。

  • editor右上の[Split Editor]で画面の左右分割できた。
  • Ctrl + Alt + →/← で、左右画面の移動できる。
  • Ctrl + Shift + V or 右上の[Open Preview]で、Markdownのプレビューできる。

ここら辺の情報や、VS CodeでのMarkdownの表示の感じなどは、ググればいくつかでてきました。 インストールしてみて、mdファイルをちょっと編集してみて良さそうだったので、これでやってみることに決めました。 visual studio code、VS Codeどっちで検索するのがよいんだろう...


Automating Markdown compilation

htmlを出力してもらわないといけないので、 Markdown and VS Code をみながら、自動でhtml出力されるようにしてみました。


Step 0:Create a test MD file

空のフォルダで、以下のsample.mdファイルをVS Codeで作成した。 EXPLORE > Open Folderで、保存したディレクトリを選択しておく。 この状態で、F1からConfigure Task Runnerと打つと、.vscodeフォルダにtasks.jsonファイルが作成された。

sample.md

Hello Markdown in VS Code!
====================

This is a simple introduction to compiling Markdown in VS Code.

Things you'll need:
* [node](https://nodejs.org)
* [marked](https://www.npmjs.com/package/marked)
* [tasks.json](/docs/editor/tasks)

## Section Title

> This block quote is here for your information.


Step 1:Install Gulp

Gulp以前に、node.jsもないので、installしました。v4.2.2-x64 入れた。
npm install gulp gulp-markdown
参考のページだと、-g 付けてるけど、なんかうまくいかなくて、.vscodeがあるフォルダにlocalインストールした。


Step 2:Create a simple Gulp task

sample.mdがあるディレクトリに、gulpfile.jsを作成。

gulpfile.js

var gulp = require('gulp');
var markdown = require('gulp-markdown');

gulp.task('markdown', function() {
    return gulp.src('**/*.md')
        .pipe(markdown())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }));
});

gulp.task('default', function() {
    gulp.watch('**/*.md', ['markdown']);
});


Step 3:Create tasks.json

.vscodeディレクトリにある、tasks.jsonに以下を記述。

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "default",
            "isBuildCommand": true,
            "showOutput": "always",
            "isWatching": true
        }
    ]
}


Step 4:Run the Build Task

Ctrl+Shift+Bを押すと、Build Taskが動き始めて、saveするたびに、 mdファイル名前に対応した、htmlファイルが更新されるようになりました。 それをブラウザで表示しといて、確認。最終的にその内容をそのままbloggerに貼り付ける。


その他

  • ブラウザで文字化けする -> 文字コードUTF-8に指定しなおしてる。面倒だ、なんとかしたい。
  • VS Codeを起動する度に、Ctrl+Shift+Bやってる。面倒だ。


参考

このブログを検索

QooQ