Switch shiki for prism

This fixes WebIDL warnings

Author: lukewarlow

site/astro.config.js

@@ -23,10 +23,7 @@ export default defineConfig({
   ],
   site: 'https://open-ui.org',
   markdown: {
-    shikiConfig: {
-      langs: [],
-      wrap: true,
-    },
+    syntaxHighlight: 'prism',
   },
   vite: {
     ssr: {

site/public/styles/prism-dark.css

@@ -0,0 +1,122 @@
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f8f8f2;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	word-spacing: normal;
+	word-wrap: normal;
+
+	white-space: pre-wrap; /* Allow wrapping */
+	word-break: break-word; /* Prevent overflow */
+	overflow-wrap: break-word; /* Ensures long words break */
+	overflow-x: auto; /* Keep horizontal scroll if necessary */
+	line-height: 1.5;
+
+	tab-size: 4;
+
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 0em;
+	margin: 0.5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #2b2b2b;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: 0.1em;
+	border-radius: 0.3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #d4d0ab;
+}
+
+.token.punctuation {
+	color: #e1e4e8;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+[class*="language-webidl"] .token.keyword,
+.token.symbol,
+.token.deleted {
+	color: #85E89C;
+}
+
+.token.boolean,
+.token.number {
+	color: #00e0e0;
+}
+
+.token.selector,
+[class*="language-webidl"] .token.class-name,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #b392f0;
+}
+
+.token.string {
+	color:#9ecbff
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #00e0e0;
+}
+
+.token.atrule,
+.token.attr-value {
+	color: #9ecbff;
+}
+
+.token.function {
+	color: #b392f0;
+}
+
+.token.keyword {
+	color: #f97583;
+}
+
+.token.regex,
+.token.important {
+	color: #ffd700;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+code[class*="language-webidl"] {
+	color: #9ecbff;
+}

site/src/layouts/BaseLayout.astro

@@ -11,6 +11,7 @@ const { title } = Astro.props;
   <link rel="icon" type="image/svg+xml" href="/images/favicon-32x32.png" />
   <link rel="stylesheet" href="/styles/reset.css" />
   <link rel="stylesheet" href="/styles/global.css" />
+  <link rel="stylesheet" href="/styles/prism-dark.css" />
   <title>{title}</title>
   <meta name="description" content="Open UI "/>
   <meta property="og:title" content={title}/>