Syntax Highlighting for inline templates in Pull Requests

[Workman]

Hey team,

I realize this may be a Github or Markup question, but I'm not sure where else to ask this and wanted to shop it around with anyone who has been using inline templates at Github.

I've started to adopt the inline template style pattern and noticed that syntax highlighting doesn't quite work in diffs or markup or Github.

What's a good starting point to support better syntax highlighting? or if anyone else has been thinking about this before diving too deep.

Examples

class ExampleComponent < ApplicationComponent
  slim_template <<~SLIM
    div
      .example-class 
        p | Hello World
        p = (@example + " World")
        p = link_to("Hello World", "https://www.google.com")
  SLIM

  erb_template <<~ERB
    <div>
      <div class=".example-class">
        <p>Hello World</p>
        <p><%= @example + " World" %></p>
        <p><%= link_to("Hello World", "https://www.google.com") %></p>
      </div>
    </div>
  ERB

  def initialize
    @example = "Hello"
  end
end

GH Comparisons

Some comparisons out of the box

Slim

Significant differences in syntax highlighting.

Inline

Sibling file

ERB

Mostly equivalent, with slight changes in text

Inline

Sibling file

[lesliecdubs]

👋🏻 Hi @Workman, thanks for writing. GitHub handles syntax highlighting using the tree-sitter library: https://github.com/tree-sitter/tree-sitter-ruby. Is that helpful, or are you requesting updates to the ViewComponent framework to support this?

[Workman]

Hi @lesliecdubs Thanks for the direction! Yes, that's exactly what I was looking for (with the half-hope that someone already implemented it 😅)

I'll have a look at the repo and contributing guidelines and see how that may work.

Thank you.