# Displaying code changes and comments

**URL:** https://meta.discourse.org/t/displaying-code-changes-and-comments/136308
**Category:** Feature
**Created:** [December 17, 2019, 1:07pm UTC](https://meta.discourse.org/t/displaying-code-changes-and-comments/136308 "2019-12-17T13:07:37Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![pgr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pgr/32/156783_2.png) [@pgr](https://meta.discourse.org/u/pgr)
#### Post date: [December 17, 2019, 1:07pm UTC](https://meta.discourse.org/t/displaying-code-changes-and-comments/136308/1 "2019-12-17T13:07:37Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/4/5/45358fd3543ca1e050e7a03053cbd19129ac69db.png)

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.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [December 17, 2019, 1:11pm UTC](https://meta.discourse.org/t/displaying-code-changes-and-comments/136308/2 "2019-12-17T13:11:45Z")

</div>

You can display diffs like this:

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

```

````plaintext

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

---

<div class="post-metadata">

### Author: ![pgr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pgr/32/156783_2.png) [@pgr](https://meta.discourse.org/u/pgr)
#### Post date: [December 17, 2019, 1:23pm UTC](https://meta.discourse.org/t/displaying-code-changes-and-comments/136308/3 "2019-12-17T13:23:34Z")

</div>

Okay… that looks 🆒

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

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

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [December 17, 2019, 1:25pm UTC](https://meta.discourse.org/t/displaying-code-changes-and-comments/136308/4 "2019-12-17T13:25:36Z")

</div>

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](https://github.com/highlightjs/highlight.js/issues/480), but they decided it was out of scope for the project.

---

<div class="post-metadata">

### Author: ![pgr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pgr/32/156783_2.png) [@pgr](https://meta.discourse.org/u/pgr)
#### Post date: [December 17, 2019, 1:55pm UTC](https://meta.discourse.org/t/displaying-code-changes-and-comments/136308/5 "2019-12-17T13:55:25Z")

</div>

Hhmm 🤔

So they have that [gist snippet there](https://gist.github.com/choxi/6fa98f7b203bf2dfdcfa), 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.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [December 17, 2019, 2:36pm UTC](https://meta.discourse.org/t/displaying-code-changes-and-comments/136308/6 "2019-12-17T14:36:13Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Anatolia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anatolia/32/133777_2.png) [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [December 17, 2019, 7:29pm UTC](https://meta.discourse.org/t/displaying-code-changes-and-comments/136308/7 "2019-12-17T19:29:25Z")

</div>

How did you make them colored?

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [December 17, 2019, 7:30pm UTC](https://meta.discourse.org/t/displaying-code-changes-and-comments/136308/8 "2019-12-17T19:30:47Z")

</div>

Type out the code block like this:

````plaintext
```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.

---

<div class="post-metadata">

### Author: ![Anatolia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anatolia/32/133777_2.png) [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [December 17, 2019, 7:32pm UTC](https://meta.discourse.org/t/displaying-code-changes-and-comments/136308/9 "2019-12-17T19:32:58Z")

</div>

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

```

I did it! Thank you @david

---

<div class="post-metadata">

### Author: ![pgr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pgr/32/156783_2.png) [@pgr](https://meta.discourse.org/u/pgr)
#### Post date: [December 17, 2019, 8:15pm UTC](https://meta.discourse.org/t/displaying-code-changes-and-comments/136308/10 "2019-12-17T20:15:05Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [December 18, 2019, 5:36am UTC](https://meta.discourse.org/t/displaying-code-changes-and-comments/136308/11 "2019-12-18T05:36:52Z")

</div>

Maybe an alternative?

```plaintext
<del>del</del> 
<ins>ins</ins> 

```

~~del~~  
ins
