お？意外といけるやん！

Vue.js と makedjs で Markdown エディタを実装してみた

vue.js blog作成

成果物

f:id:ikkitang1211:20191213000123g:plain

Vue.js を前職で扱っていたのでそれを使って実装してみた。

実装の方針

実装の方針としては以下の感じ。そんなに難しい事してない。

textare の入力値を vue.js の一つの data に binding する。

binding の参考としてはこの辺を参考にしてみてください。

入力されたmarkdown を算出プロパティを用いて html に変換して div 要素に binding する

算出プロパティはこの辺

binding ( v-html ) はこの辺

また、入力されたmarkdown をhtml に変換するのは以下のOSSを使用した。

上記の markedjs を使用するとこれだけで markdownがhtmlに変換されるらしい。便利。

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked('# Marked in the browser\n\nRendered by **marked**.');
  </script>
</body>
</html>

という事で gifのものが出来ました。

サンプルコードは以下です。ローカルの動かしてた奴から必要そうな奴だけを残した雑なもの。（スタイルあててないので gif と同じ見た目にはならない）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vue-Markdown</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
    <div>
        <header>
            <h1>Blog</h1>
        </header>
    </div>

    <div id="app">
        <div>
            <textarea class="form-control" rows="15" v-model="message"></textarea>
            <vue-markdown v-html="parsed_markdown"></vue-markdown>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    message: '# Markdownのテスト',
                }
            },
            computed: {
                parsed_markdown: function () {
                    return marked(this.message)
                }
            }
        });
    </script>
</body>
</html>

後期

Flexbox を使って適当に装飾したりしてみたけど textare が描画時の画面幅の50% で固定されたりしてる・・・むずい。。(´・ω・｀)

width の考え方はまだ慣れてないですね、頑張らねば。