Shiki Code Block

A code block component that uses Shiki to highlight code.

Loading...

tsx

Installation

1. Follow the links to install required rlx packages

PackageTypeLink
@rlx-widgets/buttonWidget

2. Install the following dependencies

Loading...

bash

API Reference

Props list

PropTypeDefaultExampleDescription
codestring-console.log("Hello, world!");The code to be highlighted.
langBundledLanguage-"tsx"Supported languagesFull list
classNamestring | undefined-"bg-red-500"The class name to be applied to the code block.

Data Slots

List of data slots

Loading...

html
SlotDescription
shiki-code-block-rootThe root element of the code block.
shiki-code-block-containerThe container element of the code block.
shiki-code-block-contentThe content element of the code block.
shiki-code-block-codeThe code element of the code block.
shiki-code-block-langThe language of the code block.
shiki-code-block-copy-buttonThe copy button element of the code block.