feat: support console language option in highlighting (#237)

* feat: support console language with $ handling

* fix: hydrate correctly in client entry

Author: cabljac

api/src/bundler/plugins/rehype-code-blocks.ts

@@ -18,11 +18,19 @@ export default function rehypeCodeBlocks(): (ast: Node) => void {
     }
 
     const language = getLanguage(node);
+
     const raw = toString(node);
 
-    // Raw value of the `code` block - used for copy/paste
-    parent.properties['raw'] = raw;
-    parent.properties['html'] = highlighter.codeToHtml(raw, language);
+    // If the user provides the `console` language, we add the 'shell' language and remove $ from the raw code, for copying purposes.
+    if (language === 'console') {
+      const removedDollarSymbol = raw.replace(/^(^ *)\$/g, '');
+
+      parent.properties['raw'] = removedDollarSymbol;
+      parent.properties['html'] = highlighter.codeToHtml(raw, { lang: 'shell' });
+    } else {
+      parent.properties['raw'] = raw;
+      parent.properties['html'] = highlighter.codeToHtml(raw, { lang: language });
+    }
 
     // Get any metadata from the code block
     const meta = (node.data?.meta as string) ?? '';

website/app/entry.client.tsx

@@ -19,13 +19,8 @@ if (
   delete window.__remixManifest.routes['routes/preview-fetch'];
 }
 
-const container = document.getElementById('app');
-if (!container) {
-  throw new Error('No element with id "app" found');
-}
-
 hydrateRoot(
-  container,
+  document,
   <BrowserRouter>
     <RemixBrowser />
   </BrowserRouter>,