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.

Examples

Input

<h1 style={{ fontSize: '6rem' }}>Hello World</h1>

Output

<h1 style="font-size: 6rem">Hello World</h1>

Basic

Input

export default function Page() {
  return (
    <>
      <h1>Hello World</h1>
      <style href="h1" precedence="low">
        {`h1 { font-size: 6rem;}`}
      </style>
    </>
  )
}

Output

<html>
  <head>
    <style data-precedence="low" data-href="h1">
      h1 {
        font-size: 6rem;
      }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Include HTML

API Reference

RenderedHTML

View Source

children *

React.ReactNode

The React element(s) to render as HTML.

includeHtml

boolean= true

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

style

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

Styles to apply to code block elements. Use the children prop for full control of styling.

sourcePath

string | false

Path to the source file on disk in development and the git provider source in production.

filename

string

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

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

focusedLines

string

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

unfocusedLinesOpacity

number

Opacity of unfocused lines when using focusedLines.

allowCopy

boolean

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

allowErrors

boolean | string

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

showErrors

boolean

Show or hide error diagnostics.

showLineNumbers

boolean

Show or hide line numbers.

showToolbar

boolean

Show or hide the toolbar.

className

{ container?: string toolbar?: string lineNumbers?: string token?: string popover?: string }

Class names to apply to code block elements. Use the children prop for full control of styling.

children

React.ReactNode

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

Last updated 05/22/24