Q&A
現在、highlight.jsをCDN方式でNuxt.jsに導入しているのですが、不明な点が解決できません。
以下は、デモということでhighlight.js自体が機能するかを確認したソースコードです。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>highlight sample</title> 5 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/qtcreator_dark.min.css" integrity="sha256-4hYYpaqmhuzOvnvVHaIGc/rMcPgLWdDg94NFGUnpvKU=" crossorigin="anonymous" /> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script> 7 <script>hljs.initHighlightingOnLoad();</script> 8 </head> 9 <body> 10 <pre> 11 <code> 12 /* 13 *highlight sample 14 */ 15 .high{ 16 color:#ff1100; 17 background:#ffffff; 18 } 19 </code> 20 </pre> 21</body> 22</html>
このコードでは、しっかりとソースコードがハイライトされて表示されます。
Nuxt.jsでもこれと同様に表示させたく、<head>にある3つのタグの導入を以下の手順で試しました。
①highlight.jsで用いられるスタイルシートのリンクをnuxt.config.jsに置く。
html
1 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/qtcreator_dark.min.css" integrity="sha256-4hYYpaqmhuzOvnvVHaIGc/rMcPgLWdDg94NFGUnpvKU=" crossorigin="anonymous" />
↓
nuxt.config.js
javascript
1 head: { 2 link: [ 3 { 4 rel:"stylesheet", 5 href:"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/qtcreator_dark.min.css", integrity:"sha256-4hYYpaqmhuzOvnvVHaIGc/rMcPgLWdDg94NFGUnpvKU=", 6 crossorigin:"anonymous" 7 }, 8 9
②highlight.js.minを同様に、nuxt.config.js上に置く
html
1 2<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script> 3
↓
nuxt.config.js
javascript
1 2head:{ 3 link:[ 4 ... 5 ] 6... 7 script:[ 8 { 9 src:"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js" , 10 defer:true 11 }, 12....
③<script>hljs.initHighlightingOnLoad();</script>をどこかに置く。
ここで、挫折しています。
試した方法として、assetsにjsディレクトリを作成し、その中にhighlight-exe.jsを作った。
-----highlight-exe.js------
javascript
1hljs.initHighlightingOnLoad();
** そして、これを全てのページで読み出したいので、nuxt.config.js上に、②と同様に置いた。**
-----nuxt.config.js------
javascript
1 script:[ 2 { 3 src:"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js" , 4 defer:true 5 }, 6 "@assets/js/highlight-exe.js" 7 ] 8 },
自分の理想では、これで全ページにあるソースコード、<pre><code></code></pre>でくくった部分がハイライト表示されます。
しかし、実際には全くその気配がありません。
実際に確認したブラウザ上でのソースコードを見てみると、
html
1<head> 2...... 3.....<link data-n-head="ssr" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/qtcreator_dark.min.css" integrity="sha256-4hYYpaqmhuzOvnvVHaIGc/rMcPgLWdDg94NFGUnpvKU=" crossorigin="anonymous"> 4.... 5.....<script data-n-head="ssr" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js" defer></script> 6..</head> 7コード
この2点は確認できました。
しかし、呼び出したはずのhljs.initHighlightingOnLoad();が確認できません。
そこで、上記2つ以外の全てのscript部分も確認しました
html
1<head> 2<link rel="preload" href="/_nuxt/pages/css/border.js" as="script"><link rel="preload" href="/_nuxt/pages/css/border.8e52dd0f51d2f098c768.hot-update.js" as="script"> 3<link rel="preload" href="/_nuxt/commons.app.js" as="script"><link rel="preload" href="/_nuxt/vendors.app.js" as="script"><link rel="preload" href="/_nuxt/app.js" as="script"> 4<link rel="preload" href="/_nuxt/runtime.js" as="script"> 5<script data-n-head="ssr" 0="@" 1="a" 2="s" 3="s" 4="e" 5="t" 6="s" 7="/" 8="j" 9="s" 10="/" 11="h" 12="i" 13="g" 14="h" 15="l" 16="i" 17="g" 18="h" 19="t" 20="-" 21="e" 22="x" 23="e" 24="." 25="j" 26="s"></script> 6</head> 7 8<!--上は head,下は body終了タグの直前--> 9 10<script>window.__NUXT__={layout:"default",data:[{}],error:null,serverRendered:true,logs:[]};</script> 11<script src="/_nuxt/runtime.js" defer></script> 12<script src="/_nuxt/pages/css/border.js" defer></script> 13<script src="/_nuxt/pages/css/border.8e52dd0f51d2f098c768.hot-update.js" defer></script> 14<script src="/_nuxt/commons.app.js" defer></script> 15<script src="/_nuxt/vendors.app.js" defer></script> 16<script src="/_nuxt/app.js" defer></script> 17 18
確認はしましたが、本当に申し訳ありません。皆目見当もつきませんでした。
とても長々と書いてしまったこと深くお詫びします。
結局は、質問タイトルの通り、<script>hljs.initHighlightingOnLoad();</script>のような、素のscriptコードを置く場合にどうすれば良いかがわかりません。
このコードの説明を忘れていました。
このコードは、higlight.min.jsとそのcssをページに読み込む関数です。
ご存知の方がいらしたら、お手間をかけて申し訳ありませんが、ご教授願えないでしょうか。よろしくお願いします。
回答1件
自己解決あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。