Skip to content

Format email messages in code blocks

Steve Mokris requested to merge smokris/gitlab:email-block-formatting into master

What does this MR do and why?

Currently, when you write Markdown text containing a code block with language email, GitLab renders it like other code blocks: with a monospace font and with no wrapping. But since emails contain prose, they'd be easier to read with a proportional font and word-wrapping. This MR changes the styling for code blocks with language email.

For example, this Markdown code:

```email
From: Me <me@example.com>
To: You <you@example.com>
Date: Tue, 21 Jul 2020 15:14:03 +0000
Subject: A very important message

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed imperdiet sem, a tristique risus. Mauris suscipit libero sit amet orci malesuada feugiat. Cras dolor velit, dignissim eget neque non, efficitur elementum libero. Vivamus vitae dolor dignissim, rhoncus urna ut, ultrices nunc. Curabitur malesuada ex arcu, eu suscipit magna auctor pulvinar. Cras ac ante vel odio suscipit viverra. Pellentesque cursus nisi non finibus dapibus. Aliquam ut rhoncus nisl, ac commodo libero. Donec quis aliquet neque, vitae eleifend leo. Nunc facilisis dui nisl, ac aliquet nunc porttitor eget. Curabitur laoreet tempor imperdiet. Sed eu mi augue.

Sed porttitor, diam quis pulvinar hendrerit, magna augue ultrices felis, eget mollis sem nunc scelerisque magna. Nulla vitae mattis mi. Phasellus consectetur tempus accumsan. Etiam id ligula quis ligula faucibus lobortis. Etiam quis porttitor orci. Integer vitae lectus quis ipsum pellentesque cursus. Pellentesque id vestibulum magna, vitae pellentesque lacus. Curabitur tortor est, elementum id tempor nec, porttitor ultricies lorem.
\```

…currently gets rendered like this:

Screen_Shot_2021-12-16_at_15.19.11

This MR changes it to render like this:

Screen_Shot_2021-12-16_at_15.25.35

How to set up and validate locally

  1. Create an issue, merge request, milestone, Epic, or Wiki page containing the above Markdown code (removing the backslash from the last triple-backtick line)
  2. Preview or Save, and view the result (both in the browser and in the email notification)

MR acceptance checklist

Edited by Steve Mokris

Merge request reports