How can I create an HTML notification like in the diff view?

[geimist]

I would like to have an e-mail sent to me and highlight new/changed lines and deleted lines in color. Unfortunately, there are no line-based placeholders that could be adapted accordingly, e.g. like this:
<p style="color: yellow; background-color: green;">{{diff_added}}</p>

This is what the message should look like:

[weikinhuang]

I'm also interested in highlighting in html emails, as the current {{diff}} template is quite hard to read in emails.

[weikinhuang]

I figured it out with a jinja template

{%- set lines = diff_patch.replace('<br>', '\n').splitlines() -%}
<pre style="padding: 16px 0">
{%- for line in lines %}
{%- if line.startswith("---") or line.startswith("+++") %}
<span>{{ line }}</span>
{%- elif line.startswith("-") %}
<del style="text-decoration: none; color: #b30000; background: #fadad7">{{ line }}</del>
{%- elif line.startswith("+") %}
<ins style="text-decoration: none; color: #406619; background: #eaf2c2">{{ line }}</ins>
{%- else %}
<span>{{ line }}</span>
{%- endif %}
{%- endfor %}
</pre>

[dgtlmoon]

<br /> is not valid HTML according to the standards, always use <br>

[dgtlmoon]

btw, this a really cool solution :)

[weikinhuang]

@dgtlmoon i think you marked the wrong comment as the answer 😄

[dgtlmoon]

I guess the ultimate answer is to use the HTML above, but as an option like

which will cause {{diff_full}} token to switch to color mode like you wrote above instead of the text (added) etc right?

[weikinhuang]

i think a new token would probably be better, like {{ colorized_html_diff }} or something

[geimist]

Thank you for the implementation in #2837 👌

[dgtlmoon]

glad to help, sorry - this should have been done earlier in the project :)

still some tweaks to come like highlighting the words that changed.

[geimist]

We have already been able to help ourselves with the jinja template. 🤗

Highlighting of words that changed sounds good.