fix: shiki languages

gregermendle · Nov 21, 2023 · 5d6c502 · 5d6c502
1 parent 793ba9e
commit 5d6c502
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/apps/example/app/routes/__toc.docs.installation.mdx b/apps/example/app/routes/__toc.docs.installation.mdx
@@ -10,10 +10,10 @@ import { code as previewCode } from "~/routes/__layout._index";
 export const loader = async () => {
   return shiki.shikiize({
     install: {
-      lang: "bash",
+      lang: "shellscript",
       code: `
-# install remix-mailer and nodemailer transport
-npm i remix-mailer nodemailer
+# install remix-mailer core library
+npm i remix-mailer
 `,
     },
     basic: {
@@ -27,10 +27,10 @@ npm i remix-mailer nodemailer
 
 `remix-mailer` contains a set of components and utilities that can be used to preview email templates. _(technically they dont even need to be emails, it could honestly be anything.)_
 
-<Shikiize id="install" />
+    <Shikiize id="install" />
 
 ## Basic Usage
 
 The fastest way to get started with `remix-mailer` is to use the built-in `<PreviewBrowser />` component and `loadPreviews` utility.
 
-<Shikiize id="basic" />
+    <Shikiize id="basic" />
diff --git a/apps/example/app/shiki.server.tsx b/apps/example/app/shiki.server.tsx
@@ -1,6 +1,7 @@
 import { json } from "@remix-run/node";
 import { Lang } from "shiki";
 import "shiki/languages/tsx.tmLanguage.json";
+import "shiki/languages/shellscript.tmLanguage.json";
 import "shiki/themes/css-variables.json";
 import shiki from "shiki";
 export * from "shiki";
@@ -13,6 +14,7 @@ export interface Block {
 export const shikiize = async (blocksToRender: Record<string, Block>) => {
   const highlighter = await shiki.getHighlighter({
     theme: "css-variables",
+    langs: ["shellscript", "tsx"],
   });
 
   const blocks = Object.entries(blocksToRender).map(([key, block]) => [