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?

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>

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:

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>

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.

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:

Answer 6

You can also :

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