# Highlighted code inside a table?

**URL:** https://talk.jekyllrb.com/t/highlighted-code-inside-a-table/7870
**Category:** Help
**Created:** [December 12, 2022, 3:18am UTC](https://talk.jekyllrb.com/t/highlighted-code-inside-a-table/7870 "2022-12-12T03:18:09Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![benui-dev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/benui-dev/32/4687_2.png) [@benui-dev](https://talk.jekyllrb.com/u/benui-dev)
#### Post date: [December 12, 2022, 3:18am UTC](https://talk.jekyllrb.com/t/highlighted-code-inside-a-table/7870/1 "2022-12-12T03:18:09Z")

</div>

I would love to be able to write a cpp text block inside a table. I’ve tried the following but not had any luck.

````auto
| code | comment
| --- | --- |
| ```cpp
int x = 3;
``` | set x to 3 |

````

I’ve also tried using HTML, but then I can’t get the syntax highlighting to be run on the code:

```auto

<table>
<tr>
<td>
<div class="language-cpp highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
int x = 1;
</code></pre></div></div>
</td>
</tr>
</table>

```

Does anyone know how to get this to work?

---

<div class="post-metadata">

### Author: ![benui-dev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/benui-dev/32/4687_2.png) [@benui-dev](https://talk.jekyllrb.com/u/benui-dev)
#### Post date: [December 12, 2022, 5:55am UTC](https://talk.jekyllrb.com/t/highlighted-code-inside-a-table/7870/3 "2022-12-12T05:55:41Z")

</div>

Sorry what does “GFM” mean? What is the source code behind the screenshot?

---

<div class="post-metadata">

### Author: ![ashmaroli](https://avatars.discourse-cdn.com/v4/letter/a/df705f/32.png) [@ashmaroli](https://talk.jekyllrb.com/u/ashmaroli)
#### Post date: [December 12, 2022, 11:43am UTC](https://talk.jekyllrb.com/t/highlighted-code-inside-a-table/7870/4 "2022-12-12T11:43:23Z")

</div>

@benui-dev Hi, to my knowledge, you cannot use Markdown to render _highlighted_ code block inside a table-cell. Fortunately, you can use HTML and Liquid to do so:

```auto
<table>
  <tr>
    <th>Code</th>
    <th>Comment</th>
  </tr>
  <tr>
    <td>{% highlight cpp %}int x = 3;{% endhighlight %}</td>
    <td>Declare variable x with integer value 3</td>
  </tr>
</table>

```

A

---

<div class="post-metadata">

### Author: ![ninja](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/ninja/32/4925_2.png) [@ninja](https://talk.jekyllrb.com/u/ninja)
#### Post date: [December 14, 2022, 10:07am UTC](https://talk.jekyllrb.com/t/highlighted-code-inside-a-table/7870/5 "2022-12-14T10:07:28Z")

</div>

sorry for the bad word on the picture, it does not mean you, it mean me, make fun with it.

GFM is a markdown processor.  
it all in \_config.yml that

```plaintext
# Markdown settings
#
kramdown:
  input: GFM

```

---

<div class="post-metadata">

### Author: ![pdmosses](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/pdmosses/32/4764_2.png) [@pdmosses](https://talk.jekyllrb.com/u/pdmosses)
#### Post date: [December 15, 2022, 11:59am UTC](https://talk.jekyllrb.com/t/highlighted-code-inside-a-table/7870/6 "2022-12-15T11:59:26Z")

</div>

> [@ashmaroli](#):
>
> to my knowledge, you cannot use Markdown to render _highlighted_ code block inside a table-cell.

When using [kramdown syntax for tables](https://kramdown.gettalong.org/syntax.html#tables), that appears to be true (unfortunately!) because:

> each line of a table needs to have at least one not escaped pipe character so that kramdown recognizes it as a line belonging to the table

> [@benui-dev](#):
>
> I’ve also tried using HTML, but then I can’t get the syntax highlighting to be run on the code

[GFM syntax for code highlighting](https://kramdown.gettalong.org/parser/gfm.html) can be used inside HTML syntax for tables as follows:

````markdown
<table>
  <tr>
    <th>Code</th>
    <th>Comment</th>
  </tr>
  <tr>
<td markdown="1">
```cpp
    int x = 3;
```
</td>
    <td>Declare variable x with integer value 3</td>
  </tr>
</table>

````

Without setting any `kramdown` option in `_config.yml`, Jekyll renders that as:

 ![Screenshot 2022-12-15 at 12.25.12](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/0/0f06843fa2a3b4c3b65d199ae50585dacdd00791.png)

---

<div class="post-metadata">

### Author: ![ninja](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/ninja/32/4925_2.png) [@ninja](https://talk.jekyllrb.com/u/ninja)
#### Post date: [December 15, 2022, 1:07pm UTC](https://talk.jekyllrb.com/t/highlighted-code-inside-a-table/7870/7 "2022-12-15T13:07:53Z")

</div>

hey, thanks for a detail explain, and good point out, you saving me man, big thanks here.  
I’m look really stupid, and ashamed of the bad words in the picture I post here, can I take it down?