</pre></code>で挟んだソースコードを自動でシンタックスハイライトしてくれます。軽量かつ簡単に利用できるので当ブログでも使用しているのですが、公式サイトに載っている方法だと同期的に読み込むのでレンダリングをブロックしてしまいます。シンタックスハイライトはクリティカルなものではないので、非同期で読み込ませることで、モダンブラウザでの読み込み速度を少し速くすることができます。src="/path/to/highlight.pack.js"></script><script>hljs.initHighlightingOnLoad();</script>を非同期にしていきます。/path/to/styles/default.cssと/path/to/highlight.pack.jsの部分は各自の環境に合わせて変えてください。rel=”preload”を使いたいのですが、最新のブラウザでしか対応しておらず、古いブラウザだとcssが読み込まれなくなってしまいます。非同期で読み込み高速化ここを参考にcssをpreloadにします。onload="this.onload=null;this.rel='stylesheet'">こうなりました。noscriptに関しては、そもそもjavascriptが有効になっていなければhighlight.jsは動かないので、javascriptが無効の時はhighlight.jsのスタイルのcssを読み込まなくていいやと思って書いていません。スポンサーリンクjavascriptをasyncにjavascriptの場合は、async属性に対応していないブラウザでもasync属性が無視されるだけでjavascriptが読み込まれなくなるわけじゃないので簡単です。});</script>こうします。highlight.pack.jsの読み込みを非同期にしたので、その直後のhljs.initHighlightingOnLoad();が実行される際にはhljsオブジェクトがまだ定義されていません。initHighlightingをaddEventListenerを使って、サイトが読み込まれた際に実行することにします。highlightjs/highlight.js共有この記事が役に立ったならば、シェアしていただけると嬉しいです。Analyticsはそのままだと自分のアクセスまでカウントしてしまいます。Web当サイトではソースコードの表示にhighlight.jsを利用しています。