ability to print to html

[lifeart]

No description provided.

[rwjblue]

What does this do? How is this different from the existing printer? Do we really need to duplicate all of the code?

[lifeart]

@rwjblue I think this is think to disucss with core team, currently there is no idiomatic glimmer syntax higlighter.
Existing handlebars higlighter works very bad with glimmer syntax, and it's literally new one language.
I'm trying to get an POC ast-based syntax higlighter (without regexp's), with ability to customize classes.

Main idea, is allow over developers import some print function, and get glimmer template as valid html, and customize token classes, to get ability to customize higligting in only few classes, wihtout extra work.

[lifeart]

Example:

input:

<p {{action "activate"}} {{someting foo="bar"}}>Test</p>

output:

<span class="tag">&#60;</span><span class="tag-name">p</span><span class="non-breaking-space">&#160;</span><span class="curly">&#123;&#123;</span><span class="path">action</span><span class="non-breaking-space">&#160;</span><span class="string">"activate"</span><span class="curly">&#125;&#125;</span><span class="non-breaking-space">&#160;</span><span class="curly">&#123;&#123;</span><span class="path">someting</span><span class="non-breaking-space">&#160;</span><span class="hash-key">foo</span><span class="equal">&#61;</span><span class="string">"bar"</span><span class="curly">&#125;&#125;</span><span class="tag">&#62;</span><span class="text-node">Test</span><span class="tag">&#60;</span><span class="tag">&#47;</span><span class="tag-name">p</span><span class="tag">&#62;</span>

and style:

body {
  font-family: monospace;
  background-color: #3f3f3f;
  color: #fefefe;
}
.path {
  color: orange;
}
.string {
  color: #65fb65;
}
.curly {
  color: red;
}
.hash-key {
  color: #8181ff;
  font-weight: bold;
}
.tag-name {
  color: purple;
}
.tag {
  color: #9C27B0;
  font-weight: bold;
}
.text-node {
  color: #face8d;
}

give:

https://codepen.io/lifeart/pen/eYZxmzd

[NullVoxPopuli]

It'd be fantastic to have this. If not for generating hi-fi syntax highlighting, but for projects that happen to have a bit of the compiler tools in the browser and don't want to rely on buggy / incomplete highlightjs or prism definitions. Working with highlightjs is maddening, imo (from syntax definition pov)

[NullVoxPopuli]

Existing handlebars higlighter works very bad with glimmer syntax,

In neovim, tree-sitter is really good.
But, they don't have a modules build yet, so using it in the browser is all hax.

It'd be cool to compare to 'the' glimmer parser when making editor specific highlighters though