yari: How do I style bold in code blocks?

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/skeleton_website

This bit used to be bold:

It is marked up as shown

<pre class="brush: bash notranslate">INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
<strong>    'catalog', </strong>
]</pre>

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 21 (14 by maintainers)

Most upvoted comments

Short answer is; you can’t at the moment.

The way it works is that we grab each <pre> tag, and get the text out of it. Kinda like you’d do with your mouse cursor were you select it all and copy and paste into notepad. All formatting is gone. Once we have the pure text, we send it into the Node version of PrismJS and outcomes a blob of <span class="token punctuation">;</span><span class="token ... etc. We then put that back into the <pre> as a trusted HTML blob. That’s why your HTML tags are lost.

Truthfully, the Node implementation of Prism is worse than that for client-side (browser DOM) rendering. It’s annoying. But a not-so-subtle advantage is that HTML usually renders much faster than JavaScript. And it compresses well too. Now, all you need to render the code snippets is HTML + CSS. But in the process we lost some of fancy features that the client-side Prism had such as specifying specific lines to have a bold background, for standing out more. We also lost the ability to toggle line-numbers on and off 😦

And another interesting war-story is that there’s a LOT of HTML like this in the content: https://github.com/mdn/content/blob/b20727e08889a26686299b3cca9517b0a516770d/files/en-us/learn/css/building_blocks/the_box_model/index.html#L155-L160 I suspect someone copied the rendered Prism HTML (perhaps from the DOM inspector or something). There’s even a flaw for spotting these and cleaning them up.

However, we could get smarter and for time-strategy reasons, we have to make a choice:

Come up with a white-list solution of allowing and respecting some HTML tags within the <pre> tags and preserve them after Node Prism has done its thing.
Figure out how to get the highlight-line Prism plugin to work in Node. Can we pay the maintainers of Prism or is possible with the right amount of elbow grease??
A more profound solution where you annotate a specific keyword and using the HTML you can technically get to it with something like span.token.keyword:nth-child(7){ font-weight: bold }.

Does Markdown support the ability to highlight specific lines? I think we can hack around the Node Prism highlight-line plugin shortcomings since we can loop over the lines in the rendered HTML, but that’s not something we have just yet.

peterbe on Dec 18, 2020

@wbamberg Yes, that was agreed. The discussion “concluded” that if relevant lines cannot be described in text without highlighting, then in most cases the root cause is probably that the blocks are too long and should be broken up.

I disagreed on the basis that there are cases where the ability to highlight a particular line of code saves you lots of words and makes things easier for readers. Whether there are enough to justify the exception to github flavoured markdown is arguable. Anyhow, yes, this can be closed.

hamishwillee on Nov 3, 2021

I think we have decided not to bring this with us into Markdown.

wbamberg on Nov 3, 2021

@schalkneethling Where is the best place to add line highlighting this as a requirement on our markdown solution? (i.e. I have given up on this being fixed in HTML any time soon, but I want it to be an option in markdown.

I would open an issue on Yari as the relevant plugin will need to be added to Prismjs. https://github.com/mdn/yari/issues/2198#issuecomment-766568687

schalkneethling on Jan 29, 2021