From 5db97228bebed5e59c2762579d79ef703ad9cb16 Mon Sep 17 00:00:00 2001
From: Elijah <elijahahianyo@gmail.com>
Date: Thu, 7 Nov 2024 10:12:25 +0000
Subject: [PATCH] move language regex on codeblock to markdown

---
 reflex/components/datadisplay/code.py              |  6 +-----
 reflex/components/datadisplay/shiki_code_block.py  | 13 -------------
 reflex/components/datadisplay/shiki_code_block.pyi |  2 --
 reflex/components/markdown/markdown.py             |  5 ++++-
 4 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/reflex/components/datadisplay/code.py b/reflex/components/datadisplay/code.py
index 99375727e..fccca466f 100644
--- a/reflex/components/datadisplay/code.py
+++ b/reflex/components/datadisplay/code.py
@@ -541,11 +541,7 @@ class CodeBlock(Component, MarkdownComponentMap):
         Returns:
             The custom code for the component.
         """
-        return f"""
-const match = (className || '').match(/language-(?<lang>.*)/);
-const {str(_LANGUAGE)} = match ? match[1] : '';
-{cls._get_language_registration_hook()}
-"""
+        return cls._get_language_registration_hook()
 
     def add_hooks(self) -> list[str | Var]:
         """Add hooks for the component.
diff --git a/reflex/components/datadisplay/shiki_code_block.py b/reflex/components/datadisplay/shiki_code_block.py
index 4c41dc743..b860d781e 100644
--- a/reflex/components/datadisplay/shiki_code_block.py
+++ b/reflex/components/datadisplay/shiki_code_block.py
@@ -13,7 +13,6 @@ from reflex.components.core.cond import color_mode_cond
 from reflex.components.el.elements.forms import Button
 from reflex.components.lucide.icon import Icon
 from reflex.components.markdown.markdown import (
-    _LANGUAGE,
     MarkdownComponentMap,
 )
 from reflex.components.props import NoExtrasAllowedProps
@@ -701,18 +700,6 @@ class ShikiCodeBlock(Component, MarkdownComponentMap):
 
         return processed
 
-    @classmethod
-    def get_component_map_custom_code(cls) -> str:
-        """Get the custom code for the component.
-
-        Returns:
-            The custom code for the component.
-        """
-        return f"""
-    const match = (className || '').match(/language-(?<lang>.*)/);
-    const {str(_LANGUAGE)} = match ? match[1] : '';
-    """
-
 
 class ShikiHighLevelCodeBlock(ShikiCodeBlock):
     """High level component for the shiki syntax highlighter."""
diff --git a/reflex/components/datadisplay/shiki_code_block.pyi b/reflex/components/datadisplay/shiki_code_block.pyi
index f75cefd4d..dcfaf0410 100644
--- a/reflex/components/datadisplay/shiki_code_block.pyi
+++ b/reflex/components/datadisplay/shiki_code_block.pyi
@@ -973,8 +973,6 @@ class ShikiCodeBlock(Component, MarkdownComponentMap):
     def create_transformer(
         cls, library: str, fns: list[str]
     ) -> ShikiBaseTransformers: ...
-    @classmethod
-    def get_component_map_custom_code(cls) -> str: ...
 
 class ShikiHighLevelCodeBlock(ShikiCodeBlock):
     @overload
diff --git a/reflex/components/markdown/markdown.py b/reflex/components/markdown/markdown.py
index 805a5b7e9..376cb8bd6 100644
--- a/reflex/components/markdown/markdown.py
+++ b/reflex/components/markdown/markdown.py
@@ -281,7 +281,10 @@ class Markdown(Component):
         codeblock_custom_code = "\n".join(custom_code_list)
 
         # Format the code to handle inline and block code.
-        formatted_code = f"""{codeblock_custom_code};
+        formatted_code = f"""
+const match = (className || '').match(/language-(?<lang>.*)/);
+const {str(_LANGUAGE)} = match ? match[1] : '';
+{codeblock_custom_code};
             return inline ? (
                 {self.format_component("code")}
             ) : (