Nuxt ContentのPrism.jsに行番号を表示する

2020.12.27

行数を表示する
行数を表示するコンポーネントの設定
言語ファイルをimportする際について

Nuxt ContentでPrims.jsを使ったハイライトに対して↓のように行数を表示します。

検証した環境

1	nuxt	2.14.3
2	@nuxt/content	1.8.1

行数を表示する

Nuxt ContentはPrism.jsを使ってコードを表示/シンタックスハイライトを効かせる事が出来ます。

しかし基本は↓のように行番号を表示してくれません。

行数を表示するコンポーネントの設定

やり方は以下のissuesが参考になります。

https://github.com/nuxt/content/issues/28

コードを表示するコンポーネントで、まずPrism.jsのプラグインの prism-line-numbers を読み込むようにします。

<script>
const prism = require('prismjs')
import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
 
export default {
    // ...
    mounted () {
        prism.highlightAll()
    }
    // ...
}
</script>

TypeScript + nuxt-property-decorator でコンポーネントを作っている場合も一緒

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'
const prism = require('prismjs')
import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
 
@Component
export default class ArticleContent extends Vue {
  @Prop() article!: object
 
  mounted() {
    prism.highlightAll()
  }
}
</script>

そしてcssを実装します。

<style>
pre[class*='language-'].line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}
 
pre[class*='language-'].line-numbers > code {
  position: relative;
  white-space: inherit;
}
 
.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em; /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  border-right: 1px solid #999;
 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
 
.line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
}
 
.line-numbers-rows > span:before {
  content: counter(linenumber);
  color: #999;
  display: block;
  padding-right: 0.8em;
  text-align: right;
}
</style>

ここまで実装すると以下のように行番号が表示されつつもシンタックスハイライトが一切かかっていない状態で表示されます。

最後にシンタックスハイライトが効くようにします。

そのためにはシンタックスハイライトを効かせたい言語のファイルをimportすればOK！

例えばswift・json・bash・rubyに対してシンタックスハイライトを効かせたい場合は以下のようにします。

<script>
const prism = require('prismjs')
import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
import 'prismjs/components/prism-swift.js'
import 'prismjs/components/prism-json.js'
import 'prismjs/components/prism-bash.js'
import 'prismjs/components/prism-ruby.js'
 
export default {
    // ...
    mounted () {
        Prism.highlightAll()
    }
    // ...
}
</script>