概要

こちらの記事が詳しかったです。
参考にさせてもらいつつ、本サイトに導入してみました。

PrismはHTMLコンテンツ内のコーディング（プログラミング言語）のシンタックスハイライトを行ってくれる便利なライブラリーです。
ついでに、行番号も表示してくれます。
サポートしている言語は本家のサイトで確認できます。

実施事項

prismjsのインストール

yarn add prismjs

pluginの作成とインクルード

plugins/prism.js

import Prism from 'prismjs'
import 'prismjs/themes/prism-okaidia.css'
// 必要な分だけprogramming languageのサポートをロード
import 'prismjs/components/prism-bash'
import 'prismjs/components/prism-docker'
import 'prismjs/components/prism-kotlin'
import 'prismjs/components/prism-python'
import 'prismjs/components/prism-rust'
import 'prismjs/components/prism-sql'
import 'prismjs/components/prism-swift'
import 'prismjs/components/prism-yaml'
// 行番号表示用のpluginをロード
import 'prismjs/plugins/line-numbers/prism-line-numbers.min.js'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'

export default (context, inject) => {
  inject('prism', Prism)
}

nuxt.config.js

plugins: [
  { src: '~/plugins/prism' }, // この行を追加
],

presentation側の修正

MarkdowViewer.vue

• "line-numbers"というclassを追加します。
• "mounted"の箇所でPrismのhighlightAllを呼び出します。

<div class="subheading text--primary markdown-text line-numbers" v-html="html" />

<script>
export default {
  props: {
    html: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.$prism.highlightAll()
  }
}
</script>

以上で対応完了です。