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

#vue #nuxt #プログラミング #プログラミング初心者 #エンジニア #駆け出しエンジニア #駆け出しエンジニアと繋がりたい  #駆け出しWebクリエイターと繋がりたい #駆け出しWebクリエイター

🎈 この記事はWP専用です
https://wp.me/pc9NHC-18k

前置き

【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>

firebaseとの連携

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

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-18k