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)
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:
<pre>
tags and preserve them after Node Prism has done its thing.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??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.
@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.
I think we have decided not to bring this with us into 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