Displaying code changes and comments

Feature
1

This is a question of whether a feature exists (possibly as a plugin) or a feature request in case it doesn’t…

What I’m looking for is the ability to display something like this within Discourse Forum discussions:

image
image786×179 10 KB

Not just showing a bit of code with language-specific syntax highlighting (we already have this by introducing it with ```php, for example, and closing with ```).

What I want is to be able to highlight some line, perhaps comment it, and show an edit to the line. These are typically useful in any Forums discussing technical stuff where you advise changes to apply or point out, problematic areas.

Although we do use GitHub for our project, I’m not specifically asking to show changes as they happen in GitHub, but rather something that can be input independently within Discourse - the above image is meant only as an example of how it could look.

2

You can display diffs like this:

A normal line
- removed line
+ added line


```diff
A normal line
- removed line
+ added line
```
6 Likes
3

Okay… that looks :cool:

Is there anyway of crossing that with language specific syntax highlighting?

The code looks so bland without it, and so great with it.

4

Unfortunately not - I agree it would be nice though. We use highlight.js for our syntax highlighting. It looks like there was a similar discussion on their github repo, but they decided it was out of scope for the project.

3 Likes
5

Hhmm :thinking:

So they have that gist snippet there, what they’re suggesting is that people implement that outside the highlighter (in that case, it’s marked.js, I guess the same could be done with highlight.js).

Do you think Discourse could do that? Or, previous question, does this make sense in terms of architecture?

I guess the general idea is just to do some find-and-replace, remove the diff marks, send it to the syntax highlighter, and then work on it with some more find-and-replace afterwards. It sounds very awkward but the truth is that the snippet isn’t that complicated at all.

1 Like
6

It’s certainly possible, but I don’t think it will be easy. All the syntax highlighting happens in javascript, so it could be manipulated using a theme component.

1 Like
7

How did you make them colored?

8

Type out the code block like this:

```diff
A normal line
- removed line
+ added line
```

Specifying diff as the syntax means that you can use + and - at the beginning of lines to highlight them green and red.

3 Likes
9 
A normal line
- removed line
+ added line

I did it! Thank you @david

2 Likes
10

I will be using the diff construct from now on, it’s helpful.

I don’t see Discourse implementing that other suggestion from the Gist, the more I think of this, the more I believe it would fit perfectly inside the syntax highlighter, not outside.

Basically, as years go by it makes sense to add some features to syntax highlighters, and the basic job of showing code in an easy to read way extends naturally to show also some of the code’s dynamics.

What changed, where, by whom; what am I pointing at; which helpful comment explains the relation of the code to the place where it is being posted, etc.

Thanks to everybody for their participation in this discussion.

1 Like
11

Maybe an alternative?

<del>del</del> 
<ins>ins</ins>

del
ins

4 Likes