markdown-itをVuetifyの環境に導入してデザインを整える でhighlight.jsを導入しましたが、テーマ（lightやdark）毎にimportするCSSを切り替えられるようにしていなかった。
時間掛かりそうなので後回しにしてましたが、調査して対応したのでメモしておきます。
実現したい事
これをテーマ（lightやdark）毎に切り替えたい。
// import 'highlight.js/styles/github.min.css'
import 'highlight.js/styles/github-dark.min.css'
importや@importは、ifや変数で指定する事ができない。(buildするので当然か）
同様に、import.meta.globも動的な指定はできなかった。
ERROR Internal server error: Invalid glob import syntax: Could only use literals
linkヘッダで対応
こんなのを動的に入れる。
<link href="/highlight.js/github-dark.min.css" rel="stylesheet">
Migrate to Nuxt 3: Meta Tags
useHeadでも良いけど、Built-in Meta-componentsの方が分かりやすい気がするので、
後者をComposition APIで書きました。
<template>
+ <Head>
+ <Link v-if="hljsCss != null" :href="hljsCss" rel="stylesheet" />
+ </Head>
<script setup lang="ts">
+ import { useTheme } from 'vuetify'
+ const hljsCss = { // % mkdir public/highlight.js; cp -a node_modules/highlight.js/styles/{github,github-dark}.min.css public/highlight.js/
+ light: '/highlight.js/github.min.css',
+ dark: '/highlight.js/github-dark.min.css'
+ }[useTheme().name.value]
CSSはnode_modules内のものをpublicにコピー
% mkdir public/highlight.js
% cp -a node_modules/highlight.js/styles/{github,github-dark}.min.css public/highlight.js/
CDNのパスを指定しても良いんだけど、
障害ポイントを増やしたくなかった。
highlight.js – Libraries – cdnjs – The #1 free and open source CDN built to make life easier for developers
+ light: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css',
+ dark: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css'
ちなみに、これでも動くけど、testが落ちる。
- import hljs from 'highlight.js'
+ import hljs from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js'
publicではなく、assetsに
置いても良さそうだけど、パスが書き換わらなかった。（何か間違ってるのかな？）
+ <Link href="~/assets/highlight.js/github-dark.min.css" rel="stylesheet" />
+ <Link href="~assets/highlight.js/github-dark.min.css" rel="stylesheet" />
+ <Link href="/assets/highlight.js/github-dark.min.css" rel="stylesheet" />
→ http://localhost:5000/-/~/assets/highlight.js/github-dark.min.css → http://localhost:5000/-/~assets/highlight.js/github-dark.min.css → http://localhost:5000/assets/highlight.js/github-dark.min.css
