Vueと共通

【Nuxt.js】Nuxt実践編:シンタックスハイライターを使おう

前置き

シンタックスハイライターを使ってみましょう💫
コードを載せたい時に使用するものですね💡

参考
https://madogiwa0124.hatenablog.com/entry/2019/01/03/203334
https://gurutaka-log.com/nuxt-vue-highlightjs-syntax-highlight#i-2


highlight.js

https://highlightjs.org/

Vue用にvue-highlightjsがあるので
こちらを使用します💫
https://www.npmjs.com/package/vue-highlightjs

cssはこの辺のやつをコピペして
読み込めばOKです
https://github.com/highlightjs/highlight.js/tree/master/src/styles

⬇️a11y-dark.cssの場合


GitHubのマークダウンCSS

GitHubのマークダウンcss
というのがあるらしく
使って見ました。
これだけでエディタが作れるかもしれません。
https://github.com/sindresorhus/github-markdown-css

シンタックスハイライターの部分は
タグをエスケープさせて
<&lt;
>&gt;
にする必要があるので
エディタとして使っていくのは
実用的ではなさそう。

CDNを使用しました。
https://cdnjs.com/libraries/github-markdown-css

外部リソースを使うには?


まとめ

タグのエスケープが面倒ですが
これはmarked.jsと組み合わせれば
その必要がなくなるのか、
検証していきたいと思います!💪

以前エディタのQuillを使用しましたが、
もっとシンプルなエディタを自作できたら
面白いな〜と思っています🎈🧸

-Vueと共通
-,

© 2024 aLiz Nuxt