idea: markdown, liquid and lua code editor with syntax highlighting in the TUI #32

New Issue

hugo · 2026-07-15T21:17:59Z

hugo commented

2026-07-15 21:17:59 +00:00

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

hugo referenced this issue from a commit

2026-07-17 14:44:01 +00:00

feat: issue #32 markdown editor for TUI

hugo referenced this issue from a commit

2026-07-17 14:44:01 +00:00

fix: updated current line indicator for issue #32

hugo closed this issue

2026-07-17 14:44:10 +00:00

Sign in to join this conversation.