【Nuxt.js】開発ブログ：marked.js + highlight.js + firebase

前置き

【Nuxt.js】Nuxt実践編：シンタックスハイライターを使おう
こちらの記事で
シンタックスハイライターを使用した際
タグのエスケープが面倒なので
marked.jsと組み合わせて検証する
というところで終わりました。
ということで今回は検証！
そしてfirebaseとの連携も検証！

結論と使用用途

タグのエスケープ不要で
簡単に作成できました❤️

ということで
このエディタはオフラインでも
マークダウンの確認ができて
あとからブログなどにコピペする
といった使い方がメインになりそうです💡

firebaseとの連携もできそう(検証中)

以前から実装できないか
考えているfirebaseとの連携は。
入力コードをfirebaseにsetして
シンタックスハイライターを効かせて
表示させてみたいのですが…！
marked.jsのマークダウン表示はできて
highlight.jsでのハイライトは
まだできておりません🤔💭

marked.js + highlight.js

参考:
Vue.js + marked.js + highlight.jsを使ってシンタックスハイライト機能付きマークダウンエディタを作ってみたのでMEMO

こちらは参考記事を
丸コピで実装できるので
解説はしません💡

marked.jsのオプションで
Vue用のvue-highlightjs
ではなく通常のhighlight.jsを
使用しています💫

<template>
  <form id="post-form">
    <div id="editor">
      <textarea v-model="markdownText">input</textarea>
    </div>
    <div id="preview">
      <div v-html="compiledMarkdown"></div>
    </div>
  </form>
</template>

<script>
  import marked from 'marked';
  import hljs from 'highlightjs';

  export default {
    name: 'postForm',
    created: function () {
      marked.setOptions({
        langPrefix: '',
        highlight: function(code, lang) {
          return hljs.highlightAuto(code, [lang]).value
        }
      });
    },
    computed: {
      compiledMarkdown: function () {
        return marked(this.markdownText)
      }
    },
    data: function () {
      return {
        markdownText: ''
      }
    }
  }
</script>

<textarea v-model="markdownText">input</textarea>

</div>

</div>

</form>

</template>

import marked from 'marked';

import hljs from 'highlightjs';

export default {

name: 'postForm',

created: function () {

marked.setOptions({

langPrefix: '',

highlight: function(code, lang) {

return hljs.highlightAuto(code, [lang]).value

}

});

computed: {

compiledMarkdown: function () {

return marked(this.markdownText)

}

data: function () {

return {

markdownText: ''

}

</script>

firebaseとの連携

単純に入力とプレビューで
マークダウン+ハイライトが使えるなら
firebaseに応用できないか
ということでチャレンジ💪

コード

まずはコードから。
シンプルに取得したコードを
v-htmlで表示させています。

todoリストの使い回しなので
命名の変更などをしておらず
かなり雑ですが…
表示の確認ができれば良いので…

storeのVuexは
おなじみのfirebaseの
送信・取得なので
特に記載しません。

<template>
  <div class="page">
    <p>入力</p>
    <form
      id="post-form"
      @submit.prevent="submitTodo"
    >
      <div id="editor">
        <textarea v-model="markdownText">input</textarea>
      </div>
      <button
        type="submitTodo"
      >
        Add
      </button>
      <p>プレビュー</p>
      <div id="preview">
        <div v-html="compiledMarkdown"></div>
      </div>
    </form>
    <p>取得</p>
      <ul>
        <li
          v-html="todo"
          v-for="(todo, index) in todos"
          :key="todo.id"
          @click="deleteTodo(index)"
        >
          {{ todo.todo }}
        </li>
      </ul>
  </div>
</template>

<script>
  import marked from 'marked';
  import hljs from 'highlightjs';

  export default {
    async fetch ({ store }) {
      await store.dispatch('sample/getTodos')
      marked.setOptions({
        langPrefix: '',
        highlight: function(code, lang) {
          return hljs.highlightAuto(code, [lang]).value
        }
      });
    },
    computed: {
      compiledMarkdown: function () {
        return marked(this.markdownText)
      },
      todos () {
        return this.$store.getters['sample/todos']
      }
    },
    data: function () {
      return {
        markdownText: ''
      }
    },
    methods: {
      submitTodo () {
        if(this.markdownText) {
          this.$store.dispatch('sample/submitTodo', this.markdownText)
          this.markdownText = ''
        }
      },
    },
  }
</script>
<style src='highlightjs/styles/atelier-estuary-light.css'></style>

<form

id="post-form"

@submit.prevent="submitTodo"

<textarea v-model="markdownText">input</textarea>

</div>

<button

type="submitTodo"

Add

</button>

<p>プレビュー</p>

</div>

</form>

<ul>

<li

v-html="todo"

v-for="(todo, index) in todos"

:key="todo.id"

@click="deleteTodo(index)"

</li>

</ul>

</div>

</template>

import marked from 'marked';

import hljs from 'highlightjs';

export default {

async fetch ({ store }) {

await store.dispatch('sample/getTodos')

marked.setOptions({

langPrefix: '',

highlight: function(code, lang) {

return hljs.highlightAuto(code, [lang]).value

}

});

computed: {

compiledMarkdown: function () {

return marked(this.markdownText)

todos () {

return this.$store.getters['sample/todos']

}

data: function () {

return {

markdownText: ''

}

methods: {

submitTodo () {

if(this.markdownText) {

this.$store.dispatch('sample/submitTodo', this.markdownText)

this.markdownText = ''

}

</script>

marked.jsで表示

【Nuxt.js】開発ブログ：firebaseでチャットアプリ④ > textareaの選択した文字に装飾(ボツネタ) > v-htmlで表示確認
以前こちらで<p style="color: red;">red</p>と
入力してfirebaseに送信した時には
このような状態でした。

⬇️Before

⬇️After
今回はmarked.jsのおかげで
エスケープ処理がされずに
純粋なタグとして送信できました🙌

highlight.jsで表示

検証段階です。
リストの1番したに追加されていますが
プレビューのように反映されていません。

ただプレビューで
ハイライトが効いているので
表示のさせ方を工夫すれば
できそうな気はします🌟

まとめ

marked.jsで
コードを変えることなく
そのままfirebaseに
送信できたことが大きいです♪

Slackみたいなコード共有できる
チャットを作ってみたい！から始まり

textarea内で選択した文字の前後に
タグを入れてハイライターっぽくできないか
とか迷走していましたが🙄(笑)

近しいところまで来ている気がします🙌