add a high-level component

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()
 
-        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"}),
-                )
+        # 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
             )
-        else:
-            copy_button = None
 
-        code_block = super().create(**props)
+        code_block_props["code"] = children[0]
+        code_block = super().create(**code_block_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()

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()