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

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

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!


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

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

言語ファイルをimportする際について

対応している言語は公式サイトが参考に
https://prismjs.com/


importするファイルはGitHubのページが参考になります。
https://github.com/PrismJS/prism/tree/master/components




ただし、利用しているPrism.jsのバージョンによってもファイル名やimport出来る言語も変わってくると思うので、
1番正確なのはプロジェクト内のPrism.jsのフォルダ内のファイルですね。


importするファイルについてはnode_modules > prismsjs > componentsフォルダ内を確認します。

おすすめ