diff --git a/src/markdown/index.ts b/src/markdown/index.ts
index 6f528caf..6bdd86a7 100644
--- a/src/markdown/index.ts
+++ b/src/markdown/index.ts
@@ -5,6 +5,8 @@ import { ReactElement, createElement } from "react"
 import { toast } from "react-hot-toast"
 import { Element } from "react-scroll"
 import { refractor } from "refractor"
+import jsx from "refractor/lang/jsx"
+import tsx from "refractor/lang/tsx"
 import rehypeAutolinkHeadings from "rehype-autolink-headings"
 import rehypeInferDescriptionMeta from "rehype-infer-description-meta"
 import rehypeKatex from "rehype-katex"
@@ -69,6 +71,8 @@ export type Rendered = {
 }
 
 refractor.alias("html", ["svelte", "vue"])
+refractor.register(tsx)
+refractor.register(jsx)
 
 const rehypePrism = rehypePrismGenerator(refractor)