Shiki codeblock support decorations

reflex/.templates/web/components/shiki/code.js

@@ -1,21 +1,26 @@
 import { useEffect, useState } from "react"
 import { codeToHtml} from "shiki"
 
-export function Code ({code, theme, language, transformers, ...divProps}) {
+/**
+ * Code component that uses Shiki to convert code to HTML and render it.
+ *
+ * @param code - The code to be highlighted.
+ * @param theme - The theme to be used for highlighting.
+ * @param language - The language of the code.
+ * @param transformers - The transformers to be applied to the code.
+ * @param decorations - The decorations to be applied to the code.
+ * @param divProps - Additional properties to be passed to the div element.
+ * @returns The rendered code block.
+ */
+export function Code ({code, theme, language, transformers, decorations, ...divProps}) {
     const [codeResult, setCodeResult] = useState("")
     useEffect(() => {
         async function fetchCode() {
-          let final_code;
+          const result = await codeToHtml(code, {
-
-          if (Array.isArray(code)) {
-            final_code = code[0];
-          } else {
-            final_code = code;
-          }
-          const result = await codeToHtml(final_code, {
             lang: language,
             theme,
-            transformers
+            transformers,
+            decorations
           });
           setCodeResult(result);
         }

reflex/components/datadisplay/shiki_code_block.py

@@ -537,6 +537,9 @@ class ShikiCodeBlock(Component):
         []
     )
 
+    # The decorations to use for the syntax highlighter.
+    decorations: Var[list[dict[str, Any]]] = []
+
     @classmethod
     def create(
         cls,
@@ -676,10 +679,10 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
     show_line_numbers: Var[bool]
 
     # Whether a copy button should appear.
-    can_copy: Var[bool] = Var.create(False)
+    can_copy: bool = False
 
     # copy_button: A custom copy button to override the default one.
-    copy_button: Var[Optional[Union[Component, bool]]] = Var.create(None)
+    copy_button: Optional[Union[Component, bool]] = None
 
     @classmethod
     def create(

reflex/components/datadisplay/shiki_code_block.pyi

@@ -906,6 +906,9 @@ class ShikiCodeBlock(Component):
                 list[Union[ShikiBaseTransformers, dict[str, Any]]],
             ]
         ] = None,
+        decorations: Optional[
+            Union[Var[list[dict[str, Any]]], list[dict[str, Any]]]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -938,6 +941,7 @@ class ShikiCodeBlock(Component):
             themes: The set of themes to use for different modes.
             code: The code to display.
             transformers: The transformers to use for the syntax highlighter.
+            decorations: The decorations to use for the syntax highlighter.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -965,10 +969,8 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
         *children,
         use_transformers: Optional[Union[Var[bool], bool]] = None,
         show_line_numbers: Optional[Union[Var[bool], bool]] = None,
-        can_copy: Optional[Union[Var[bool], bool]] = None,
+        can_copy: Optional[bool] = None,
-        copy_button: Optional[
+        copy_button: Optional[Union[Component, bool]] = None,
-            Union[Component, Var[Optional[Union[Component, bool]]], bool]
-        ] = None,
         language: Optional[
             Union[
                 Literal[
@@ -1531,6 +1533,9 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
                 list[Union[ShikiBaseTransformers, dict[str, Any]]],
             ]
         ] = None,
+        decorations: Optional[
+            Union[Var[list[dict[str, Any]]], list[dict[str, Any]]]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -1567,6 +1572,7 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
             themes: The set of themes to use for different modes.
             code: The code to display.
             transformers: The transformers to use for the syntax highlighter.
+            decorations: The decorations to use for the syntax highlighter.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -1593,10 +1599,8 @@ class CodeblockNamespace(ComponentNamespace):
         *children,
         use_transformers: Optional[Union[Var[bool], bool]] = None,
         show_line_numbers: Optional[Union[Var[bool], bool]] = None,
-        can_copy: Optional[Union[Var[bool], bool]] = None,
+        can_copy: Optional[bool] = None,
-        copy_button: Optional[
+        copy_button: Optional[Union[Component, bool]] = None,
-            Union[Component, Var[Optional[Union[Component, bool]]], bool]
-        ] = None,
         language: Optional[
             Union[
                 Literal[
@@ -2159,6 +2163,9 @@ class CodeblockNamespace(ComponentNamespace):
                 list[Union[ShikiBaseTransformers, dict[str, Any]]],
             ]
         ] = None,
+        decorations: Optional[
+            Union[Var[list[dict[str, Any]]], list[dict[str, Any]]]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -2195,6 +2202,7 @@ class CodeblockNamespace(ComponentNamespace):
             themes: The set of themes to use for different modes.
             code: The code to display.
             transformers: The transformers to use for the syntax highlighter.
+            decorations: The decorations to use for the syntax highlighter.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.