Feat: Extract markdown & syntax highlighting utils

src/markdown.js

@@ -0,0 +1,30 @@
+import mathjax3 from 'https://esm.sh/markdown-it-mathjax3';
+
+export const md = window.md = window.markdownit({ html: false, linkify: true, typographer: true, breaks: true }).use(mathjax3);
+
+export function enhanceCodeBlocks(root, doHL = true) {
+  window.$(root).find('pre>code').each((i, code) => {
+    if (code.textContent.length > 200000) return;
+    const $pre = window.$(code).parent().addClass('relative rounded-xl border border-gray-200');
+    if (!$pre.find('.code-actions').length) {
+      const len = code.textContent.length, countText = len >= 1e3 ? (len / 1e3).toFixed(1) + 'K' : len;
+      const $btn = window.$('<button class="bg-slate-900 text-white rounded-lg py-1 px-2 text-xs opacity-85">Copy</button>').on('click', async e => {
+        e.stopPropagation();
+        try {
+          await navigator.clipboard.writeText(code.innerText);
+          $btn.text('Copied');
+          setTimeout(() => $btn.text('Copy'), 1200);
+        } catch { }
+      });
+      const $container = window.$('<div class="code-actions absolute top-2 right-2 flex items-center gap-2"></div>');
+      $container.append(window.$(`<span class="text-xs text-gray-500">${countText} chars</span>`), $btn);
+      $pre.append($container);
+    }
+    if (doHL && window.hljs && code.textContent.length < 100000) window.hljs.highlightElement(code);
+  });
+}
+
+export const renderMarkdown = window.renderMarkdown = function (node, text, opt = { enhance: true, highlight: true }) {
+  node.innerHTML = md.render(text);
+  if (opt.enhance) enhanceCodeBlocks(node, opt.highlight);
+};