# Markdown codeblock syntax highlighting

**URL:** <https://discuss.elastic.co/t/markdown-codeblock-syntax-highlighting/279549>\
**Category:** Kibana\
**Tags:** canvas\
**Created:** [July 25, 2021, 6:01am UTC](https://discuss.elastic.co/t/markdown-codeblock-syntax-highlighting/279549 "2021-07-25T06:01:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sketchy](https://avatars.discourse-cdn.com/v4/letter/s/258eb7/32.png) [@Sketchy](https://discuss.elastic.co/u/Sketchy)\
**Post date:** [July 25, 2021, 6:01am UTC](https://discuss.elastic.co/t/markdown-codeblock-syntax-highlighting/279549/1 "2021-07-25T06:01:58Z")

</div>

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:

```sql
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.

```auto
<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?

---

<div class="post-metadata">

**Author:** ![Patrick\_Mueller](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/patrick_mueller/32/109425_2.png) [@Patrick\_Mueller](https://discuss.elastic.co/u/Patrick_Mueller)\
**Post date:** [July 28, 2021, 8:39pm UTC](https://discuss.elastic.co/t/markdown-codeblock-syntax-highlighting/279549/2 "2021-07-28T20:39:55Z")

</div>

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](https://github.com/markdown-it/markdown-it#syntax-highlighting) when the markdown processor is invoked, and I'm not seeing that in the code, here : [kibana/markdown.tsx at 78eb2bb8be925f418c837f83f6cb828a6abb4f08 · elastic/kibana · GitHub](https://github.com/elastic/kibana/blob/78eb2bb8be925f418c837f83f6cb828a6abb4f08/src/plugins/kibana_react/public/markdown/markdown.tsx#L32-L37)

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](https://github.com/elastic/kibana/issues/new?assignees=&labels=&template=Feature_request.md)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [August 25, 2021, 8:39pm UTC](https://discuss.elastic.co/t/markdown-codeblock-syntax-highlighting/279549/3 "2021-08-25T20:39:58Z")

</div>

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