Crate dioxus_code 

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_code::{Code, Language, SourceCode, Theme};
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_code_editor::{CodeEditor, Language};
use dioxus_code::Theme;

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.

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_code::{Code, CodeTheme, Theme, code};

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.

Re-exports

pub use advanced::HighlightError;

pub use advanced::HighlightQueryErrorKind;

Modules

advanced

Advanced building blocks for custom syntax-highlighted renderers.

Macros

codemacro

Compile-time syntax highlighting.

Structs

CodeOptions

Compile-time options for the code! macro.

CodeProps

Props for Code().

CodeTheme

Syntax theme selection for Code().

SourceCoderuntime

Source text to highlight at runtime.

Theme

A syntax-highlighting theme.

Enums

Language

Tree-sitter grammar identifier.

Functions

Code

Render syntax-highlighted source code.