RenderedHTML

Renders children as HTML within a CodeBlock component.

Security

This component should only be used for educational purposes. Always sanitize user-provided content before passing it to RenderedHTML.

API Reference

RenderedHTML

({ children, includeHtml, ...props }: { children: React.ReactNode; includeHtml?: boolean; } & Omit<CodeBlockProps, "language" | "value">) => Promise<JSX.Element>

Renders children as HTML within a CodeBlock component.

Parameters
Properties

children *

React.ReactNode

The React element(s) to render as HTML.

includeHtml

boolean | undefined= true

Whether or not to wrap children in html, head, and body tags.

css

{ container?: CSSObject; toolbar?: CSSObject; lineNumbers?: CSSObject; token?: CSSObject; popover?: CSSObject; } | undefined

CSS styles to apply to code block elements.

style

{ container?: React.CSSProperties; toolbar?: React.CSSProperties; lineNumbers?: React.CSSProperties; token?: React.CSSProperties; popover?: React.CSSProperties; } | undefined

Styles to apply to code block elements.

className

{ container?: string; toolbar?: string; lineNumbers?: string; token?: string; popover?: string; } | undefined

Class names to apply to code block elements.

children

React.ReactNode

Overrides default rendering to allow full control over styles using CodeBlock components like Tokens, LineNumbers, and Toolbar.

filename

string | undefined

Name or path of the code block. Ordered filenames will be stripped from the name e.g. 01.index.tsx becomes index.tsx.

highlightedLines

string | undefined

A string of comma separated lines and ranges to highlight e.g. '1, 3-5, 7'.

focusedLines

string | undefined

A string of comma separated lines and ranges to focus e.g. '6-8, 12'.

unfocusedLinesOpacity

number | undefined

Opacity of unfocused lines when using focusedLines.

allowCopy

boolean | undefined

Show or hide a button that copies the source code to the clipboard.

allowErrors

string | boolean | undefined

Whether or not to allow errors. Accepts a boolean or comma-separated list of allowed error codes.

showErrors

boolean | undefined

Show or hide error diagnostics.

showLineNumbers

boolean | undefined

Show or hide line numbers.

showToolbar

boolean | undefined

Show or hide the toolbar.

shouldFormat

boolean | undefined

Whether or not to format the source code using prettier if installed.

Returns
Promise<Element>
Last updated