Changing the Markdown syntax highlighting?

[TomJGooding]

There's some parts of the syntax highlighting in Markdown code blocks which just look strange to me.

For example, the bold highlighting of types makes them stand out a bit too much:

Java example	CSS example

The underlined functions and highlighted variables also just looks wrong to me:

Python example	Rust example

I built a small application just to compare the Markdown widget with other syntax highlighting in Textual/Rich:

code_highlights.py

from language_snippets import SNIPPETS
from rich.syntax import Syntax

from textual.app import App, ComposeResult
from textual.containers import Horizontal, HorizontalGroup, VerticalScroll
from textual.widgets import Label, Markdown, Select, Static, TextArea


class SyntaxWidget(Static):
    def __init__(self) -> None:
        super().__init__(expand=True, shrink=False)

    def update_code(self, code: str, lexer: str) -> None:
        syntax = Syntax(
            code,
            lexer=lexer,
            word_wrap=False,
            indent_guides=False,
            padding=1,
            # theme="material",
        )
        self.update(syntax)


class CodeHighlightsApp(App):
    CSS = """
    .code-scroll { border: round $accent; }
    #lang-select > Label { padding: 1; }
    TextArea {
        border: round $accent;
        padding: 1 0 0 1;
        overflow-x: hidden;
    }
    Markdown { padding: 0; }
    MarkdownFence { margin: 0; }
    """

    def compose(self) -> ComposeResult:
        with HorizontalGroup(id="lang-select"):
            yield Label("Language:")
            yield Select.from_values(
                sorted(SNIPPETS.keys()),
                allow_blank=False,
                value="python",
            )

        with Horizontal():
            with VerticalScroll(classes="code-scroll") as markdown_panel:
                markdown_panel.border_title = "Markdown widget"
                yield Markdown()

            text_area = TextArea(
                read_only=True,
                show_cursor=False,
                soft_wrap=False,
            )
            text_area.border_title = "TextArea widget"
            yield text_area

            with VerticalScroll(classes="code-scroll") as syntax_panel:
                syntax_panel.border_title = "Rich Syntax"
                yield SyntaxWidget()

    def on_select_changed(self, event: Select.Changed) -> None:
        lang = event.value
        assert isinstance(lang, str)
        self.query_one(Markdown).update(f"```{lang}\n" + SNIPPETS[lang] + "```")
        self.query_one(SyntaxWidget).update_code(SNIPPETS[lang], lang)
        text_area = self.query_one(TextArea)
        text_area.language = lang
        text_area.load_text(SNIPPETS[lang])
        code_scrolls = self.query(".code-scroll, TextArea")
        for scroll in code_scrolls:
            scroll.scroll_home(animate=False)


if __name__ == "__main__":
    app = CodeHighlightsApp()
    app.run()

I do understand that unlike the TextArea widget, the Markdown code blocks have only a single theme which is limited to Textual's base theme colors.

Would you be open to changing (or extending) the markdown theming so the syntax highlighting looks more consistent?

Alternatively, could the Markdown interface allow changing the code block highlighting?

[willmcgugan]

Of course I'm happy for any improvements to be made. But your comments are too subjective for me to make changes. Do you want to tackle it? Is a matter of matching token types with styles. See highlight.py

[TomJGooding]

Thanks, I realise some of this is subjective, which is why I wanted a discussion about possible improvements.

If we simply agree that the bold highlights look a bit weird, that's a simple change. But if the code blocks should look more consistent with the TextArea, that's obviously more involved especially if that might require multiple themes. Alternatively you could leave the default highlighting as-is but allow changing it somehow in the Markdown interface.

I might be happy to tackle this but it really depends on exactly what changes we're talking about!

[darrenburns]

I don't really mind the bold but it's probably dependent on font and how your terminal handles if there's no bold font available.

Personally really dislike the underline here though 😅

[NSPC911]

In my opinion, i just hate underlines that serve no purpose

any editor would just use normal, dim or bold text, with any colour
underlines are generally reserved for any diagnostics, like errors and warnings in neovim

i think something like what bat does would be nice