How do I style bold in code blocks?
See original GitHub issuehttps://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>
Issue Analytics
- State:
- Created 3 years ago
- Comments:21 (14 by maintainers)
Top Results From Across the Web
How to combine bold and "code sample" in Markdown?
The basic idea is to apply bold/italic formatting to backtick-enclosed string (instead of applying within the backticks), then put the code spans side...
Read more >How can I make a bold font within a code section? [duplicate]
Let's say I'd like to put in a block of a code and I want to stress some crucial places of this code...
Read more >Styling (bold, font color, etc.) in code block. - Evernote Forum
I would like the ability to apply styling (bold, font color, etc.) in a code block. Like you could in Legacy.
Read more >Marking code blocks fragments bold / italic - Spec
Marking code blocks fragments bold / italic ... The font can be selected by any old style style sheet language, from DSSSL (yay!)...
Read more >Possible to make bold text in fenced code blocks? - HUGO
I would like to apply a different style, such as bold, to the portions of the terminal session that users enter. In the...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub 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:
<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.