diff --git a/reflex/components/datadisplay/shiki_code_block.py b/reflex/components/datadisplay/shiki_code_block.py index 6a27f8620..9b80c308a 100644 --- a/reflex/components/datadisplay/shiki_code_block.py +++ b/reflex/components/datadisplay/shiki_code_block.py @@ -25,9 +25,24 @@ SHIKIJS_TRANSFORMER_FNS = { "transformerMetaHighlight", "transformerMetaWordHighlight", "transformerCompactLineOptions", - "transformerRemoveLineBreak", + # TODO: this transformer when included adds a weird behavior which removes other code lines. Need to figure out why. + # "transformerRemoveLineBreak", "transformerRemoveNotationEscape", } +LINE_NUMBER_STYLING = { + "code": {"counter-reset": "step", "counter-increment": "step 0"}, + "code .line::before": { + "content": "counter(step)", + "counter-increment": "step", + "width": "1rem", + "margin-right": "1.5rem", + "display": "inline-block", + "text-align": "right", + "color": "rgba(115,138,148,.4)", + }, +} + +THEME_MAPPING = {"light": "one-light", "dark": "one-dark"} LiteralCodeLanguage = Literal[ "abap", "actionscript-3", @@ -310,7 +325,7 @@ class ShikiJsTransformer(ShikiBaseTransformers): library: str = "@shikijs/transformers" fns: list[FunctionStringVar] = [ - FunctionStringVar.create(x) for x in SHIKIJS_TRANSFORMER_FNS + FunctionStringVar.create(fn) for fn in SHIKIJS_TRANSFORMER_FNS ] style: Style | None = Style( { @@ -326,16 +341,6 @@ class ShikiJsTransformer(ShikiBaseTransformers): ".diff:before": {"position": "absolute", "left": "40px"}, ".has-focused .line": {"filter": "blur(0.095rem)"}, ".has-focused .focused": {"filter": "blur(0)"}, - "code": {"counter-reset": "step", "counter-increment": "step 0"}, - "code .line::before": { - "content": "counter(step)", - "counter-increment": "step", - "width": "1rem", - "margin-right": "1.5rem", - "display": "inline-block", - "text-align": "right", - "color": "rgba(115,138,148,.4)", - }, } ) @@ -367,70 +372,65 @@ class ShikiCodeBlock(Component): library = "/components/shiki/code" tag = "Code" alias = "ShikiCode" + + # The language to use. language: Var[LiteralCodeLanguage] = Var.create("python") + + # The theme to use ("light" or "dark"). theme: Var[LiteralCodeTheme] = Var.create("one-light") + + # The set of themes to use for different modes. themes: Var[list[dict[str, Any]] | dict[str, str]] + + # The code to display. code: Var[str] + + # The transformers to use for the syntax highlighter. transformers: Var[list[ShikiBaseTransformers | dict[str, Any]]] = [] @classmethod def create( cls, *children, - can_copy: Optional[bool] = False, - copy_button: Optional[Union[bool, Component]] = None, **props, ) -> Component: """Create a code block component using [shiki syntax highlighter](https://shiki.matsu.io/). Args: *children: The children of the component. - can_copy: Whether a copy button should appears. - copy_button: A custom copy button to override the default one. **props: The props to pass to the component. Returns: The code block component. """ - props["code"] = children[0] + # Separate props for the code block and the wrapper + code_block_props = {} + code_wrapper_props = {} - if "theme" not in props: - # Default color scheme responds to global color mode. - # TODO: we can use themes arg for this - props["theme"] = color_mode_cond( - light="one-light", - dark="one-dark-pro", + class_props = cls.get_props() + + # Distribute props between the code block and wrapper + for key, value in props.items(): + (code_block_props if key in class_props else code_wrapper_props)[key] = ( + value ) - if can_copy: - code = children[0] - copy_button = ( # type: ignore - copy_button - if copy_button is not None - else Button.create( - Icon.create(tag="copy"), - on_click=set_clipboard(code), - style=Style({"position": "absolute", "top": "0.5em", "right": "0"}), - ) - ) - else: - copy_button = None + code_block_props["code"] = children[0] + code_block = super().create(**code_block_props) - code_block = super().create(**props) transformer_styles = {} + # Collect styles from transformers and wrapper for transformer in code_block.transformers._var_value: if isinstance(transformer, ShikiBaseTransformers) and transformer.style: transformer_styles.update(transformer.style) + transformer_styles.update(code_wrapper_props.pop("style", {})) - if copy_button: - return Box.create( - code_block, - copy_button, - position="relative", - style=Style(transformer_styles), - ) - else: - return Box.create(code_block, style=Style(transformer_styles)) + return Box.create( + code_block, + *children[1:], + style=Style(transformer_styles), + **code_wrapper_props, + ) def add_imports(self) -> ImportDict | list[ImportDict]: """Add the necessary imports. @@ -515,6 +515,83 @@ class ShikiCodeBlock(Component): return processed +class ShikiHighLevelCodeBlock(ShikiCodeBlock): + """High level component for the shiki syntax highlighter.""" + + # If this is enabled, the default transformer(shikijs transformer) will be used. + use_transformer: Var[bool] = False + + # If this is enabled line numbers will be shown next to the code block. + show_line_numbers: Var[bool] + + @classmethod + def create( + cls, + *children, + can_copy: Optional[bool] = False, + copy_button: Optional[Union[bool, Component]] = None, + **props, + ) -> Component: + """Create a code block component using [shiki syntax highlighter](https://shiki.matsu.io/). + + Args: + *children: The children of the component. + can_copy: Whether a copy button should appear. + copy_button: A custom copy button to override the default one. + **props: The props to pass to the component. + + Returns: + The code block component. + """ + use_transformer = props.pop("use_transformer", False) + show_line_numbers = props.pop("show_line_numbers", False) + + if use_transformer: + props["transformers"] = [ShikiJsTransformer()] + + if show_line_numbers: + line_style = LINE_NUMBER_STYLING.copy() + line_style.update(props.get("style", {})) + props["style"] = line_style + + theme = props.pop("theme", None) + props["theme"] = props["theme"] = ( + cls._map_themes(theme) + if theme + else color_mode_cond( # Default color scheme responds to global color mode. + light="one-light", + dark="one-dark-pro", + ) + ) + + if can_copy: + code = children[0] + copy_button = ( # type: ignore + copy_button + if copy_button is not None + else Button.create( + Icon.create(tag="copy"), + on_click=set_clipboard(code), + style=Style({"position": "absolute", "top": "0.5em", "right": "0"}), + ) + ) + else: + copy_button = None + + if copy_button: + return ShikiCodeBlock.create( + children[0], copy_button, position="relative", **props + ) + else: + return ShikiCodeBlock.create(children[0], **props) + + @staticmethod + def _map_themes(theme: str) -> str: + if isinstance(theme, str) and theme in THEME_MAPPING: + return THEME_MAPPING[theme] + return theme + + class TransformerNamespace(ComponentNamespace): """Namespace for the Transformers.""" @@ -524,9 +601,10 @@ class TransformerNamespace(ComponentNamespace): class CodeblockNamespace(ComponentNamespace): """Namespace for the CodeBlock component.""" - create_transformer = ShikiCodeBlock.create_transformer + root = staticmethod(ShikiCodeBlock.create) + create_transformer = staticmethod(ShikiCodeBlock.create_transformer) transformers = TransformerNamespace() - __call__ = ShikiCodeBlock.create + __call__ = staticmethod(ShikiHighLevelCodeBlock.create) code_block = CodeblockNamespace() diff --git a/reflex/components/datadisplay/shiki_code_block.pyi b/reflex/components/datadisplay/shiki_code_block.pyi new file mode 100644 index 000000000..bd494c734 --- /dev/null +++ b/reflex/components/datadisplay/shiki_code_block.pyi @@ -0,0 +1,2239 @@ +"""Stub file for reflex/components/datadisplay/shiki_code_block.py""" + +# ------------------- DO NOT EDIT ---------------------- +# This file was generated by `reflex/utils/pyi_generator.py`! +# ------------------------------------------------------ +from typing import Any, Callable, Dict, Literal, Optional, Union, overload + +from reflex.base import Base +from reflex.components.component import Component, ComponentNamespace +from reflex.event import EventHandler, EventSpec +from reflex.style import Style +from reflex.utils.imports import ImportDict +from reflex.vars.base import Var +from reflex.vars.function import FunctionStringVar + +SHIKIJS_TRANSFORMER_FNS = { + "transformerNotationDiff", + "transformerNotationHighlight", + "transformerNotationWordHighlight", + "transformerNotationFocus", + "transformerNotationErrorLevel", + "transformerRenderWhitespace", + "transformerMetaHighlight", + "transformerMetaWordHighlight", + "transformerCompactLineOptions", + "transformerRemoveNotationEscape", +} +LINE_NUMBER_STYLING = { + "code": {"counter-reset": "step", "counter-increment": "step 0"}, + "code .line::before": { + "content": "counter(step)", + "counter-increment": "step", + "width": "1rem", + "margin-right": "1.5rem", + "display": "inline-block", + "text-align": "right", + "color": "rgba(115,138,148,.4)", + }, +} +THEME_MAPPING = {"light": "one-light", "dark": "one-dark"} +LiteralCodeLanguage = Literal[ + "abap", + "actionscript-3", + "ada", + "angular-html", + "angular-ts", + "apache", + "apex", + "apl", + "applescript", + "ara", + "asciidoc", + "asm", + "astro", + "awk", + "ballerina", + "bat", + "beancount", + "berry", + "bibtex", + "bicep", + "blade", + "c", + "cadence", + "clarity", + "clojure", + "cmake", + "cobol", + "codeowners", + "codeql", + "coffee", + "common-lisp", + "coq", + "cpp", + "crystal", + "csharp", + "css", + "csv", + "cue", + "cypher", + "d", + "dart", + "dax", + "desktop", + "diff", + "docker", + "dotenv", + "dream-maker", + "edge", + "elixir", + "elm", + "emacs-lisp", + "erb", + "erlang", + "fennel", + "fish", + "fluent", + "fortran-fixed-form", + "fortran-free-form", + "fsharp", + "gdresource", + "gdscript", + "gdshader", + "genie", + "gherkin", + "git-commit", + "git-rebase", + "gleam", + "glimmer-js", + "glimmer-ts", + "glsl", + "gnuplot", + "go", + "graphql", + "groovy", + "hack", + "haml", + "handlebars", + "haskell", + "haxe", + "hcl", + "hjson", + "hlsl", + "html", + "html-derivative", + "http", + "hxml", + "hy", + "imba", + "ini", + "java", + "javascript", + "jinja", + "jison", + "json", + "json5", + "jsonc", + "jsonl", + "jsonnet", + "jssm", + "jsx", + "julia", + "kotlin", + "kusto", + "latex", + "lean", + "less", + "liquid", + "log", + "logo", + "lua", + "luau", + "make", + "markdown", + "marko", + "matlab", + "mdc", + "mdx", + "mermaid", + "mojo", + "move", + "narrat", + "nextflow", + "nginx", + "nim", + "nix", + "nushell", + "objective-c", + "objective-cpp", + "ocaml", + "pascal", + "perl", + "php", + "plsql", + "po", + "postcss", + "powerquery", + "powershell", + "prisma", + "prolog", + "proto", + "pug", + "puppet", + "purescript", + "python", + "qml", + "qmldir", + "qss", + "r", + "racket", + "raku", + "razor", + "reg", + "regexp", + "rel", + "riscv", + "rst", + "ruby", + "rust", + "sas", + "sass", + "scala", + "scheme", + "scss", + "shaderlab", + "shellscript", + "shellsession", + "smalltalk", + "solidity", + "soy", + "sparql", + "splunk", + "sql", + "ssh-config", + "stata", + "stylus", + "svelte", + "swift", + "system-verilog", + "systemd", + "tasl", + "tcl", + "templ", + "terraform", + "tex", + "toml", + "ts-tags", + "tsv", + "tsx", + "turtle", + "twig", + "typescript", + "typespec", + "typst", + "v", + "vala", + "vb", + "verilog", + "vhdl", + "viml", + "vue", + "vue-html", + "vyper", + "wasm", + "wenyan", + "wgsl", + "wikitext", + "wolfram", + "xml", + "xsl", + "yaml", + "zenscript", + "zig", +] +LiteralCodeTheme = Literal[ + "andromeeda", + "aurora-x", + "ayu-dark", + "catppuccin-frappe", + "catppuccin-latte", + "catppuccin-macchiato", + "catppuccin-mocha", + "dark-plus", + "dracula", + "dracula-soft", + "everforest-dark", + "everforest-light", + "github-dark", + "github-dark-default", + "github-dark-dimmed", + "github-dark-high-contrast", + "github-light", + "github-light-default", + "github-light-high-contrast", + "houston", + "laserwave", + "light-plus", + "material-theme", + "material-theme-darker", + "material-theme-lighter", + "material-theme-ocean", + "material-theme-palenight", + "min-dark", + "min-light", + "monokai", + "night-owl", + "nord", + "one-dark-pro", + "one-light", + "plastic", + "poimandres", + "red", + "rose-pine", + "rose-pine-dawn", + "rose-pine-moon", + "slack-dark", + "slack-ochin", + "snazzy-light", + "solarized-dark", + "solarized-light", + "synthwave-84", + "tokyo-night", + "vesper", + "vitesse-black", + "vitesse-dark", + "vitesse-light", +] + +class ShikiBaseTransformers(Base): + library: str + fns: list[FunctionStringVar] + style: Style | None + +class ShikiJsTransformer(ShikiBaseTransformers): + library: str + fns: list[FunctionStringVar] + style: Style | None + +class ShikiCodeBlock(Component): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + language: Optional[ + Union[ + Literal[ + "abap", + "actionscript-3", + "ada", + "angular-html", + "angular-ts", + "apache", + "apex", + "apl", + "applescript", + "ara", + "asciidoc", + "asm", + "astro", + "awk", + "ballerina", + "bat", + "beancount", + "berry", + "bibtex", + "bicep", + "blade", + "c", + "cadence", + "clarity", + "clojure", + "cmake", + "cobol", + "codeowners", + "codeql", + "coffee", + "common-lisp", + "coq", + "cpp", + "crystal", + "csharp", + "css", + "csv", + "cue", + "cypher", + "d", + "dart", + "dax", + "desktop", + "diff", + "docker", + "dotenv", + "dream-maker", + "edge", + "elixir", + "elm", + "emacs-lisp", + "erb", + "erlang", + "fennel", + "fish", + "fluent", + "fortran-fixed-form", + "fortran-free-form", + "fsharp", + "gdresource", + "gdscript", + "gdshader", + "genie", + "gherkin", + "git-commit", + "git-rebase", + "gleam", + "glimmer-js", + "glimmer-ts", + "glsl", + "gnuplot", + "go", + "graphql", + "groovy", + "hack", + "haml", + "handlebars", + "haskell", + "haxe", + "hcl", + "hjson", + "hlsl", + "html", + "html-derivative", + "http", + "hxml", + "hy", + "imba", + "ini", + "java", + "javascript", + "jinja", + "jison", + "json", + "json5", + "jsonc", + "jsonl", + "jsonnet", + "jssm", + "jsx", + "julia", + "kotlin", + "kusto", + "latex", + "lean", + "less", + "liquid", + "log", + "logo", + "lua", + "luau", + "make", + "markdown", + "marko", + "matlab", + "mdc", + "mdx", + "mermaid", + "mojo", + "move", + "narrat", + "nextflow", + "nginx", + "nim", + "nix", + "nushell", + "objective-c", + "objective-cpp", + "ocaml", + "pascal", + "perl", + "php", + "plsql", + "po", + "postcss", + "powerquery", + "powershell", + "prisma", + "prolog", + "proto", + "pug", + "puppet", + "purescript", + "python", + "qml", + "qmldir", + "qss", + "r", + "racket", + "raku", + "razor", + "reg", + "regexp", + "rel", + "riscv", + "rst", + "ruby", + "rust", + "sas", + "sass", + "scala", + "scheme", + "scss", + "shaderlab", + "shellscript", + "shellsession", + "smalltalk", + "solidity", + "soy", + "sparql", + "splunk", + "sql", + "ssh-config", + "stata", + "stylus", + "svelte", + "swift", + "system-verilog", + "systemd", + "tasl", + "tcl", + "templ", + "terraform", + "tex", + "toml", + "ts-tags", + "tsv", + "tsx", + "turtle", + "twig", + "typescript", + "typespec", + "typst", + "v", + "vala", + "vb", + "verilog", + "vhdl", + "viml", + "vue", + "vue-html", + "vyper", + "wasm", + "wenyan", + "wgsl", + "wikitext", + "wolfram", + "xml", + "xsl", + "yaml", + "zenscript", + "zig", + ], + Var[ + Literal[ + "abap", + "actionscript-3", + "ada", + "angular-html", + "angular-ts", + "apache", + "apex", + "apl", + "applescript", + "ara", + "asciidoc", + "asm", + "astro", + "awk", + "ballerina", + "bat", + "beancount", + "berry", + "bibtex", + "bicep", + "blade", + "c", + "cadence", + "clarity", + "clojure", + "cmake", + "cobol", + "codeowners", + "codeql", + "coffee", + "common-lisp", + "coq", + "cpp", + "crystal", + "csharp", + "css", + "csv", + "cue", + "cypher", + "d", + "dart", + "dax", + "desktop", + "diff", + "docker", + "dotenv", + "dream-maker", + "edge", + "elixir", + "elm", + "emacs-lisp", + "erb", + "erlang", + "fennel", + "fish", + "fluent", + "fortran-fixed-form", + "fortran-free-form", + "fsharp", + "gdresource", + "gdscript", + "gdshader", + "genie", + "gherkin", + "git-commit", + "git-rebase", + "gleam", + "glimmer-js", + "glimmer-ts", + "glsl", + "gnuplot", + "go", + "graphql", + "groovy", + "hack", + "haml", + "handlebars", + "haskell", + "haxe", + "hcl", + "hjson", + "hlsl", + "html", + "html-derivative", + "http", + "hxml", + "hy", + "imba", + "ini", + "java", + "javascript", + "jinja", + "jison", + "json", + "json5", + "jsonc", + "jsonl", + "jsonnet", + "jssm", + "jsx", + "julia", + "kotlin", + "kusto", + "latex", + "lean", + "less", + "liquid", + "log", + "logo", + "lua", + "luau", + "make", + "markdown", + "marko", + "matlab", + "mdc", + "mdx", + "mermaid", + "mojo", + "move", + "narrat", + "nextflow", + "nginx", + "nim", + "nix", + "nushell", + "objective-c", + "objective-cpp", + "ocaml", + "pascal", + "perl", + "php", + "plsql", + "po", + "postcss", + "powerquery", + "powershell", + "prisma", + "prolog", + "proto", + "pug", + "puppet", + "purescript", + "python", + "qml", + "qmldir", + "qss", + "r", + "racket", + "raku", + "razor", + "reg", + "regexp", + "rel", + "riscv", + "rst", + "ruby", + "rust", + "sas", + "sass", + "scala", + "scheme", + "scss", + "shaderlab", + "shellscript", + "shellsession", + "smalltalk", + "solidity", + "soy", + "sparql", + "splunk", + "sql", + "ssh-config", + "stata", + "stylus", + "svelte", + "swift", + "system-verilog", + "systemd", + "tasl", + "tcl", + "templ", + "terraform", + "tex", + "toml", + "ts-tags", + "tsv", + "tsx", + "turtle", + "twig", + "typescript", + "typespec", + "typst", + "v", + "vala", + "vb", + "verilog", + "vhdl", + "viml", + "vue", + "vue-html", + "vyper", + "wasm", + "wenyan", + "wgsl", + "wikitext", + "wolfram", + "xml", + "xsl", + "yaml", + "zenscript", + "zig", + ] + ], + ] + ] = None, + theme: Optional[ + Union[ + Literal[ + "andromeeda", + "aurora-x", + "ayu-dark", + "catppuccin-frappe", + "catppuccin-latte", + "catppuccin-macchiato", + "catppuccin-mocha", + "dark-plus", + "dracula", + "dracula-soft", + "everforest-dark", + "everforest-light", + "github-dark", + "github-dark-default", + "github-dark-dimmed", + "github-dark-high-contrast", + "github-light", + "github-light-default", + "github-light-high-contrast", + "houston", + "laserwave", + "light-plus", + "material-theme", + "material-theme-darker", + "material-theme-lighter", + "material-theme-ocean", + "material-theme-palenight", + "min-dark", + "min-light", + "monokai", + "night-owl", + "nord", + "one-dark-pro", + "one-light", + "plastic", + "poimandres", + "red", + "rose-pine", + "rose-pine-dawn", + "rose-pine-moon", + "slack-dark", + "slack-ochin", + "snazzy-light", + "solarized-dark", + "solarized-light", + "synthwave-84", + "tokyo-night", + "vesper", + "vitesse-black", + "vitesse-dark", + "vitesse-light", + ], + Var[ + Literal[ + "andromeeda", + "aurora-x", + "ayu-dark", + "catppuccin-frappe", + "catppuccin-latte", + "catppuccin-macchiato", + "catppuccin-mocha", + "dark-plus", + "dracula", + "dracula-soft", + "everforest-dark", + "everforest-light", + "github-dark", + "github-dark-default", + "github-dark-dimmed", + "github-dark-high-contrast", + "github-light", + "github-light-default", + "github-light-high-contrast", + "houston", + "laserwave", + "light-plus", + "material-theme", + "material-theme-darker", + "material-theme-lighter", + "material-theme-ocean", + "material-theme-palenight", + "min-dark", + "min-light", + "monokai", + "night-owl", + "nord", + "one-dark-pro", + "one-light", + "plastic", + "poimandres", + "red", + "rose-pine", + "rose-pine-dawn", + "rose-pine-moon", + "slack-dark", + "slack-ochin", + "snazzy-light", + "solarized-dark", + "solarized-light", + "synthwave-84", + "tokyo-night", + "vesper", + "vitesse-black", + "vitesse-dark", + "vitesse-light", + ] + ], + ] + ] = None, + themes: Optional[ + Union[ + Var[Union[dict[str, str], list[dict[str, Any]]]], + dict[str, str], + list[dict[str, Any]], + ] + ] = None, + code: Optional[Union[Var[str], str]] = None, + transformers: Optional[ + Union[ + Var[list[Union[ShikiBaseTransformers, dict[str, Any]]]], + list[Union[ShikiBaseTransformers, dict[str, Any]]], + ] + ] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, Union[Var, str]]] = None, + on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + **props, + ) -> "ShikiCodeBlock": + """Create a code block component using [shiki syntax highlighter](https://shiki.matsu.io/). + + Args: + *children: The children of the component. + language: The language to use. + theme: The theme to use ("light" or "dark"). + themes: The set of themes to use for different modes. + code: The code to display. + transformers: The transformers 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. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: The props to pass to the component. + + Returns: + The code block component. + """ + ... + + def add_imports(self) -> ImportDict | list[ImportDict]: ... + @classmethod + def create_transformer( + cls, library: str, fns: list[str] + ) -> ShikiBaseTransformers: ... + +class ShikiHighLevelCodeBlock(ShikiCodeBlock): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + can_copy: Optional[bool] = False, + copy_button: Optional[Union[Component, bool]] = None, + use_transformer: Optional[Union[Var[bool], bool]] = None, + show_line_numbers: Optional[Union[Var[bool], bool]] = None, + language: Optional[ + Union[ + Literal[ + "abap", + "actionscript-3", + "ada", + "angular-html", + "angular-ts", + "apache", + "apex", + "apl", + "applescript", + "ara", + "asciidoc", + "asm", + "astro", + "awk", + "ballerina", + "bat", + "beancount", + "berry", + "bibtex", + "bicep", + "blade", + "c", + "cadence", + "clarity", + "clojure", + "cmake", + "cobol", + "codeowners", + "codeql", + "coffee", + "common-lisp", + "coq", + "cpp", + "crystal", + "csharp", + "css", + "csv", + "cue", + "cypher", + "d", + "dart", + "dax", + "desktop", + "diff", + "docker", + "dotenv", + "dream-maker", + "edge", + "elixir", + "elm", + "emacs-lisp", + "erb", + "erlang", + "fennel", + "fish", + "fluent", + "fortran-fixed-form", + "fortran-free-form", + "fsharp", + "gdresource", + "gdscript", + "gdshader", + "genie", + "gherkin", + "git-commit", + "git-rebase", + "gleam", + "glimmer-js", + "glimmer-ts", + "glsl", + "gnuplot", + "go", + "graphql", + "groovy", + "hack", + "haml", + "handlebars", + "haskell", + "haxe", + "hcl", + "hjson", + "hlsl", + "html", + "html-derivative", + "http", + "hxml", + "hy", + "imba", + "ini", + "java", + "javascript", + "jinja", + "jison", + "json", + "json5", + "jsonc", + "jsonl", + "jsonnet", + "jssm", + "jsx", + "julia", + "kotlin", + "kusto", + "latex", + "lean", + "less", + "liquid", + "log", + "logo", + "lua", + "luau", + "make", + "markdown", + "marko", + "matlab", + "mdc", + "mdx", + "mermaid", + "mojo", + "move", + "narrat", + "nextflow", + "nginx", + "nim", + "nix", + "nushell", + "objective-c", + "objective-cpp", + "ocaml", + "pascal", + "perl", + "php", + "plsql", + "po", + "postcss", + "powerquery", + "powershell", + "prisma", + "prolog", + "proto", + "pug", + "puppet", + "purescript", + "python", + "qml", + "qmldir", + "qss", + "r", + "racket", + "raku", + "razor", + "reg", + "regexp", + "rel", + "riscv", + "rst", + "ruby", + "rust", + "sas", + "sass", + "scala", + "scheme", + "scss", + "shaderlab", + "shellscript", + "shellsession", + "smalltalk", + "solidity", + "soy", + "sparql", + "splunk", + "sql", + "ssh-config", + "stata", + "stylus", + "svelte", + "swift", + "system-verilog", + "systemd", + "tasl", + "tcl", + "templ", + "terraform", + "tex", + "toml", + "ts-tags", + "tsv", + "tsx", + "turtle", + "twig", + "typescript", + "typespec", + "typst", + "v", + "vala", + "vb", + "verilog", + "vhdl", + "viml", + "vue", + "vue-html", + "vyper", + "wasm", + "wenyan", + "wgsl", + "wikitext", + "wolfram", + "xml", + "xsl", + "yaml", + "zenscript", + "zig", + ], + Var[ + Literal[ + "abap", + "actionscript-3", + "ada", + "angular-html", + "angular-ts", + "apache", + "apex", + "apl", + "applescript", + "ara", + "asciidoc", + "asm", + "astro", + "awk", + "ballerina", + "bat", + "beancount", + "berry", + "bibtex", + "bicep", + "blade", + "c", + "cadence", + "clarity", + "clojure", + "cmake", + "cobol", + "codeowners", + "codeql", + "coffee", + "common-lisp", + "coq", + "cpp", + "crystal", + "csharp", + "css", + "csv", + "cue", + "cypher", + "d", + "dart", + "dax", + "desktop", + "diff", + "docker", + "dotenv", + "dream-maker", + "edge", + "elixir", + "elm", + "emacs-lisp", + "erb", + "erlang", + "fennel", + "fish", + "fluent", + "fortran-fixed-form", + "fortran-free-form", + "fsharp", + "gdresource", + "gdscript", + "gdshader", + "genie", + "gherkin", + "git-commit", + "git-rebase", + "gleam", + "glimmer-js", + "glimmer-ts", + "glsl", + "gnuplot", + "go", + "graphql", + "groovy", + "hack", + "haml", + "handlebars", + "haskell", + "haxe", + "hcl", + "hjson", + "hlsl", + "html", + "html-derivative", + "http", + "hxml", + "hy", + "imba", + "ini", + "java", + "javascript", + "jinja", + "jison", + "json", + "json5", + "jsonc", + "jsonl", + "jsonnet", + "jssm", + "jsx", + "julia", + "kotlin", + "kusto", + "latex", + "lean", + "less", + "liquid", + "log", + "logo", + "lua", + "luau", + "make", + "markdown", + "marko", + "matlab", + "mdc", + "mdx", + "mermaid", + "mojo", + "move", + "narrat", + "nextflow", + "nginx", + "nim", + "nix", + "nushell", + "objective-c", + "objective-cpp", + "ocaml", + "pascal", + "perl", + "php", + "plsql", + "po", + "postcss", + "powerquery", + "powershell", + "prisma", + "prolog", + "proto", + "pug", + "puppet", + "purescript", + "python", + "qml", + "qmldir", + "qss", + "r", + "racket", + "raku", + "razor", + "reg", + "regexp", + "rel", + "riscv", + "rst", + "ruby", + "rust", + "sas", + "sass", + "scala", + "scheme", + "scss", + "shaderlab", + "shellscript", + "shellsession", + "smalltalk", + "solidity", + "soy", + "sparql", + "splunk", + "sql", + "ssh-config", + "stata", + "stylus", + "svelte", + "swift", + "system-verilog", + "systemd", + "tasl", + "tcl", + "templ", + "terraform", + "tex", + "toml", + "ts-tags", + "tsv", + "tsx", + "turtle", + "twig", + "typescript", + "typespec", + "typst", + "v", + "vala", + "vb", + "verilog", + "vhdl", + "viml", + "vue", + "vue-html", + "vyper", + "wasm", + "wenyan", + "wgsl", + "wikitext", + "wolfram", + "xml", + "xsl", + "yaml", + "zenscript", + "zig", + ] + ], + ] + ] = None, + theme: Optional[ + Union[ + Literal[ + "andromeeda", + "aurora-x", + "ayu-dark", + "catppuccin-frappe", + "catppuccin-latte", + "catppuccin-macchiato", + "catppuccin-mocha", + "dark-plus", + "dracula", + "dracula-soft", + "everforest-dark", + "everforest-light", + "github-dark", + "github-dark-default", + "github-dark-dimmed", + "github-dark-high-contrast", + "github-light", + "github-light-default", + "github-light-high-contrast", + "houston", + "laserwave", + "light-plus", + "material-theme", + "material-theme-darker", + "material-theme-lighter", + "material-theme-ocean", + "material-theme-palenight", + "min-dark", + "min-light", + "monokai", + "night-owl", + "nord", + "one-dark-pro", + "one-light", + "plastic", + "poimandres", + "red", + "rose-pine", + "rose-pine-dawn", + "rose-pine-moon", + "slack-dark", + "slack-ochin", + "snazzy-light", + "solarized-dark", + "solarized-light", + "synthwave-84", + "tokyo-night", + "vesper", + "vitesse-black", + "vitesse-dark", + "vitesse-light", + ], + Var[ + Literal[ + "andromeeda", + "aurora-x", + "ayu-dark", + "catppuccin-frappe", + "catppuccin-latte", + "catppuccin-macchiato", + "catppuccin-mocha", + "dark-plus", + "dracula", + "dracula-soft", + "everforest-dark", + "everforest-light", + "github-dark", + "github-dark-default", + "github-dark-dimmed", + "github-dark-high-contrast", + "github-light", + "github-light-default", + "github-light-high-contrast", + "houston", + "laserwave", + "light-plus", + "material-theme", + "material-theme-darker", + "material-theme-lighter", + "material-theme-ocean", + "material-theme-palenight", + "min-dark", + "min-light", + "monokai", + "night-owl", + "nord", + "one-dark-pro", + "one-light", + "plastic", + "poimandres", + "red", + "rose-pine", + "rose-pine-dawn", + "rose-pine-moon", + "slack-dark", + "slack-ochin", + "snazzy-light", + "solarized-dark", + "solarized-light", + "synthwave-84", + "tokyo-night", + "vesper", + "vitesse-black", + "vitesse-dark", + "vitesse-light", + ] + ], + ] + ] = None, + themes: Optional[ + Union[ + Var[Union[dict[str, str], list[dict[str, Any]]]], + dict[str, str], + list[dict[str, Any]], + ] + ] = None, + code: Optional[Union[Var[str], str]] = None, + transformers: Optional[ + Union[ + Var[list[Union[ShikiBaseTransformers, dict[str, Any]]]], + list[Union[ShikiBaseTransformers, dict[str, Any]]], + ] + ] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, Union[Var, str]]] = None, + on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + **props, + ) -> "ShikiHighLevelCodeBlock": + """Create a code block component using [shiki syntax highlighter](https://shiki.matsu.io/). + + Args: + *children: The children of the component. + can_copy: Whether a copy button should appear. + copy_button: A custom copy button to override the default one. + use_transformer: If this is enabled, the default transformer(shikijs transformer) will be used. + show_line_numbers: If this is enabled line numbers will be shown next to the code block. + language: The language to use. + theme: The theme to use ("light" or "dark"). + themes: The set of themes to use for different modes. + code: The code to display. + transformers: The transformers 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. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: The props to pass to the component. + + Returns: + The code block component. + """ + ... + +class TransformerNamespace(ComponentNamespace): + shikijs = ShikiJsTransformer + +class CodeblockNamespace(ComponentNamespace): + root = staticmethod(ShikiCodeBlock.create) + create_transformer = staticmethod(ShikiCodeBlock.create_transformer) + transformers = TransformerNamespace() + + @staticmethod + def __call__( + *children, + can_copy: Optional[bool] = False, + copy_button: Optional[Union[Component, bool]] = None, + use_transformer: Optional[Union[Var[bool], bool]] = None, + show_line_numbers: Optional[Union[Var[bool], bool]] = None, + language: Optional[ + Union[ + Literal[ + "abap", + "actionscript-3", + "ada", + "angular-html", + "angular-ts", + "apache", + "apex", + "apl", + "applescript", + "ara", + "asciidoc", + "asm", + "astro", + "awk", + "ballerina", + "bat", + "beancount", + "berry", + "bibtex", + "bicep", + "blade", + "c", + "cadence", + "clarity", + "clojure", + "cmake", + "cobol", + "codeowners", + "codeql", + "coffee", + "common-lisp", + "coq", + "cpp", + "crystal", + "csharp", + "css", + "csv", + "cue", + "cypher", + "d", + "dart", + "dax", + "desktop", + "diff", + "docker", + "dotenv", + "dream-maker", + "edge", + "elixir", + "elm", + "emacs-lisp", + "erb", + "erlang", + "fennel", + "fish", + "fluent", + "fortran-fixed-form", + "fortran-free-form", + "fsharp", + "gdresource", + "gdscript", + "gdshader", + "genie", + "gherkin", + "git-commit", + "git-rebase", + "gleam", + "glimmer-js", + "glimmer-ts", + "glsl", + "gnuplot", + "go", + "graphql", + "groovy", + "hack", + "haml", + "handlebars", + "haskell", + "haxe", + "hcl", + "hjson", + "hlsl", + "html", + "html-derivative", + "http", + "hxml", + "hy", + "imba", + "ini", + "java", + "javascript", + "jinja", + "jison", + "json", + "json5", + "jsonc", + "jsonl", + "jsonnet", + "jssm", + "jsx", + "julia", + "kotlin", + "kusto", + "latex", + "lean", + "less", + "liquid", + "log", + "logo", + "lua", + "luau", + "make", + "markdown", + "marko", + "matlab", + "mdc", + "mdx", + "mermaid", + "mojo", + "move", + "narrat", + "nextflow", + "nginx", + "nim", + "nix", + "nushell", + "objective-c", + "objective-cpp", + "ocaml", + "pascal", + "perl", + "php", + "plsql", + "po", + "postcss", + "powerquery", + "powershell", + "prisma", + "prolog", + "proto", + "pug", + "puppet", + "purescript", + "python", + "qml", + "qmldir", + "qss", + "r", + "racket", + "raku", + "razor", + "reg", + "regexp", + "rel", + "riscv", + "rst", + "ruby", + "rust", + "sas", + "sass", + "scala", + "scheme", + "scss", + "shaderlab", + "shellscript", + "shellsession", + "smalltalk", + "solidity", + "soy", + "sparql", + "splunk", + "sql", + "ssh-config", + "stata", + "stylus", + "svelte", + "swift", + "system-verilog", + "systemd", + "tasl", + "tcl", + "templ", + "terraform", + "tex", + "toml", + "ts-tags", + "tsv", + "tsx", + "turtle", + "twig", + "typescript", + "typespec", + "typst", + "v", + "vala", + "vb", + "verilog", + "vhdl", + "viml", + "vue", + "vue-html", + "vyper", + "wasm", + "wenyan", + "wgsl", + "wikitext", + "wolfram", + "xml", + "xsl", + "yaml", + "zenscript", + "zig", + ], + Var[ + Literal[ + "abap", + "actionscript-3", + "ada", + "angular-html", + "angular-ts", + "apache", + "apex", + "apl", + "applescript", + "ara", + "asciidoc", + "asm", + "astro", + "awk", + "ballerina", + "bat", + "beancount", + "berry", + "bibtex", + "bicep", + "blade", + "c", + "cadence", + "clarity", + "clojure", + "cmake", + "cobol", + "codeowners", + "codeql", + "coffee", + "common-lisp", + "coq", + "cpp", + "crystal", + "csharp", + "css", + "csv", + "cue", + "cypher", + "d", + "dart", + "dax", + "desktop", + "diff", + "docker", + "dotenv", + "dream-maker", + "edge", + "elixir", + "elm", + "emacs-lisp", + "erb", + "erlang", + "fennel", + "fish", + "fluent", + "fortran-fixed-form", + "fortran-free-form", + "fsharp", + "gdresource", + "gdscript", + "gdshader", + "genie", + "gherkin", + "git-commit", + "git-rebase", + "gleam", + "glimmer-js", + "glimmer-ts", + "glsl", + "gnuplot", + "go", + "graphql", + "groovy", + "hack", + "haml", + "handlebars", + "haskell", + "haxe", + "hcl", + "hjson", + "hlsl", + "html", + "html-derivative", + "http", + "hxml", + "hy", + "imba", + "ini", + "java", + "javascript", + "jinja", + "jison", + "json", + "json5", + "jsonc", + "jsonl", + "jsonnet", + "jssm", + "jsx", + "julia", + "kotlin", + "kusto", + "latex", + "lean", + "less", + "liquid", + "log", + "logo", + "lua", + "luau", + "make", + "markdown", + "marko", + "matlab", + "mdc", + "mdx", + "mermaid", + "mojo", + "move", + "narrat", + "nextflow", + "nginx", + "nim", + "nix", + "nushell", + "objective-c", + "objective-cpp", + "ocaml", + "pascal", + "perl", + "php", + "plsql", + "po", + "postcss", + "powerquery", + "powershell", + "prisma", + "prolog", + "proto", + "pug", + "puppet", + "purescript", + "python", + "qml", + "qmldir", + "qss", + "r", + "racket", + "raku", + "razor", + "reg", + "regexp", + "rel", + "riscv", + "rst", + "ruby", + "rust", + "sas", + "sass", + "scala", + "scheme", + "scss", + "shaderlab", + "shellscript", + "shellsession", + "smalltalk", + "solidity", + "soy", + "sparql", + "splunk", + "sql", + "ssh-config", + "stata", + "stylus", + "svelte", + "swift", + "system-verilog", + "systemd", + "tasl", + "tcl", + "templ", + "terraform", + "tex", + "toml", + "ts-tags", + "tsv", + "tsx", + "turtle", + "twig", + "typescript", + "typespec", + "typst", + "v", + "vala", + "vb", + "verilog", + "vhdl", + "viml", + "vue", + "vue-html", + "vyper", + "wasm", + "wenyan", + "wgsl", + "wikitext", + "wolfram", + "xml", + "xsl", + "yaml", + "zenscript", + "zig", + ] + ], + ] + ] = None, + theme: Optional[ + Union[ + Literal[ + "andromeeda", + "aurora-x", + "ayu-dark", + "catppuccin-frappe", + "catppuccin-latte", + "catppuccin-macchiato", + "catppuccin-mocha", + "dark-plus", + "dracula", + "dracula-soft", + "everforest-dark", + "everforest-light", + "github-dark", + "github-dark-default", + "github-dark-dimmed", + "github-dark-high-contrast", + "github-light", + "github-light-default", + "github-light-high-contrast", + "houston", + "laserwave", + "light-plus", + "material-theme", + "material-theme-darker", + "material-theme-lighter", + "material-theme-ocean", + "material-theme-palenight", + "min-dark", + "min-light", + "monokai", + "night-owl", + "nord", + "one-dark-pro", + "one-light", + "plastic", + "poimandres", + "red", + "rose-pine", + "rose-pine-dawn", + "rose-pine-moon", + "slack-dark", + "slack-ochin", + "snazzy-light", + "solarized-dark", + "solarized-light", + "synthwave-84", + "tokyo-night", + "vesper", + "vitesse-black", + "vitesse-dark", + "vitesse-light", + ], + Var[ + Literal[ + "andromeeda", + "aurora-x", + "ayu-dark", + "catppuccin-frappe", + "catppuccin-latte", + "catppuccin-macchiato", + "catppuccin-mocha", + "dark-plus", + "dracula", + "dracula-soft", + "everforest-dark", + "everforest-light", + "github-dark", + "github-dark-default", + "github-dark-dimmed", + "github-dark-high-contrast", + "github-light", + "github-light-default", + "github-light-high-contrast", + "houston", + "laserwave", + "light-plus", + "material-theme", + "material-theme-darker", + "material-theme-lighter", + "material-theme-ocean", + "material-theme-palenight", + "min-dark", + "min-light", + "monokai", + "night-owl", + "nord", + "one-dark-pro", + "one-light", + "plastic", + "poimandres", + "red", + "rose-pine", + "rose-pine-dawn", + "rose-pine-moon", + "slack-dark", + "slack-ochin", + "snazzy-light", + "solarized-dark", + "solarized-light", + "synthwave-84", + "tokyo-night", + "vesper", + "vitesse-black", + "vitesse-dark", + "vitesse-light", + ] + ], + ] + ] = None, + themes: Optional[ + Union[ + Var[Union[dict[str, str], list[dict[str, Any]]]], + dict[str, str], + list[dict[str, Any]], + ] + ] = None, + code: Optional[Union[Var[str], str]] = None, + transformers: Optional[ + Union[ + Var[list[Union[ShikiBaseTransformers, dict[str, Any]]]], + list[Union[ShikiBaseTransformers, dict[str, Any]]], + ] + ] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, Union[Var, str]]] = None, + on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, list, Callable, Var] + ] = None, + **props, + ) -> "ShikiHighLevelCodeBlock": + """Create a code block component using [shiki syntax highlighter](https://shiki.matsu.io/). + + Args: + *children: The children of the component. + can_copy: Whether a copy button should appear. + copy_button: A custom copy button to override the default one. + use_transformer: If this is enabled, the default transformer(shikijs transformer) will be used. + show_line_numbers: If this is enabled line numbers will be shown next to the code block. + language: The language to use. + theme: The theme to use ("light" or "dark"). + themes: The set of themes to use for different modes. + code: The code to display. + transformers: The transformers 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. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: The props to pass to the component. + + Returns: + The code block component. + """ + ... + +code_block = CodeblockNamespace()