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

Basic

View Source

Input

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

Output

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

export function Basic() {
  return (
    <div style={{ display: 'grid', gap: '2rem' }}>
      <div style={{ display: 'grid', gap: '1rem' }}>
        <h2>Input</h2>
        <CodeBlock
          language="jsx"
          value="<h1 style={{ fontSize: '6rem' }}>Hello World</h1>"
        />
      </div>
      <div style={{ display: 'grid', gap: '1rem' }}>
        <h2>Output</h2>
        <RenderedHTML includeHtml={false}>
          <h1 style={{ fontSize: '6rem' }}>Hello World</h1>
        </RenderedHTML>
      </div>
    </div>
  )
}

Include Html

View Source

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>

export function IncludeHtml() {
  return (
    <div style={{ display: 'grid', gap: '2rem' }}>
      <div style={{ display: 'grid', gap: '1rem' }}>
        <h2>Input</h2>
        <CodeBlock
          allowErrors
          language="jsx"
          value={`export default function Page() {\nreturn <><h1>Hello World</h1>\n<style href="h1" precedence="low">\n{\`h1 { font-size: 6rem;}\`}\n</style></>\n}`}
        />
      </div>
      <div style={{ display: 'grid', gap: '1rem' }}>
        <h2>Output</h2>
        <RenderedHTML>
          <h1>Hello World</h1>
          <style href="h1" precedence="low">{`h1 { font-size: 6rem; }`}</style>
        </RenderedHTML>
      </div>
    </div>
  )
}

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.

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.

css

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

CSS 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.

style

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

Styles to apply to code block elements.

Returns

Promise<Element>

Last updated 09/16/24