開発ブログ

【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を
使用しています💫


firebaseとの連携

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

コード

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

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

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


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

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

-開発ブログ
-,

© 2021 aLiz Nuxt