Code block

An ink code panel with a language label, a copy button and light syntax colouring. Colouring runs on the server, so code arrives coloured.

rust

use hydroxy_leptos::switch::Switch;

// Uncontrolled: the switch keeps its own state.
let view = view! { <Switch default_checked=true>"Email me"</Switch> };

sql

select project, count(*) as flags
from answers
where flagged = true
group by project; -- 2 rows

Usage

use hydroxy_leptos::code_block::CodeBlock;
use leptos::prelude::*;

const RUST: &str = r#"use hydroxy_leptos::switch::Switch;

// Uncontrolled: the switch keeps its own state.
let view = view! { <Switch default_checked=true>"Email me"</Switch> };"#;

const SQL: &str = "select project, count(*) as flags
from answers
where flagged = true
group by project; -- 2 rows";

pub fn demo() -> AnyView {
    view! {
        <div style="display: grid; gap: var(--space-5);">
            <CodeBlock code=RUST lang="rust" />
            <CodeBlock code=SQL lang="sql" />
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::code_block::CodeBlock;

const RUST: &str = r#"use hydroxy_dioxus::switch::Switch;

// Uncontrolled: the switch keeps its own state.
rsx! { Switch { default_checked: true, "Email me" } }"#;

const SQL: &str = "select project, count(*) as flags
from answers
where flagged = true
group by project; -- 2 rows";

#[component]
pub fn CodeBlockDemo() -> Element {
    rsx! {
        div { style: "display: grid; gap: var(--space-5);",
            CodeBlock { code: RUST, lang: "rust" }
            CodeBlock { code: SQL, lang: "sql" }
        }
    }
}

Anatomy

Component	data-part	Renders
`CodeBlock`	—	figure[data-scope=code-block]
	head	Language label and copy button
	copy	Copies the code; shows Copied for a moment

Props

Prop	Type	Notes
`code`	String	Required. The code
`lang`	String	rust, ts, js, json, sql, bash, yaml or toml. Others stay plain