Ariadocs

CodeBlock and Pre

Edit on GitHub

Code with highlighting and a copy button.

CodeBlock

Preview
email.json
{
  "from": "Acme <onboarding@resend.dev>",
  "to": [
    "delivered@resend.dev"
  ],
  "subject": "Hello",
  "html": "<p>It works</p>"
}
import { CodeBlock } from "@ariadocs/components";

<CodeBlock code={code} language="json" title="email.json" />;

JSON, bash, JavaScript and Python are highlighted. Other languages show as plain text. The highlighting uses the same classes as rehypePrism, so one syntax theme covers both.

Pass actions to put controls such as tabs in the header. CodeTabs gives you tabs that match.

Pre

Pre replaces pre in MDX. It keeps the highlighting from rehypePrism and adds a copy button. Hover any code block on this site to see it.

import { Pre } from "@ariadocs/components";

createDocs({ contentDir: "content", components: { pre: Pre } });

To copy the original code instead of the displayed text, add rehypeCodeRaw from @ariadocs/mdx/plugins.