ソースコードのハイライト表示 highlight.js編

Syntax highlighting for the Web

highlight.js

document.getElementById("btn").addEventListener("click", async () => {
    let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: onRun,
    });
});

公式

https://highlightjs.org/

Version 11.6.0

CDNは、cdnjs、jsDelivr、unpkgへのlinkがありました。

使い方

CDNを利用した場合

CDNよりCSS、JSを読み込む。

CSS

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css" />

JavaScript

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>

hljs.highlightAll()の実行を定義

<script>hljs.highlightAll();</script>

とか、

<script>window.addEventListener("load", hljs.highlightAll);</script>