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

Vue.jsの公開されているMarkdownエディタのサンプルにコードブロックハイライトを追加してみる

注意

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

できること

• フォームに入力したMarkdownの整形
• code block で任意の言語のハイライト

使っているもの

• Vue.js
• Marked.js
• Highlight.js

デモ

demo

コード

<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

課題

• Marked.jsは更新が停滞中
• Marked.jsではemojiが使えない -> markdown-it使うとよさそう
• もうちょっとリッチな編集がしたい -> CodeMirrorを使うとよさそう
• Highlight.jsで◯◯がハイライトされない？ -> Getting highlight.jsから追加分にチェックをいれてダウンロードする

jsでどこまでできるか

がんばればこれぐらいはできるらしい
jbt/markdown-editor