Support highlighting diff code block inside markdown cells

[milmazz]

Hello Livebook Team,

First, thanks for all your effort. So far, the experience with Livebook has been excellent.

I'm writing a series of Elixir tutorials or step-by-step documents. Sometimes I need to show updates over previous module implementations, and it could be difficult for the reader to note where is the specific difference or improvement. So apart from adding text clarifying those differences in the surrounding Markdown cells, I was thinking of adding a diff code block to show specific changes that I want to highlight.

While you can use the diff code block inside a Markdown cell, the result is not highlighted. It would be great if Livebook highlighted those portions as you do with GitHub or using a dependency like highlightjs.org.

It's easier to see the differences with a highlighted output like the following:

10c10,16
<     %{word: "hangman", misses: [], matches: [], limit: 5, mask: "_"}
---
>     state = %{word: "hangman", misses: [], matches: [], limit: 5, mask: "_"}
>     {mask_word(state), state}
>   end
>
>   ## Helpers
>   defp mask_word(%{matches: [], mask: mask, word: word} = _state) do
>     String.replace(word, ~r/./, mask)

[josevalim]

Hi @milmazz, I believe you can send a pull request to add this to Monaco. I believe you simply need to change this line:

https://github.com/livebook-dev/livebook/pull/743/files#diff-b08ab52477603a4f946aa108a3d070fa3eeb1b309727fabcfa162ad1a7cf764bR54

Can you please give it a try and send a pull request?

[milmazz]

@josevalim Ok, I will try that locally and see if it works. I will send the PR after that. Thanks for your suggestion.

[milmazz]

I tried adding diff to that list, and it doesn't work. So I guess it is because the Monaco Editor does not support the diff code block as-is?. At least that's what I think after checking their list of supported basic-languages and language.

But, Monaco supports an inline or side-by-side diff editor. I did a quick test on their playground, and it works, but given that I'm not familiar with the Livebook codebase yet, I don't know what would be the best approach to take in this case. Specifically, is the best path to create a language syntax definition using Monarch for diff or try to integrate the existing diff inline editor in Livebook?

[josevalim]

I see. In this case I think @jonatanklosko would be the best person to answer but I would guess that a syntax definition for Monarch would be the way to go!

[jonatanklosko]

Yeah, that's the best option!