upgrade

astro/package.json

@@ -13,11 +13,11 @@
     "format": "prettier --ignore-path ./.prettierignore --write . --plugin=prettier-plugin-astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.2.0",
-    "@astrojs/preact": "^3.0.0",
-    "@astrojs/tailwind": "^5.0.2",
-    "@astrojs/ts-plugin": "^1.1.3",
-    "@astrojs/vercel": "^5.2.0",
+    "@astrojs/check": "0.3.4",
+    "@astrojs/preact": "3.0.1",
+    "@astrojs/tailwind": "5.0.4",
+    "@astrojs/ts-plugin": "1.3.1",
+    "@astrojs/vercel": "6.1.0",
     "@codemirror/commands": "^6.2.4",
     "@codemirror/lang-javascript": "^6.1.9",
     "@codemirror/language": "^6.8.0",
@@ -29,14 +29,16 @@
     "@rollup/browser": "^3.26.0",
     "@sendgrid/mail": "^7.7.0",
     "acorn": "^8.11.2",
-    "astro": "^3.1.1",
+    "astro": "4.0.7",
     "classnames": "^2.3.2",
     "cm6-theme-basic-dark": "^0.2.0",
     "codemirror": "^6.0.1",
     "firebase": "^10.3.1",
     "firebase-admin": "^11.11.1",
+    "highlight.js": "^11.9.0",
     "js-beautify": "^1.14.9",
     "marked": "^7.0.4",
+    "marked-highlight": "^2.1.0",
     "nanoid": "^5.0.3",
     "preact": "^10.6.5",
     "prismjs": "^1.29.0",
@@ -45,7 +47,7 @@
     "three": "^0.155.0"
   },
   "devDependencies": {
-    "@astrojs/node": "^5.3.0",
+    "@astrojs/node": "7.0.2",
     "@types/w3c-web-serial": "^1.0.3",
     "prettier": "^3.0.3",
     "prettier-plugin-astro": "^0.11.1",

astro/src/components/Help.tsx

@@ -1,15 +1,21 @@
 import styles from './Help.module.css'
 import { useState, useEffect } from 'preact/hooks'
-import { marked } from 'marked'
+import { Marked } from 'marked'
 import { loadCodeFromString } from '../lib/loadCodeFromString.ts'
-import { Prism } from "prism.js";
+// import Prism from "prismjs";
+import hljs from 'highlight.js';
+import {markedHighlight} from "marked-highlight";
+
+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)
-  }
-})
 
 export default function Help({
   toggleClose,