Github markdown, syntax highlight of code blocks in the table cell

Question

Markdown has pipe table syntax but it's not enough for some cases.

| table | syntax | without multiline cell content |

So, we can use HTML table tags.

<table>
<tr>
<td>
   ```csharp
   const int x = 3;
   const string y = "foo";
   readonly Object obj = getObject();
   ```
</td>
<td>
  ```nemerle
  def x : int = 3;
  def y : string = "foo";
  def obj : Object = getObject();
  ```
</td>
<td>
  Variables defined with <code>def</code> cannot be changed once defined. This is similar to <code>readonly</code> or <code>const</code> in C# or <code>final</code> in Java. Most variables in Nemerle aren't explicitly typed like this.
</td>
</tr>

But some time ago syntax highlighting was broken and this wiki page looks ugly now. Any ideas on how to fix this?

Apodosis

Answer 1

You can use <pre> in tables, as teh_senaus said. But if you do that, syntax highlighting won't work... or will it?

Through random experimentation I found that GitHub allows specifying it with <pre lang="csharp">. This has the same effect that ```csharp does of setting the syntax highlighting to C#.

This isn't really documented anywhere in GitHub's help center, nor in linguist's documentation. But it works, even inside of tables.

So for your example table, the new code would be as follows:

<table>
<tr>
<td>
   <pre lang="csharp">
   const int x = 3;
   const string y = "foo";
   readonly Object obj = getObject();
   </pre>
</td>
<td>
  <pre lang="nemerle">
  def x : int = 3;
  def y : string = "foo";
  def obj : Object = getObject();
  </pre>
</td>
<td>
  Variables defined with <code>def</code> cannot be changed once defined. This is similar to <code>readonly</code> or <code>const</code> in C# or <code>final</code> in Java. Most variables in Nemerle aren't explicitly typed like this.
</td>
</tr>

Anesthetic

Answer 2

Add a blank line between the <td> and the code block.

Here's the fixed markdown:

<table>
<tr>
<td>

  ```csharp
  const int x = 3;
  const string y = "foo";
  readonly Object obj = getObject();
  ```
</td>
<td>

  ```nemerle
  def x : int = 3;
  def y : string = "foo";
  def obj : Object = getObject();
  ```
</td>
<td>
  Variables defined with <code>def</code> cannot be changed once defined. This is similar to <code>readonly</code> or <code>const</code> in C# or <code>final</code> in Java. Most variables in Nemerle aren't explicitly typed like this.
</td>
</tr>
</table>

and the result:

Scowl

Answer 3

You can use <pre>. Syntax highlighting won't work, but at least it will be formatted properly.

<td><pre>
   const int x = 3;
   const string y = "foo";
   readonly Object obj = getObject();
</pre></td>

Lederman

@Alvaro In case you are interested, there actually is a way to do it (<pre lang="csharp">). See my answer. – Anesthetic

Answer 4

Another way is using multiple ` and <br>, but Syntax highlighting won't work .

|1|2|3
-|-|-
`const int x = 3;`<br>`   const string y = "foo";`<br>`readonly Object obj =getObject();`|`def x : int = 3;`<br>`def y : string = "foo";`<br>`def obj : Object = getObject(); `|Variables defined with `def` cannot be changed once defined. This is similar to `readonly` or `const` in C# or `final` in Java. Most variables in Nemerle aren't explicitly typed like this.explicitly typed like this.

Pothook

Answer 5

The trick is to use the backticks around your code, while wrapping it all with a <pre> tag, like so:

<pre lang=html>`<input readonly>`</pre>

---

Here's a screenshot of how it renders, from my own use case:

Badlands

Answer 6

You can also :

A | B | C
-- | -- | --
x | y | Some code : <pre lang=php>function sayHello($someArg)</pre>
1 | 2 | 3

Sexist

Answer 7

There actually is a hack for markdown tables: Use either ASCII character 10 (newline) or 13 (carriage return) as XML character reference within <pre lang> to add line breaks.

|     | Response  |
| --- | --------- |
| 200 | <pre lang="json">{&#10;  "id": 10,&#13;  "username": "chucknorris"&#10;}</pre> |
| 400 | Some text here |

Will give:

Credits for this technique go to this answer.

Tearoom