https://github.com/dioxuslabs/dioxus-code
Bundle size friendly code highlighting component for dioxus
https://github.com/dioxuslabs/dioxus-code
Last synced: 12 days ago
JSON representation
Bundle size friendly code highlighting component for dioxus
- Host: GitHub
- URL: https://github.com/dioxuslabs/dioxus-code
- Owner: DioxusLabs
- License: mit
- Created: 2026-05-05T15:08:45.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-26T14:21:01.000Z (17 days ago)
- Last Synced: 2026-05-26T15:34:57.403Z (17 days ago)
- Language: CSS
- Homepage: https://dioxuslabs.github.io/dioxus-code/
- Size: 16.4 MB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
dioxus-code
Syntax-highlighted code blocks for Dioxus.
---
A small Dioxus component for rendering source code with proper highlighting. Parsing is powered by [arborium](https://crates.io/crates/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
```toml
[dependencies]
dioxus-code = "0.1"
```
```rust
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:
```toml
[dependencies]
dioxus-code = { version = "0.1", features = ["runtime"] }
```
```rust
# 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:
```rust
# 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.
```rust
# 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:
```rust
# 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
```sh
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.
[`code!`]: https://docs.rs/dioxus-code/latest/dioxus_code/macro.code.html
[`Code`]: https://docs.rs/dioxus-code/latest/dioxus_code/fn.Code.html
[`CodeEditorProps::oninput`]: https://docs.rs/dioxus-code-editor/latest/dioxus_code_editor/struct.CodeEditorProps.html#structfield.oninput
[`CodeEditorProps::value`]: https://docs.rs/dioxus-code-editor/latest/dioxus_code_editor/struct.CodeEditorProps.html#structfield.value
[`CodeOptions`]: https://docs.rs/dioxus-code/latest/dioxus_code/struct.CodeOptions.html
[`CodeOptions::builder`]: https://docs.rs/dioxus-code/latest/dioxus_code/struct.CodeOptions.html#method.builder
[`CodeOptions::with_language`]: https://docs.rs/dioxus-code/latest/dioxus_code/struct.CodeOptions.html#method.with_language
[`CodeTheme::system`]: https://docs.rs/dioxus-code/latest/dioxus_code/struct.CodeTheme.html#method.system
[`dioxus-code`]: https://crates.io/crates/dioxus-code
[`dioxus-code-editor`]: https://crates.io/crates/dioxus-code-editor
[`dioxus-code-macro`]: https://crates.io/crates/dioxus-code-macro
[`SourceCode`]: https://docs.rs/dioxus-code/latest/dioxus_code/struct.SourceCode.html
[`Theme`]: https://docs.rs/dioxus-code/latest/dioxus_code/struct.Theme.html