RenderedHTML

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>

import React from 'react'
import { CodeBlock, RenderedHTML } from 'renoun/components'

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>

import React from 'react'
import { CodeBlock, RenderedHTML } from 'renoun/components'

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
            // @ts-expect-error
            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<React.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.

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.

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.

children

React.ReactNode

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

Return

Promise<Element>

Last updated 09/16/24