Markdown codeblock syntax highlighting

Elastic Stack Kibana
1

Is there a way to show syntax highlighting on canvas markdown?
Using three backticks then the code like in vscode or right here in this editor as I type this:

"```sql
SELECT * FROM users
```` "

Would highlight/bold the specific parts:

SELECT * FROM users

How can I make Canvas do that when using ```sql in the markdown?
It always comes out as one color but I can see it in the inspect tool.

<pre><code class="language-sql">SELECT * FROM users
</code></pre>

Is there way to edit the CSS to allow it to "render" and respect that code syntax highlighting selected in the markdown?

Would be really nice to have syntax highlighting in Canvas, good for presentations about coding etc.

Any CSS genius able to wave their magic wand?

2

Hi Sketchy!

As near as I can tell, syntax highlighting for code sections is not currently supported for canvas markdown elements. It would require passing in a highlight property when the markdown processor is invoked, and I'm not seeing that in the code, here : kibana/markdown.tsx at 78eb2bb8be925f418c837f83f6cb828a6abb4f08 · elastic/kibana · GitHub

I would be surprised if there's a workaround, just via CSS, since the way these usually work is that the highlighters take the original text, parse it, and inject additional HTML elements with styling into that text. A bit beyond what you could do with CSS, I think. I wonder if there are some browser extensions that would do this?

I'd suggest opening a feature request to add this - I poked around to see if there was an existing issue, but didn't see one. The Canvas developers may also know of other work-arounds.
Create your issue here: Sign in to GitHub · GitHub

1 Like
3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.