Edit Component

Y Yew Code RS

Installation

cargo add coders --features yew

Usage

use coders::yew::{Code, Block, Header, Title, CopyTrigger, Content, LanguageBadge};
use coders::{Color, Language, Size, Variant};
use yew::prelude::*;

Inline Code

use coders::yew::Code;
use coders::{Color, Size, Variant};
use yew::prelude::*;

#[function_component(Example)]
pub fn example() -> Html {
    html! {
        <Code color={Color::Accent} variant={Variant::Subtle} size={Size::Sm}>
            {"console.log(\"Hello, world!\")"}
        </Code>
    }
}

Code Block (Basic)

use coders::yew::{Block, Content, Header, Title, CopyTrigger};
use coders::Language;
use yew::prelude::*;

#[function_component(Example)]
pub fn example() -> Html {
    html! {
        <Block code="fn main() {\n    println!(\"Hello, world!\");\n}" language={Language::Rust}>
            <Header>
                <Title>{"main.rs"}</Title>
                <CopyTrigger />
            </Header>
            <Content />
        </Block>
    }
}

Props

Code

Block

CopyTrigger

Color variants

Default, Red, Orange, Yellow, Green, Teal, Blue, Cyan, Accent, Pink, Success, Warning, Danger

Variant variants

Solid, Subtle, Outline, Surface, Plain

Size variants

Xs, Sm, Md, Lg, Custom(&'static str)

Language variants

Plain, Rust, JavaScript, TypeScript, Python, Html, Css, Json, Bash, Toml, Sql, Go, Java, Cpp, C, Kotlin, Swift, Ruby, Php, Yaml, Custom(&'static str)

Theme variants

OneDark (default), Dracula, NightOwl, GithubDark, GithubLight, Solarized, Monokai, Nord, Custom(ThemeColors)

See Also

• MDN: <pre>, Preformatted Text element: The semantic root of every Content rendering.
• MDN: <code>, Inline Code element: Used for both the inline Code component and the highlighted code node inside Content.
• MDN: <figure>, Figure with Optional Caption element: The landmark wrapper rendered by Block.
• MDN: Clipboard.writeText(): The Web API called by CopyTrigger to copy code to the clipboard.

Usage

CLI Usage

You can import Code RS directly into your project to customize and modify it using the opensass cli:

os add coders yew

cargo add coders --features dio

use coders::dioxus::{Code, Block, Header, Title, CopyTrigger, Content, LanguageBadge};
use coders::{Color, Language, Size, Variant};
use dioxus::prelude::*;

use coders::dioxus::Code;
use coders::{Color, Size, Variant};
use dioxus::prelude::*;

fn Example() -> Element {
    rsx! {
        Code {
            color: Color::Accent,
            variant: Variant::Subtle,
            size: Size::Sm,
            "console.log()"
        }
    }
}

use coders::dioxus::{Block, Content, Header, Title, CopyTrigger};
use coders::Language;
use dioxus::prelude::*;

fn Example() -> Element {
    rsx! {
        Block {
            code: "fn main() {{}}",
            language: Language::Rust,
            Header {
                Title { "main.rs" }
                CopyTrigger {}
            }
            Content {}
        }
    }
}

os add coders dio

cargo add coders --features lep

use coders::leptos::{Code, Block, Header, Title, CopyTrigger, Content, LanguageBadge};
use coders::{Color, Language, Size, Variant};
use leptos::prelude::*;

use coders::leptos::Code;
use coders::{Color, Size, Variant};
use leptos::prelude::*;

#[component]
pub fn Example() -> impl IntoView {
    view! {
        <Code color=Color::Accent variant=Variant::Subtle size=Size::Sm>
            "console.log(\"Hello, world!\")"
        </Code>
    }
}

use coders::leptos::{Block, Content, Header, Title, CopyTrigger};
use coders::Language;
use leptos::prelude::*;

#[component]
pub fn Example() -> impl IntoView {
    view! {
        <Block code="fn main() {\n    println!(\"Hello, world!\");\n}" language={Language::Rust}>
            <Header>
                <Title>"main.rs"</Title>
                <CopyTrigger />
            </Header>
            <Content />
        </Block>
    }
}

os add coders lep