[Vue.js 1.x] 最低限のMarkdown Editor作成 ( Vue.js + Marked.js + Highlight.js )

Vue.jsの公開されているMarkdownエディタの[サンプル](http://jp.vuejs.org/examples/)にコードブロックハイライトを追加してみる

# 注意

本記事は Vue.js 1.x 向けに書かれたものです。現在は2.xが出ているため参考程度としてください。

# できること
+ フォームに入力したMarkdownの整形
+ code block で任意の言語のハイライト

# 使っているもの
+ [Vue.js](http://jp.vuejs.org/)
+ [Marked.js](https://github.com/chjj/marked)
+ [Highlight.js](https://highlightjs.org/)

# デモ
[demo](http://koara-local.github.io/test-simple-markdown-editor/)

# コード
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.5/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/solarized_light.min.css">

<style type="text/css">
html, body, #editor {
  margin: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}
textarea, #editor div {
  display: inline-block;
  width: 49%;
  height: 100%;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 20px;
}
textarea {
  border: none;
  border-right: 1px solid #ccc;
  resize: none;
  outline: none;
  background-color: #f6f6f6;
  font-size: 14px;
  font-family: 'Monaco', courier, monospace;
  padding: 20px;
}
</style>

<div id="editor">
    <textarea v-model="input" debounce="300"></textarea>
    <div v-html="input | marked"></div>
</div>

<script>
(function() {
marked.setOptions({
    highlight: function(code, lang) {
        return hljs.highlightAuto(code, [lang]).value;
    }
});
new Vue({
    el: '#editor',
    data: {
        input: '# hello'
    },
    filters: {
        marked: marked
    }
})
}).call(this);
</script>
```

[koara-local/test-simple-markdown-editor](https://github.com/koara-local/test-simple-markdown-editor)

# 課題

+ Marked.jsは更新が停滞中
+ Marked.jsではemojiが使えない -> [markdown-it](https://github.com/markdown-it/markdown-it)使うとよさそう
+ もうちょっとリッチな編集がしたい -> [CodeMirror](http://codemirror.net/)を使うとよさそう
+ Highlight.jsで◯◯がハイライトされない？ -> [Getting highlight.js](https://highlightjs.org/download/)から追加分にチェックをいれてダウンロードする

# jsでどこまでできるか
がんばれば[これぐらい](http://jbt.github.io/markdown-editor/#bVNBbtswELzzFVs4gO3GltpremqTpgkQA0WTnoICoUVSpC1yBXJlJyn69y4pw84hgAnJ5HBmd2Y1gdkPRzfDenndyR1GreawknGrcB/gu3KEUYhvMrkGhqTN0IHRkoaooXOJLoSAj3BJsTu/hxouveInISS500BWg3GdPkGsM3QCHv4xvLGISR8vynQqASPcPKzuMsdVlC3IoEBF7EEWbnCBb1kdy+0OpQJHGXydDxsMpAMlkHyeqfk0lLp+/7qDhPCCAzQyQLIZkQmTEOJ26iEgtIgKJME+OnKhZQLfM2mdcZ2OQPqZFpmlxYJhCfSabMYycUy6M5UQd4jbBZeb/fpQ/DKI+bGWcXy8CvGV28pdTFMh4cqV/gAX55/Z4aenp43cydRE15M4m5khNOQwzOZ/BcDZbKrcbjqvLPluNr0F6VmMt6rp/Iv4x4vvC/FgXQL+PWKAMfA/M0vUp4u6bh3ZYV016OvNmmp/8H6pS/zz3GKnCbisbcA9OAO3U45p/Slus6NUSt7n8rld8ZPTSTmNVazgCnFdMsvyj7krGFlHdRb3UTGmiPcRN7qhVGfcQb2eL8BE9LC3rrEiZ+dC6l2U2YIsw4anRdEozll+ewGXo/Kc/QjjTIhBjfS5xMlkAvc0GJNHWmUOL7e6EI0D/Xi0wNG7Nr05f/s+52jjaXZ7GRMPQ2G85JZWLsY3necufdmqgqZ6vJwblHtdWkkvXP/z0rrWdryIax1NKYzH7WqTjpwJDe15lr0MTjapwtiWvfqIrnU4SI30cDzJc8ufBw7UD1QmENYdNttU5DZpqbTpJOl3HVEybLGVrj7hRpX21fV9pkYDSpI82s1zY3ixIn+MSfwH)はできるらしい
[jbt/markdown-editor](https://github.com/jbt/markdown-editor/)