feat(reference-layout): render code blocks in doc titles

[LeoMcA]

Renders the titleHTML field rari is now providing, and styles them.

Screenshots

On http://localhost:3000/en-US/docs/Web/JavaScript/Reference/Errors/Cant_use_nullish_coalescing_unparenthesized:

And with mdn/content#43486 checked out:

On http://localhost:3000/en-US/docs/Web/HTML/Reference/Elements/input/number:

And on http://localhost:3000/en-US/docs/Web/HTML/Reference/Global_attributes/is:

Related issues and pull requests

• add title_html field to doc and render code blocks rari#544
• Testing backticks in front matter title on two HTML pages content#43486
• [PROJECT] HTML & CSS reference page title standardization mdn#811

[github-actions]

7f4f353 was deployed to: https://fred-pr1398.review.mdn.allizom.net/

[pepelsbey]

Apparently, there’s one case with

title: RegExp.leftContext ($`)

But it doesn’t cause any troubles:

<h1>RegExp.leftContext ($`)</h1>

[pepelsbey]

FYI

The plan with backticks/code in page titles was to highlight only the first instance to focus the reader’s attention on the main subject. It doesn’t play nicely with this title:

title: "SyntaxError: cannot use `??` unparenthesized within `||` and `&&` expressions"

But we’re only focusing on highlighting code on HTML/CSS pages and ignoring the rest now. To make it less complicated, we will remove backticks from titles in other sections.

[pepelsbey]

Pushed updates to styles: