This worked for me:

1. Right click inside html file that is being edited.
2. Select "Format Document With...".
3. Selected "Configure Default Formatter ...".
4. Changed from "Prettier - Code formatter" to "HTML Language Features".

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 < and >.