#editor #syntax-highlighting #highlighting #egui

egui_code_editor

egui Code Editor widget with numbered lines and syntax highlighting

18 releases

0.2.10 Sep 27, 2024
0.2.9 Jul 13, 2024
0.2.7 Apr 10, 2024
0.2.6 Mar 27, 2024
0.1.2 Jul 17, 2023

#90 in GUI

Download history 18/week @ 2024-06-18 39/week @ 2024-06-25 202/week @ 2024-07-02 203/week @ 2024-07-09 107/week @ 2024-07-16 115/week @ 2024-07-23 94/week @ 2024-07-30 106/week @ 2024-08-06 103/week @ 2024-08-13 97/week @ 2024-08-20 142/week @ 2024-08-27 126/week @ 2024-09-03 92/week @ 2024-09-10 180/week @ 2024-09-17 346/week @ 2024-09-24 160/week @ 2024-10-01

789 downloads per month
Used in 2 crates

MIT license

435KB
2.5K SLoC

Egui Code Editor

Text Editor Widget for egui with numbered lines and simple syntax highlighting based on keywords sets.

Usage with egui

use egui_code_editor::{CodeEditor, ColorTheme, Syntax};

CodeEditor::default()
  .id_source("code editor")
  .with_rows(12)
  .with_fontsize(14.0)
  .with_theme(ColorTheme::GRUVBOX)
  .with_syntax(Syntax::rust())
  .with_numlines(true)
  .show(ui, &mut self.code);

Usage as lexer without egui

Cargo.toml

[dependencies]
egui_code_editor = { version = "0.2" , default-features = false }
colorful = "0.2.2"

main.rs

use colorful::{Color, Colorful};
use egui_code_editor::{Syntax, Token, TokenType};

fn color(token: TokenType) -> Color {
    match token {
        TokenType::Comment(_) => Color::Grey37,
        TokenType::Function => Color::Yellow3b,
        TokenType::Keyword => Color::IndianRed1c,
        TokenType::Literal => Color::NavajoWhite1,
        TokenType::Numeric(_) => Color::MediumPurple,
        TokenType::Punctuation(_) => Color::Orange3,
        TokenType::Special => Color::Cyan,
        TokenType::Str(_) => Color::Green,
        TokenType::Type => Color::GreenYellow,
        TokenType::Whitespace(_) => Color::White,
        TokenType::Unknown => Color::Pink1,
    }
}

fn main() {
    let text = r#"// Code Editor
CodeEditor::default()
    .id_source("code editor")
    .with_rows(12)
    .with_fontsize(14.0)
    .with_theme(self.theme)
    .with_syntax(self.syntax.to_owned())
    .with_numlines(true)
    .vscroll(true)
    .show(ui, &mut self.code);
    "#;

    let syntax = Syntax::rust();
    for token in Token::default().tokens(&syntax, text) {
        print!("{}", token.buffer().color(color(token.ty())));
    }
}

Themes

Based on themes in Helix Editor.

Font used in examples is Comic Code by Toshi Omagari.

Ayu

Ayu

Ayu Dark

Ayu Dark

Ayu Mirage

Ayu Mirage

Github Dark

Github Dark

Github Light

Github Light

Gruvbox

Gruvbox

Gruvbox Light

Gruvbox Light

Sonokai

Sonokai

Dependencies

~4–9MB
~86K SLoC