reflex/reflex/.templates/web/components/shiki/code.js
Elijah Ahianyo d63b3a2bce
[ENG-3848][ENG-3861]Shiki Code block Experimental (#4030)
* Shiki Code block Experimental

* refactor

* update code

* remove console.log

* add transformers to namespace

* some validations

* fix components paths

* fix ruff

* add a high-level component

* fix mapping

* fix mapping

* python 3.9+

* see if this fixes the tests

* fix pyi and annotations

* minimal update of theme and language map

* add hack for reflex-web/flexdown

* unit test file commit

* [ENG-3895] [ENG-3896] Update styling for shiki code block

* strip transformer triggers

* minor refactor

* linter

* fix pyright

* pyi fix

* add unit tests

* sneaky pyright ignore

* the transformer trigger regex should remove the language comment character

* minor refactor

* fix silly mistake

* component mapping in markdown should use the first child for codeblock

* use ternary operator in numbers.py, move code block args to class for docs discoverability

* precommit

* pyright fix

* remove id on copy button animation

* pyright fix for real

* pyi fix

* pyi fix fr

* check if svg exists

* copy event chain

* do a concatenation instead of first child

* added comment

---------

Co-authored-by: Carlos <cutillascarlos@gmail.com>
2024-10-22 17:01:34 +00:00

30 lines
791 B
JavaScript

import { useEffect, useState } from "react"
import { codeToHtml} from "shiki"
export function Code ({code, theme, language, transformers, ...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, {
lang: language,
theme,
transformers
});
setCodeResult(result);
}
fetchCode();
}, [code, language, theme, transformers]
)
return (
<div dangerouslySetInnerHTML={{__html: codeResult}} {...divProps} ></div>
)
}