Code Block

Pick a framework. Both use the same recipe, so the styling matches exactly.

snowflake.rs

fn main() {
    let flakes = (0..6).map(|i| i * 60);
    println!("{:?}", flakes.collect::<Vec<_>>());
}

Code Block props for React
Prop	Type	Default	Description
code	string		The code to display.
label	string		Filename or caption shown above the code.

Also takes className and children. Anything else passes through to the figure.

code-block.demo.tsx

import { CodeBlock } from "../react/index.js";

const sample = `fn main() {
    let flakes = (0..6).map(|i| i * 60);
    println!("{:?}", flakes.collect::<Vec<_>>());
}`;

export default function CodeBlockDemo() {
  return <CodeBlock label="snowflake.rs" code={sample} />;
}

snowflake.rs

fn main() {
    let flakes = (0..6).map(|i| i * 60);
    println!("{:?}", flakes.collect::<Vec<_>>());
}

Code Block props for Svelte
Prop	Type	Default	Description
code	string		The code to display.
label	string		Filename or caption shown above the code.

Also takes class and snippet children. Anything else passes through to the figure.

code-block.demo.svelte

<script lang="ts">
  import { CodeBlock } from "../svelte/index.js";

  const sample = `fn main() {
    let flakes = (0..6).map(|i| i * 60);
    println!("{:?}", flakes.collect::<Vec<_>>());
}`;
</script>

<CodeBlock label="snowflake.rs" code={sample} />