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

prism.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://prismjs.com/

使い方

CDNを利用した場合

CDNよりCSSを読み込む

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.min.css" />

JavaScriptを読み込む

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"></script>

preタグには言語を明確化するためクラスを当てる。”language-javascript” みたいに。

※preタグのpaddingを0に変更した。