laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shiki codeblock support decorations

Browse Source
This commit is contained in:
Elijah 2024-10-24 13:43:54 +00:00
parent 0bf778e270
commit c26e0cb7cd
3 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
reflex/.templates/web/components/shiki/code.js
View File

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

7
reflex/components/datadisplay/shiki_code_block.py
View File

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

24
reflex/components/datadisplay/shiki_code_block.pyi
View File

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