WordpressのRestAPIを、CloudFront with AwsWAFで構築しています。
Wordpressでプログラムコードを含む記事をアップするケースがしばしばあるので、Nuxtjsでコードハイライトを開発してみました。

ブログ:https://www.ragate.co.jp/blog/articles/3730

Nuxtjsにprismjsをインストールして色々と設定

まずはPrismjsをインストールします。

$ yarn add prismjs@1.20.0

次に、Nuxtjsへプラグインを作成します。
nuxt.config.js

{
  ...
  plugins: [
    ...
    '~/plugins/prism.js'
  ]
}

plugins/prism.js

import Prism from 'prismjs'
import 'prismjs/themes/prism-solarizedlight.css'
import 'prismjs/components/prism-json'
import 'prismjs/components/prism-yaml'
export default Prism

次に、documentオブジェクトを取得できるタイミングでPrismを実行します。
pages/blog/article/_article_id.vue

import Prism from '~/plugins/prism'
async mounted() {
      ...
      Prism.highlightAll()
},

Wordpressでプラグインをインストール

ワードプレスへ、highlighting-code-blockをインストールします。
そしてあとは投稿画面から言語指定をするだけです。