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

Contents

前置き
highlight.js
GitHubのマークダウンCSS
まとめ

前置き

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

参考
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

<template>
  <div class="page">
    <pre v-highlightjs>
      <code class="javascript">&lt;h1&gt;Hello!&lt;/h1&gt;</code>
    </pre>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
</style>

<code class="javascript"><h1>Hello!</h1></code>

</pre>

</div>

</template>

export default {

}

</script>

</style>

import Vue from 'vue'

import VueHighlightJS from 'vue-highlightjs'

Vue.use(VueHighlightJS)

import Vue from 'vue'

import VueHighlightJS from 'vue-highlightjs'

Vue.use(VueHighlightJS)

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

⬇️a11y-dark.cssの場合

/* a11y-dark theme */
/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
/* @author: ericwbailey */

/* Comment */
.hljs-comment,
.hljs-quote {
  color: #d4d0ab;
}

/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
  color: #ffa07a;
}

/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
  color: #f5ab35;
}

/* Yellow */
.hljs-attribute {
  color: #ffd700;
}

/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
  color: #abe338;
}

/* Blue */
.hljs-title,
.hljs-section {
  color: #00e0e0;
}

/* Purple */
.hljs-keyword,
.hljs-selector-tag {
  color: #dcc6e0;
}

.hljs {
  display: block;
  overflow-x: auto;
  background: #2b2b2b;
  color: #f8f8f2;
  padding: 0.5em;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

@media screen and (-ms-high-contrast: active) {
  .hljs-addition,
  .hljs-attribute,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-bullet,
  .hljs-comment,
  .hljs-link,
  .hljs-literal,
  .hljs-meta,
  .hljs-number,
  .hljs-params,
  .hljs-string,
  .hljs-symbol,
  .hljs-type,
  .hljs-quote {
        color: highlight;
    }

    .hljs-keyword,
    .hljs-selector-tag {
        font-weight: bold;
    }
}

/* a11y-dark theme */

/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */

/* @author: ericwbailey */

/* Comment */

.hljs-comment,

.hljs-quote {

color: #d4d0ab;

}

/* Red */

.hljs-variable,

.hljs-template-variable,

.hljs-tag,

.hljs-name,

.hljs-selector-id,

.hljs-selector-class,

.hljs-regexp,

.hljs-deletion {

color: #ffa07a;

}

/* Orange */

.hljs-number,

.hljs-built_in,

.hljs-builtin-name,

.hljs-literal,

.hljs-type,

.hljs-params,

.hljs-meta,

.hljs-link {

color: #f5ab35;

}

/* Yellow */

.hljs-attribute {

color: #ffd700;

}

/* Green */

.hljs-string,

.hljs-symbol,

.hljs-bullet,

.hljs-addition {

color: #abe338;

}

/* Blue */

.hljs-title,

.hljs-section {

color: #00e0e0;

}

/* Purple */

.hljs-keyword,

.hljs-selector-tag {

color: #dcc6e0;

}

.hljs {

display: block;

overflow-x: auto;

background: #2b2b2b;

color: #f8f8f2;

padding: 0.5em;

}

.hljs-emphasis {

font-style: italic;

}

.hljs-strong {

font-weight: bold;

}

@media screen and (-ms-high-contrast: active) {

.hljs-addition,

.hljs-attribute,

.hljs-built_in,

.hljs-builtin-name,

.hljs-bullet,

.hljs-comment,

.hljs-link,

.hljs-literal,

.hljs-meta,

.hljs-number,

.hljs-params,

.hljs-string,

.hljs-symbol,

.hljs-type,

.hljs-quote {

color: highlight;

}

.hljs-keyword,

.hljs-selector-tag {

font-weight: bold;

}

export default {
  css: [
    '~/assets/css/highlight.css'
  ],
  plugins: [
    '~/plugins/highlight'
  ],
}

export default {

css: [

'~/assets/css/highlight.css'

plugins: [

'~/plugins/highlight'

}

GitHubのマークダウンCSS

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

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

<template>
  <div class="page">
    <article class="markdown-body">
      <h1>Unicorns</h1>
      <p>All the things</p>
      <code>
        &lt;h1&gt;&lt;/h1&gt;
      </code>
    </article>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .markdown-body {
		box-sizing: border-box;
		min-width: 200px;
		max-width: 980px;
		margin: 0 auto;
		padding: 45px;
	}
</style>

<h1>Unicorns</h1>

<p>All the things</p>

<code>

</code>

</article>

</div>

</template>

export default {

}

</script>

.markdown-body {

box-sizing: border-box;

min-width: 200px;

max-width: 980px;

margin: 0 auto;

padding: 45px;

}

</style>

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

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

export default {
  head: {
    link: [
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css' },
    ]
  },
}

export default {

head: {

link: [

{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css' },

]

}

まとめ

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

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