Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 379
Ziav Avatar asked Feb 19 '14 10:02

Ziav


People also ask

How do you highlight code blocks in Markdown?

To highlight code, write the name of the language the code is written in after the initial triple backticks. In the above example, the code is written in JavaScript, and hence javascript is added after triple backticks.

How do I highlight a block of code on github?

To link to multiple lines of highlighted code, select your first line of code and then CTRL+SHIFT click on the last line of code you want to highlight. Notice the URL is now appended with a range of line numbers (e.g. https://github.com/…/functions.php#L117-L148).

How do I highlight a Markdown in github?

You can also create a Markdown hyperlink by highlighting the text and using the keyboard shortcut Command + V .

What does Github use for syntax highlighting?

We use Linguist to perform language detection and to select third-party grammars for syntax highlighting.


3 Answers

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> 
like image 104
Pokechu22 Avatar answered Oct 11 '22 06:10

Pokechu22


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:

enter image description here

like image 37
牛さん Avatar answered Oct 11 '22 04:10

牛さん


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>
like image 22
teh_senaus Avatar answered Oct 11 '22 04:10

teh_senaus