Backticks in markdown sometimes do not render properly in diffs or source view for edge cases

Problem to solve

In certain situations, backtick use in GitLab can display improperly in diffs and "display source" view. While rendered properly, it makes reviews more difficult as you are often checking the diff, which is improperly colored.

Further details

This list is long and full of screenshots, but it seemed like the easiest way to explain the various edge cases I found (so far).

First Issue:

Putting double backticks around triple backticks renders fine:

markdown1-rendered

But displays funny in "source view" (and in diffs). Everything after that triple backtick is now considered "inside" a code block.

markdown1

Fixed by changing the double backticks to quad backticks (without changing the rendering at all).

markdown1-fixed

Second issue

Using quad backticks to fence in triple backticks renders fine:

markdown2-rendered

But, like above, everything afterwards is considered to be "inside" a code block for "source view" and in diffs:

markdown2

Fixed by using triple tildes. Note that this solution will NOT work if you have triple tildes in the code block.

markdown2-fixed

Using quad tildes when you have triple tildes in the code block also introduces other edge cases:

markdown2-tildes2

Third issue

Code blocks render fine when embeded into a list:

markdown3-rendered

But triple backticks are broken in the "source view" when not located as the far left.

markdown3

Triple tildes render fine, but don't color properly in source view:

markdown3-partial-fix

Removing the list completely works, but changes the layout of the page (no more list):

markdown3-partial-fix2

Using 4 spaces could work, as that's a valid way to make a code block, but the triple dash is not properly escaped during rendering, causing an unintended horizontal rule, showing another edge case:

markdown3-badfix

Strangely (to me) it works by combining 4 spaces AND triple backticks. This doesn't seem right, because if the backticks are red, they should be rendered. It seems in this case they are being interpreted for the code block during rendering, but not during source view, maybe?

markdown3-weirdfix1

One thing that seems to work is six spaces. (4 for the code block, 2 for the list nesting). Not ideal.🤔

markdown3-weirdfix2

Assignee Loading
Time tracking Loading