5

This question isn't relevant anymore since the site once again supports HTML formatting inside code blocks. Stack Exchange implemented the plug-in workaround noted in the answer, to resolve an issue with syntax highlighting not working in diff views (as highlighting would remove the formatting).

In the past, it used to be possible to apply rich text formatting to text inside code blocks, as long as the code block was formatted using the HTML <pre><code> elements. As an example, the following code in a post:

<pre><code>.
This is <b>bold</b>, <i>italic</i>, and <strike>striked-out</strike> text.
.</code></pre>

...would display as:

.
This is bold, italic, and striked-out text.
.

Notice that the HTML tags would actually be applied and format the text as indicated.

This used to work in the past for all posts, but now seems to be broken. In most cases, that text now looks like:

.
This is bold, italic, and striked-out text.
.

It seems that the HTML elements are being completely stripped out rather than being applied to text, or even rendered as text.

  • It used to work fine for many years; why is it now broken?
  • When making or editing a post, it tends to render as it did before, with formatting applied, but unexpectedly changes when the post is saved. Why is this happening?
  • It still works in some posts! Why is this post affected, but this other post not?

This post is meant as a public service announcement, as well as a duplicate target for anyone who asks about this problem here. While posts that make use of this feature are rare, I feel this is still worthwhile posting given this staff comment remarking how this feature worked for many, many years. It also serves as a reference as to how to fix broken posts.

6
  • 1
    Why isn't this a duplicate of your question linked in your answer?
    – Thom A
    Commented May 5, 2022 at 11:24
  • @Larnu At the end of my self-answer, I link to my discussion post you linked. That post is a discussion as to whether or not the plugin to work around this issue should be fixed; this post is an overview for users who don't know the history and easy instructions on how to work around it, for the (temporary or indefinite) period of time the plugin is not installed.
    – gparyani
    Commented May 5, 2022 at 11:26
  • 1
    I personally, like was said in the other question, don't think it needs to be. I see no reason for bold or italic code. As Cody said: "If your associated text cannot or does not adequately describe the important bits of the code block, then you've already failed to write a good answer." There's such a low "need" for this because there are better ways to emphasis code sections.
    – Thom A
    Commented May 5, 2022 at 11:42
  • 1
    @Larnu I disagree that there are "better ways to [emphasize] code sections". It can certainly be argued that the feature isn't necessary, but the alternatives to actual formatting are comments and make shift arrows in code blocks, which I feel don't hold a candle to real formatting (eg. "note the keywords in bold"), which I feel is likely to be much more legible when used well. The point stands that the usage is niche and uncommon though.
    – zcoop98
    Commented May 5, 2022 at 15:12
  • 1
    Related: Inline formatting no longer works with syntax highlighting and Doesn't formatting <b> tags inside a <pre> tag
    – Abdul Aziz Barkat
    Commented May 5, 2022 at 15:20
  • You can also emphasise the section outside of the main block, @zcoop98 , which I would suggest is better. In truth, I am far more likely to notice code that is emphasised in the description, than a random line that's bold in the code block/fence.
    – Thom A
    Commented May 5, 2022 at 15:23

1 Answer 1

Reset to default
5

Why is text formatting in code blocks now broken?

This is caused by a change to the syntax highlighter used by Stack Overflow, Highlight.js. As of version 11 (released May 2021), support for HTML merging (using HTML elements inside code blocks to format text) has been removed from the highlighter. When highlighting, it now pulls the plain text version of the rich text (using the JavaScript property textContent), which strips out any HTML tags when performing highlighting.

Note that this applies only to code blocks formatted using the HTML <pre><code> elements. For blocks formatted using four-space indent or triple backticks (```), HTML elements are, and always have been, rendered as text rather than being applied or stripped as with the latter type of block.

Why was this change made?

Per the announcement from the maintainers of Highlight.js, this change was made in order to reduce the chances of HTML injection security vulnerabilities. (Keep in mind that while HTML is sanitized in Stack Overflow posts, Highlight.js is a general library maintained outside of Stack Exchange and used by many others, many of whom don't perform HTML sanitizing.)

What posts and/or code blocks are affected?

Essentially, any code block for which syntax highlighting is being performed is affected by this change, and will have HTML tags inside the code block stripped out instead of applied to text. Per that link, syntax highlighting is performed on posts depending on the tags used on the question. If at least one tag on the question has a highlighting language specified, all code blocks in the question and its answers (which don't explicitly have highlighting disabled) will be highlighted.

If no highlighting is being performed for a given code block (either because none of the tags have highlighting hints specified or because highlighting is explicitly disabled for the code block or post), it is unaffected by this change, and HTML formatting will continue to be applied as before.

How can I fix broken posts?

The easiest way to fix a post that depended on this removed feature (which used HTML elements to format text inside code blocks) is to explicitly disable syntax highlighting for the specific code blocks or for the entire post using an HTML comment.

To disable highlighting for an individual code block, place the following comment before the <pre><code> elements as below:

<!-- language: lang-none -->
<pre><code>
...

To disable highlighting for an entire post (question or answer), place the following comment at the very beginning of the post:

<!-- language-all: lang-none -->

Do note that when the above comment is used on a question, it will only affect highlighting for that question and not for its answers, which will still be highlighted as per the question's tags unless manually overridden within the answer itself.

Why does it appear to render correctly in the post preview, but not in the actual post?

This happens because there's a 5-second window between when you make an edit in the post editor and when highlighting is performed in the post preview. If you wait 5 seconds after typing anything into the post preview, you'll notice that the highlighter kicks in and any formatting inside the code blocks will be stripped out in the preview.

This whole change is nonsense! Can't Stack Overflow work around it somehow?

Turns out, they can! The original announcement of this change from Highlight.js contains code for a plugin which allows for restoring the prior functionality of HTML formatting in code blocks, making it so it's no longer necessary to repair broken posts or worry about unexpected changes in the preview. Installing it would also fix the issue that syntax highlighting had to be disabled in revision histories and suggested edits.

That said, there are downsides to installing the plugin. This would require dev team effort to fix a very small percentage of posts, and can be worked around for the small number of affected posts.

There's currently a discussion going on as to whether the plugin should be installed; feel free to chime in.

Tangential question: how can I actually put HTML tags as text within HTML <pre><code> blocks?

Simply encode the < and > signs as HTML entities &lt; and &gt;.

1
  • Why is encoding required for >? Isn't it sufficient only doing it for <?
    – Peter Mortensen
    Commented May 7, 2022 at 0:32

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .