the TUI needs a proper support for syntax highlighting. there are libraries compatible with Ratatui, which is the base for ExRatatui, so maybe a subproject that builds an extended Ratatui NIF with a custom widget for ExRatatui could be a way to go. This code editor also needs to support auto-word-wrapping for long lines.
Maybe this suggestion from another AI can help to achieve it without building my own ratatui library?
To display source code with syntax highlighting inside an ExRatatui panel, you must use the built-in CodeBlock widget.ExRatatui provides the CodeBlock component out of the box, which leverages the syntect engine under the hood to handle syntax highlighting across seven curated themes and optional line numbers.Standard ImplementationHere is how you can render a syntax-highlighted code editor panel using Elixir and ExRatatui:elixir
defmodule MyApp.CodePanel do
alias ExRatatui.Widgets.{Block, CodeBlock}
alias ExRatatui.Style
def render(area, buf) do
# [1](https://hex.pm/packages/ex_ratatui/0.10.0). Define your source code string
source_code = """
defmodule Math do
def sum(a, b) do
a + b
end
end
"""
# 2. Configure the syntax-highlighted panel
CodeBlock.new(source_code, :elixir)
|> CodeBlock.theme(:dracula) # Choose your theme (e.g., :dracula, :gruvbox, :nord)
|> CodeBlock.line_numbers(true) # Enable the line-number gutter
|> CodeBlock.block(
Block.new()
|> Block.title(" Source Code Editor ")
|> Block.borders(:all)
|> Block.border_style(Style.new(fg: :yellow, modifiers: [:bold])) # Highlight focused panel
)
# 3. Render it to the buffer area
|> CodeBlock.render(area, buf)
end
end
Key Configurations for CodeBlockLanguages Supported: Pass the language identifier as an atom (e.g., :elixir, :rust, :javascript, :python).Curated Themes: Swap look-and-feel easily using built-in themes like :dracula, :gruvbox, :nord, or :one_dark.Custom Layouts: You can expose the raw tokenized tokens using ExRatatui.CodeBlock.highlight/3 if you need to build custom diff viewers or code inspectors.Handling User InputIf your panel needs to be actively editable (instead of a read-only viewer), you will need to manage a text buffer state inside your handle_event/2 loop using a TextInput state variable. You pass the raw string from that state into the CodeBlock widget during the render/2 frame cycle so that every keystroke re-tokenizes and updates live.Would you like help setting up the interactive input state for this editor panel, or do you need a specific code theme configuration?
the TUI needs a proper support for syntax highlighting. there are libraries compatible with Ratatui, which is the base for ExRatatui, so maybe a subproject that builds an extended Ratatui NIF with a custom widget for ExRatatui could be a way to go. This code editor also needs to support auto-word-wrapping for long lines.
Maybe this suggestion from another AI can help to achieve it without building my own ratatui library?
To display source code with syntax highlighting inside an ExRatatui panel, you must use the built-in CodeBlock widget.ExRatatui provides the CodeBlock component out of the box, which leverages the syntect engine under the hood to handle syntax highlighting across seven curated themes and optional line numbers.Standard ImplementationHere is how you can render a syntax-highlighted code editor panel using Elixir and ExRatatui:elixir
```
defmodule MyApp.CodePanel do
alias ExRatatui.Widgets.{Block, CodeBlock}
alias ExRatatui.Style
def render(area, buf) do
# [1](https://hex.pm/packages/ex_ratatui/0.10.0). Define your source code string
source_code = """
defmodule Math do
def sum(a, b) do
a + b
end
end
"""
# 2. Configure the syntax-highlighted panel
CodeBlock.new(source_code, :elixir)
|> CodeBlock.theme(:dracula) # Choose your theme (e.g., :dracula, :gruvbox, :nord)
|> CodeBlock.line_numbers(true) # Enable the line-number gutter
|> CodeBlock.block(
Block.new()
|> Block.title(" Source Code Editor ")
|> Block.borders(:all)
|> Block.border_style(Style.new(fg: :yellow, modifiers: [:bold])) # Highlight focused panel
)
# 3. Render it to the buffer area
|> CodeBlock.render(area, buf)
end
end
```
Key Configurations for CodeBlockLanguages Supported: Pass the language identifier as an atom (e.g., :elixir, :rust, :javascript, :python).Curated Themes: Swap look-and-feel easily using built-in themes like :dracula, :gruvbox, :nord, or :one_dark.Custom Layouts: You can expose the raw tokenized tokens using ExRatatui.CodeBlock.highlight/3 if you need to build custom diff viewers or code inspectors.Handling User InputIf your panel needs to be actively editable (instead of a read-only viewer), you will need to manage a text buffer state inside your handle_event/2 loop using a TextInput state variable. You pass the raw string from that state into the CodeBlock widget during the render/2 frame cycle so that every keystroke re-tokenizes and updates live.Would you like help setting up the interactive input state for this editor panel, or do you need a specific code theme configuration?
hugo
added the idea label 2026-07-15 21:17:59 +00:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
the TUI needs a proper support for syntax highlighting. there are libraries compatible with Ratatui, which is the base for ExRatatui, so maybe a subproject that builds an extended Ratatui NIF with a custom widget for ExRatatui could be a way to go. This code editor also needs to support auto-word-wrapping for long lines.
Maybe this suggestion from another AI can help to achieve it without building my own ratatui library?
To display source code with syntax highlighting inside an ExRatatui panel, you must use the built-in CodeBlock widget.ExRatatui provides the CodeBlock component out of the box, which leverages the syntect engine under the hood to handle syntax highlighting across seven curated themes and optional line numbers.Standard ImplementationHere is how you can render a syntax-highlighted code editor panel using Elixir and ExRatatui:elixir
Key Configurations for CodeBlockLanguages Supported: Pass the language identifier as an atom (e.g., :elixir, :rust, :javascript, :python).Curated Themes: Swap look-and-feel easily using built-in themes like :dracula, :gruvbox, :nord, or :one_dark.Custom Layouts: You can expose the raw tokenized tokens using ExRatatui.CodeBlock.highlight/3 if you need to build custom diff viewers or code inspectors.Handling User InputIf your panel needs to be actively editable (instead of a read-only viewer), you will need to manage a text buffer state inside your handle_event/2 loop using a TextInput state variable. You pass the raw string from that state into the CodeBlock widget during the render/2 frame cycle so that every keystroke re-tokenizes and updates live.Would you like help setting up the interactive input state for this editor panel, or do you need a specific code theme configuration?