Bold Code And Normal Code Look The Same

[Mehran-Baghi]

Description

The result of these markdown lines are the same:

**`Bold Code`**
`Normal Code`

Expected behavior

Fresh MkDocs Installation:

Actual behavior

Material for MkDocs:

Steps to reproduce the bug

Use the markdown in the description.

Package versions

• Python: Python 2.7.13
• MkDocs: mkdocs, version 0.16.3
• Material: Version: 1.10.0

Project configuration

Not Relevant

site_name: My Docs
theme: 'material'

System information

• OS: [Debian GNU/Linux]
• Browser: [Not Relevant]

[facelessuser]

Project configuration, specifically extensions, may or may not be relevant. I would post them anyways, at the very least the extension setup, and extra if you adding any custom CSS.

Most likely though, this is how styling is applied. I assume a base style is applied to code blocks and then the provided Pygment's style augments the base. I would provide the config regardless so it can be investigated further in case you are configuring things in an unexpected way.

I'm not sure I would consider wrapping the code block in bold and not getting bold a bug. This may just be due to an assumption that doesn't hold true with this theme. Just because one theme handles things one way, does not mean all themes will handle things the same.

[Mehran-Baghi]

Thank you @facelessuser for your time.
I have provided my configuration in issue report:

site_name: My Docs
theme: 'material'

That is all of it.
Did you have any problems with reproducing?

I'm not sure I would consider wrapping the code block in bold and not getting bold a bug. This may just be due to an assumption that doesn't hold true with this theme.

It depends on whether that assumption was a conscious choice or not. If the theme author consciously decided to make bold and normal code blocks look the same, I would be just disagree.
Otherwise I would suggest that bold code blocks be rendered as bold code blocks.

[Mehran-Baghi]

Bold code blocks are actually very useful and necessary. For example I'm currently working on converting a book into markdown. There are lots of computer science books that are using typographical conventions. Please take a look at this pdf, page 3, Conventions Used in This Book.

[facelessuser]

That's fine, but all that is happening is that the code block is then wrapped in strong tag. Normally that will make its content bold unless a style is then applied to the code block directly that overrides it. See below. This is inspecting a code block under the Material theme.

This isn't unheard of. The idea of giving each element a known understood base, in this case, code, pre, and kbd have their text styling normalized to a consistent state with a font weight of 400. After that, a language style rule can then apply bold italic or color as dictated by the Pygment's color scheme provided.

So Material seems to intentionally apply a common base font weight to code blocks despite what their parent element may be styled as.

I personally feel the code block being code is emphasis enough. I'm not sure I see the benefit of emphasizing the whole code block further with bold, but that is most likely just me.

I believe this could be forced by appending custom CSS via the mkdocs extra_css option as I believe those appended CSS styling rules would come after the default Material styling.

I'm going to guess that @squidfunk will not remove the default font-weight, but only he can answer that. So I would suggest pursuing some custom CSS overrides when a code block is wrapped with strong.

[squidfunk]

Hey guys, I intentionally defined the code block the same weight as normal text and only load the 400 weight via Google fonts. We can also append weight 700 to the loading directive, didn't think someone wants to use it.

[Mehran-Baghi]

Thank you both.
@squidfunk that makes sense. I guess loading another weight through the google fonts increases the page load time.

[squidfunk]

That was my initial concern, but we can add it, as it should be cached anyways.

[Mehran-Baghi]

I don't think it worth it. I'll try to find some workaround for emphasizing the code blocks.

[Mehran-Baghi]

I set the

extra:
  font: false

option and still got the problem. shouldn't turning the google fonts off fix the problem?

[squidfunk]

Hmm, theoretically yes. I have to check when I find the time.

[squidfunk]

Fixed in 1.10.1, but there's currently some problem on Travis with the release that I have to go into before I can release it.

[Mehran-Baghi]

I'm not sure whether this is relevant or not but I had some issues with yarn start and yarn run build. Also I wasn't able to commit because of a githook that executes the yarn run flow. I have investigated the problem and I found out that yarn bin returns nothing if get executed inside of a script that yarn run executes. So my workaround was to execute the scripts manually and also editing the githook

[squidfunk]

No, it was some problem with urllib, a dependency of twine which is used to upload the release to PyPI. It is fixed now and released.

[robozb]

the problem still exists

[squidfunk]

My testing shows that it doesn't. It may depend on the font you choose, though, as not all code fonts come with bold weights. For Roboto Mono, bold works.

[robozb]

Yes, You are right! It was my fault, It depend on the font! Thanks