Home / GitHub Page

Github like syntax highlighting for diff

Hello everyone !
Was curious if anyone knows how to create a custom stylesheet, to implement Github like syntax highlighting for git differences like this.

Thank you in advance!

Welcome to the forums. I genuinely don’t know this stuff well enough to be of help here, but there is an on going discussion about this particular topic where you should be able to find this out.

hi @atomtm thanks for asking this question, it taught me something new about Joplin!

Apparently the syntax you linked to is already supported! I’ve copied the raw markdown below, try pasting it into Joplin!

```diff
public class Hello
{
   public static void Main()
   {
-      System.Console.WriteLine("Hello, World!");
+      System.Console.WriteLine("Rock all night long!");
   }
}

The discourse markdown renderer is eating my closing backticks so you’ll need to add those yourself.

You’re just creating a code block and instead of setting a specific language you set it to “diff”

1 Like

I have already tried that , however I would like the background of the row to change too. Also is there a way to keep the syntax highlighting for the language and color the rows that start with -,+ , i.e. don’t use diff but java for example and highlight changed rows?
Thank you !

The css classes for the deleted and added lines is hljs-deletion and hljs-addition, you can see this by using Help->Toggle Development Tools, which allows you to inspect the Joplin html.
This will allow you to highlight the background like in the example.

But unfortunatley as in the example it looks like you can’t get both syntax and diff highlighting, see the hljs comment thread about it

2 Likes

Thank you very much for your the info. Will try it out and let you know !

Was curious if you can render your notes with addins like this ?