diff --git a/reflex/.templates/web/components/shiki/code.js b/reflex/.templates/web/components/shiki/code.js index c655c3a60..514d31f9c 100644 --- a/reflex/.templates/web/components/shiki/code.js +++ b/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; - - if (Array.isArray(code)) { - final_code = code[0]; - } else { - final_code = code; - } - const result = await codeToHtml(final_code, { + const result = await codeToHtml(code, { lang: language, theme, - transformers + transformers, + decorations }); setCodeResult(result); } diff --git a/reflex/components/datadisplay/shiki_code_block.py b/reflex/components/datadisplay/shiki_code_block.py index 46199a6e4..7bb394972 100644 --- a/reflex/components/datadisplay/shiki_code_block.py +++ b/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( diff --git a/reflex/components/datadisplay/shiki_code_block.pyi b/reflex/components/datadisplay/shiki_code_block.pyi index bcf2719e9..d2ed995ff 100644 --- a/reflex/components/datadisplay/shiki_code_block.pyi +++ b/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, - copy_button: Optional[ - Union[Component, Var[Optional[Union[Component, bool]]], bool] - ] = None, + can_copy: Optional[bool] = None, + copy_button: Optional[Union[Component, 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, - copy_button: Optional[ - Union[Component, Var[Optional[Union[Component, bool]]], bool] - ] = None, + can_copy: Optional[bool] = None, + copy_button: Optional[Union[Component, 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.