add highlightjs

astro/src/components/Help.tsx

@@ -1,18 +1,32 @@
 import styles from './Help.module.css'
 import { useState, useEffect } from 'preact/hooks'
-import { marked } from 'marked'
+import { marked, Marked } from 'marked'
 import { loadCodeFromString } from '../lib/loadCodeFromString.ts'
 // import Prism from "prismjs";
-// import hljs from 'highlight.js';
-// import {markedHighlight} from "marked-highlight";
+import hljs from 'highlight.js';
+import {markedHighlight} from "marked-highlight";
 
+// console.log(Marked);
+
+// const marked = new Marked(
+//   markedHighlight({
+//     langPrefix: 'hljs language-',
+//     highlight(code, lang, info) {
+//       const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+//       return hljs.highlight(code, { language }).value;
+//     }
+//   })
+// );
 
 marked.setOptions({
-  // highlight: function (code, language) {
-
-  //   const validLanguage = Prism.languages[language] ? language : 'markup'
-  //   return Prism.highlight(code, Prism.languages[validLanguage], validLanguage)
-  // }
+  highlight: function (code, lang) {
+
+    const language = hljs.getLanguage(lang) ? lang : 'markup';
+    return hljs.highlight(code, { language }).value;
+
+    // const validLanguage = Prism.languages[language] ? language : 'markup'
+    // return Prism.highlight(code, Prism.languages[validLanguage], validLanguage)
+  }
 })
 
 export default function Help({

astro/src/pages/editor.astro

@@ -10,11 +10,8 @@ import '../css/global.css'
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 
-    <!-- Prism CSS -->
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css"
-      rel="stylesheet"
-    />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+
 
     <meta name="generator" content={Astro.generator} />
     <title>Blot</title>