v0.1 · Dioxus 0.7

Code highlighter for Dioxus; runtime or compile time.

A drop-in component with compile-time macros, runtime highlighting, and optional source-language detection.

~/my-app

$cargo add dioxus-code

Updating crates.io index

Adding dioxus-code v0.1 to dependencies

Done.

src/counter.rsgithub-light / github-dark

use dioxus::prelude::*;

#[component]
pub fn Counter() -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        button {
            onclick: move |_| count += 1,
            "count: {count}"
        }
    }
}

Read the docs See it liveplayground

What's in the crate.

code! macroINCLUDED
Pre-styled spansINCLUDED
Themes (scoped CSS)× 30+
SourceCode runtimeOPT-IN
Runtime grammars+3.33 MiB

COMPILE-TIME MODESTATIC

Edit highlighted code inline.

sourcerust · 320 chars

Get started

01
Install
Add the dependency
Enable the runtime feature when source comes from user input, generated files, or network responses.
Cargo.tomlgithub-light / github-dark
```
dioxus-code = { version = "0.1", features = ["runtime"] }
```

Runtime source

SourceCode for live input

Pass any string through SourceCode. Provide a language hint when you know it, or enable detection for source-first workflows.

runtime.rsgithub-light / github-dark

use dioxus::prelude::*;
use dioxus_code::{Code, CodeTheme, Language, SourceCode, Theme};

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    let source = use_signal(|| "fn main() {}".to_string());

    rsx! {
        Code {
            src: SourceCode::new(Language::Rust, source()),
            theme: CodeTheme::system(Theme::GITHUB_LIGHT, Theme::GITHUB_DARK),
        }
    }
}

Static source

code! for snippets in your repo

Use the macro for examples, docs, and any source checked in alongside your app. Highlight markup is generated at compile time.

static.rsgithub-light / github-dark

use dioxus::prelude::*;
use dioxus_code::{Code, Theme, code};

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    rsx! {
        Code {
            src: code!("/snippets/example.rs"),
            theme: Theme::GITHUB_DARK,
        }
    }
}