Install and configure highlight.js.

Author: WebsByTodd

browser-extension/package-lock.json

@@ -2,6 +2,7 @@
   "author": "DiffPlug",
   "dependencies": {
     "@wxt-dev/webextension-polyfill": "^1.0.0",
+    "highlight.js": "^11.11.1",
     "overtype": "^1.2.3",
     "webextension-polyfill": "^0.12.0"
   },

browser-extension/package.json

@@ -1,11 +1,12 @@
+import hljs from "highlight.js";
 import OverType from "../overtype/overtype";
 
 export default defineContentScript({
   main() {
     if (window.location.hostname !== "github.com") {
       return;
     }
-
+    OverType.setCodeHighlighter(hljsHighlighter);
     const ghCommentBox = document.getElementById(
       "new_comment_field"
     ) as HTMLTextAreaElement | null;
@@ -35,3 +36,18 @@ function modifyDOM(overtypeInput: HTMLTextAreaElement): HTMLElement {
   overtypeContainer.classList.add("overtype-container");
   return overtypeContainer.parentElement!.closest("div")!;
 }
+
+function hljsHighlighter(code: string, language: string) {
+  try {
+    if (language && hljs.getLanguage(language)) {
+      const result = hljs.highlight(code, { language });
+      return result.value;
+    } else {
+      const result = hljs.highlightAuto(code);
+      return result.value;
+    }
+  } catch (error) {
+    console.warn("highlight.js highlighting failed:", error);
+    return code;
+  }
+}