Highlighted code inside a table?

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.

| 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:


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

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

@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:

<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

1 Like

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

# Markdown settings
#
kramdown:
  input:                     GFM

When using kramdown syntax for 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

GFM syntax for code highlighting can be used inside HTML syntax for tables as follows:

<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:

1 Like

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?