dioxus-code

Syntax-highlighted code blocks for Dioxus.

---

A small Dioxus component for rendering source code with proper highlighting. Parsing is powered by arborium; themes ship as scoped CSS so you can mix several on one page.

Two ways to highlight:

• code! macro — parses at compile time and embeds the highlighted spans. Default.
• SourceCode — parses at runtime. Opt in with the runtime feature for dynamic source text.

Quick start

[dependencies]
dioxus-code = "0.1"

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

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

The path is resolved from the consumer's CARGO_MANIFEST_DIR. concat! and env! work too. When the file extension is ambiguous, pass CodeOptions::builder with CodeOptions::with_language.

Runtime highlighting

For editor-style use cases with dynamic source text:

[dependencies]
dioxus-code = { version = "0.1", features = ["runtime"] }

# use dioxus::prelude::*;
use dioxus_code::{Code, Language, SourceCode, Theme};
# let user_input = String::new();
# let _ =
rsx! {
    Code {
        src: SourceCode::new(Language::Rust, user_input),
        theme: Theme::GITHUB_LIGHT,
    }
}
# ;

Pass a [Language] variant when building SourceCode. The runtime feature includes Rust; enable the matching lang-* feature, or all-languages, for additional grammars.

Editor

dioxus-code-editor is a sibling crate that pairs the highlighter with a textarea input layer:

# use dioxus::prelude::*;
use dioxus_code_editor::{CodeEditor, Language};
use dioxus_code::Theme;

# fn editor() -> Element {
let mut source = use_signal(|| String::new());

rsx! {
    CodeEditor {
        value: source(),
        language: Language::Rust,
        theme: Theme::TOKYO_NIGHT,
        oninput: move |value| source.set(value),
    }
}
# }

It is controlled — drive CodeEditorProps::value from your own signal and update it inside CodeEditorProps::oninput.

Themes

Thirty-odd built-ins, including Tokyo Night, Catppuccin (all four), Dracula, GitHub Light/Dark, Gruvbox, Nord, One Dark, Rosé Pine, Solarized, the Rustdoc themes, and others. Each is exposed as a Theme constant; pages with multiple themes render side-by-side without leaking styles.

# use dioxus::prelude::*;
# use dioxus_code::{Code, Theme, code};
# let _ = rsx! {
Code { src: code!("/snippets/demo.rs"), theme: Theme::CATPPUCCIN_MOCHA }
# };

Use CodeTheme::system to select a light and dark theme with CSS media queries. This is JavaScript-free and works during SSR:

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

# let _ = rsx! {
Code {
    src: code!("/snippets/demo.rs"),
    theme: CodeTheme::system(Theme::GITHUB_LIGHT, Theme::TOKYO_NIGHT),
}
# };

Examples

dx serve --example dioxus-code-basic       # macro + runtime side by side
dx serve --example dioxus-code-macro-only  # compile-time highlighted spans
dx serve --example dioxus-code-live-input  # textarea bound to runtime highlighter

Workspace layout

crate	purpose
dioxus-code	The Code component, themes, and runtime/macro entry points.
dioxus-code-editor	Editable code surface built on Code.
dioxus-code-macro	Implementation of code!. Re-exported by dioxus-code under the macro feature.

License

MIT. See the repository LICENSE file.