feat: add syntax highlighting for code blocks on plugin page

Author: bajrangCoder

src/pages/plugin/plugin.js

@@ -308,7 +308,10 @@ export default async function PluginInclude(
 		const pluginSettings = settings.uiSettings[`plugin-${plugin.id}`];
 		$page.body = view({
 			...plugin,
-			body: markdownIt({ html: true, xhtmlOut: true })
+			body: markdownIt({
+				html: true,
+				xhtmlOut: true,
+			})
 				.use(MarkdownItGitHubAlerts)
 				.use(anchor, {
 					slugify: (s) =>
@@ -394,6 +397,28 @@ export default async function PluginInclude(
 			copyButton.className = "copy-button";
 			copyButton.textContent = "Copy";
 
+			const codeElement = pre.querySelector("code");
+			if (codeElement) {
+				const langMatch = codeElement.className.match(
+					/language-(\w+)|(javascript)/,
+				);
+				if (langMatch) {
+					const langMap = {
+						bash: "sh",
+						shell: "sh",
+					};
+					const lang = langMatch[1] || langMatch[2];
+					const mappedLang = langMap[lang] || lang;
+					const highlight = ace.require("ace/ext/static_highlight");
+					highlight(codeElement, {
+						mode: `ace/mode/${mappedLang}`,
+						theme: settings.value.editorTheme.startsWith("ace/theme/")
+							? settings.value.editorTheme
+							: "ace/theme/" + settings.value.editorTheme,
+					});
+				}
+			}
+
 			copyButton.addEventListener("click", async () => {
 				const code = pre.querySelector("code")?.textContent || pre.textContent;
 				try {

src/pages/plugin/plugin.scss

@@ -191,15 +191,19 @@
           word-wrap: normal;
           white-space: pre;
           font-size: 0.8rem;
-          padding: 5px;
+          border-radius: 4px;
+          padding: 1em;
           margin: 5px 0;
           background: var(--primary-color);
           color: var(--primary-text-color);
-          border-left: solid 5px var(--active-color);
+          /* border-left: solid 5px var(--active-color); */
           overflow: auto;
           width: calc(100% - 10px);
           display: block;
           user-select: text;
+          div {
+            background: var(--primary-color);
+          }
         }
       }
     }

www/index.html

@@ -47,7 +47,7 @@
         type,
         listener,
         useCapture,
-        allowed
+        allowed,
       ) {
         if (typeof useCapture === "boolean") {
           allowed = useCapture;
@@ -101,6 +101,7 @@
     <script src="./js/ace/ext-error_marker.js"></script>
     <script src="./js/ace/ext-whitespace.js"></script>
     <script src="./js/ace/ext-static_highlight.js"></script>
+    <script src="./js/ace/ext-inline_autocomplete.js"></script>
 
     <script>
       var color = localStorage.getItem("__primary_color");