v0.1 · Dioxus 0.7

Code highlighter for Dioxus; Runtime or compile time.

A drop-in component with two source modes — compile-time macro and runtime detection. No JS, no flash of unstyled code.

~/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::*;
use dioxus_code::{Code, Theme, code};

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

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

Read the docs See it liveplayground

What's in the crate.

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

PARSER BYTES SHIPPED0

Edit highlighted code inline.

source.rsrust · 320 chars

use dioxus::prelude::*; use dioxus_code::{Code, Theme, code}; fn main() { dioxus::launch(App); } #[component] fn App() -> Element { rsx! { div { class: "app", Code { src: code!("/snippets/demo.rs"), theme: Theme::GITHUB_DARK, } } } }

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 already know it — Arborium handles tokenizing.

runtime.rsgithub-light / github-dark

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

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

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

    rsx! {
        Code {
            src: SourceCode::new(source()).with_language("rust"),
            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,
        }
    }
}