🐛 Recognize html as a language (#71)

- convert to xml in the renderer

.changeset/eleven-toes-brush.md

@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Add html --> xml and md --> markdown conversion in lang syntax

packages/myst-demo/src/index.tsx

@@ -280,7 +280,7 @@ export function MySTRenderer({
             ref={area}
             value={text}
             className={classnames(
-              'block p-6 shadow-inner resize-none w-full font-mono bg-slate-50 dark:bg-slate-800 outline-none',
+              'block p-6 shadow-inner resize-none w-full font-mono bg-slate-50/50 dark:bg-slate-800/50 outline-none',
               { 'h-full': column },
             )}
             onChange={(e) => setText(e.target.value)}

packages/myst-to-react/src/code.tsx

@@ -20,6 +20,15 @@ type Props = {
   className?: string;
 };
 
+function normalizeLanguage(lang?: string): string | undefined {
+  switch (lang) {
+    case 'html':
+      return 'xml';
+    default:
+      return lang;
+  }
+}
+
 export function CodeBlock(props: Props) {
   const { isLight } = useTheme();
   const {
@@ -45,7 +54,7 @@ export function CodeBlock(props: Props) {
     >
       {filename && <div className="leading-3 mt-1 p-1">{filename}</div>}
       <SyntaxHighlighter
-        language={lang}
+        language={normalizeLanguage(lang)}
         startingLineNumber={startingLineNumber}
         showLineNumbers={showLineNumbers}
         style={isLight ? light : dark}

packages/myst-to-react/src/links/github.tsx

@@ -17,6 +17,7 @@ function extToLanguage(ext?: string): string | undefined {
       ts: 'typescript',
       js: 'javascript',
       py: 'python',
+      md: 'markdown',
     }[ext ?? ''] ?? ext
   );
 }