Pygments styles missing .mb "Number, binary"

[oprypin]

• I've read the contribution guidelines and agree with them

I've found a bug and checked that ...

• ... the problem doesn't occur with the default MkDocs template
• ... the problem is not in any of my customizations (CSS, JS, template)
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

Pygments syntax highlighting are missing the style .mb - number, binary.

mkdocs-material/src/assets/stylesheets/main/extensions/pymdownx/_highlight.scss

Lines 59 to 66 in b194b21

	.m, // Number
	.mf, // Number, float
	.mh, // Number, hex
	.mi, // Number, integer
	.il, // Number, integer long
	.mo { // Number, octal
	color: var(--md-code-hl-number-color);
	}

Expected behavior

Code that was determined by Pygments to be class="mb" should be highlighted just like all other numbers.

Actual behavior

https://oprypin.github.io/crystal-book/syntax_and_semantics/literals/integers.html

Steps to reproduce the bug

```crystal
0b1101
```

Package versions

• Python: 3.9.1
• MkDocs: 3c9358bb6afedb559850a640961a691d698866ba
• Material: 6.2.3

Project configuration

theme: material
markdown_extensions:
  - pymdownx.highlight
  - pymdownx.superfences

[squidfunk]

Thanks for reporting - we should definitely add the missing class. Care to submit a PR?

[oprypin]

Sorry, wasn't planning to submit a PR.
I think it's worth checking all classes if they're outdated, I thought maybe you have some methodical approach to it.

[oprypin]

if a contains pygmentize -f html -S colorful -a .syntax

pre { line-height: 125%; }
td.linenos pre { color: #000000; background-color: #f0f0f0; padding-left: 5px; padding-right: 5px; }
span.linenos { color: #000000; background-color: #f0f0f0; padding-left: 5px; padding-right: 5px; }
td.linenos pre.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.syntax .hll { background-color: #ffffcc }
.syntax { background: #ffffff; }
.syntax .c { color: #888888 } /* Comment */
.syntax .err { color: #FF0000; background-color: #FFAAAA } /* Error */
.syntax .k { color: #008800; font-weight: bold } /* Keyword */
.syntax .o { color: #333333 } /* Operator */
.syntax .ch { color: #888888 } /* Comment.Hashbang */
.syntax .cm { color: #888888 } /* Comment.Multiline */
.syntax .cp { color: #557799 } /* Comment.Preproc */
.syntax .cpf { color: #888888 } /* Comment.PreprocFile */
.syntax .c1 { color: #888888 } /* Comment.Single */
.syntax .cs { color: #cc0000; font-weight: bold } /* Comment.Special */
.syntax .gd { color: #A00000 } /* Generic.Deleted */
.syntax .ge { font-style: italic } /* Generic.Emph */
.syntax .gr { color: #FF0000 } /* Generic.Error */
.syntax .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.syntax .gi { color: #00A000 } /* Generic.Inserted */
.syntax .go { color: #888888 } /* Generic.Output */
.syntax .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
.syntax .gs { font-weight: bold } /* Generic.Strong */
.syntax .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.syntax .gt { color: #0044DD } /* Generic.Traceback */
.syntax .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.syntax .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.syntax .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.syntax .kp { color: #003388; font-weight: bold } /* Keyword.Pseudo */
.syntax .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.syntax .kt { color: #333399; font-weight: bold } /* Keyword.Type */
.syntax .m { color: #6600EE; font-weight: bold } /* Literal.Number */
.syntax .s { background-color: #fff0f0 } /* Literal.String */
.syntax .na { color: #0000CC } /* Name.Attribute */
.syntax .nb { color: #007020 } /* Name.Builtin */
.syntax .nc { color: #BB0066; font-weight: bold } /* Name.Class */
.syntax .no { color: #003366; font-weight: bold } /* Name.Constant */
.syntax .nd { color: #555555; font-weight: bold } /* Name.Decorator */
.syntax .ni { color: #880000; font-weight: bold } /* Name.Entity */
.syntax .ne { color: #FF0000; font-weight: bold } /* Name.Exception */
.syntax .nf { color: #0066BB; font-weight: bold } /* Name.Function */
.syntax .nl { color: #997700; font-weight: bold } /* Name.Label */
.syntax .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
.syntax .nt { color: #007700 } /* Name.Tag */
.syntax .nv { color: #996633 } /* Name.Variable */
.syntax .ow { color: #000000; font-weight: bold } /* Operator.Word */
.syntax .w { color: #bbbbbb } /* Text.Whitespace */
.syntax .mb { color: #6600EE; font-weight: bold } /* Literal.Number.Bin */
.syntax .mf { color: #6600EE; font-weight: bold } /* Literal.Number.Float */
.syntax .mh { color: #005588; font-weight: bold } /* Literal.Number.Hex */
.syntax .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.syntax .mo { color: #4400EE; font-weight: bold } /* Literal.Number.Oct */
.syntax .sa { background-color: #fff0f0 } /* Literal.String.Affix */
.syntax .sb { background-color: #fff0f0 } /* Literal.String.Backtick */
.syntax .sc { color: #0044DD } /* Literal.String.Char */
.syntax .dl { background-color: #fff0f0 } /* Literal.String.Delimiter */
.syntax .sd { color: #DD4422 } /* Literal.String.Doc */
.syntax .s2 { background-color: #fff0f0 } /* Literal.String.Double */
.syntax .se { color: #666666; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */
.syntax .sh { background-color: #fff0f0 } /* Literal.String.Heredoc */
.syntax .si { background-color: #eeeeee } /* Literal.String.Interpol */
.syntax .sx { color: #DD2200; background-color: #fff0f0 } /* Literal.String.Other */
.syntax .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */
.syntax .s1 { background-color: #fff0f0 } /* Literal.String.Single */
.syntax .ss { color: #AA6600 } /* Literal.String.Symbol */
.syntax .bp { color: #007020 } /* Name.Builtin.Pseudo */
.syntax .fm { color: #0066BB; font-weight: bold } /* Name.Function.Magic */
.syntax .vc { color: #336699 } /* Name.Variable.Class */
.syntax .vg { color: #dd7700; font-weight: bold } /* Name.Variable.Global */
.syntax .vi { color: #3333BB } /* Name.Variable.Instance */
.syntax .vm { color: #996633 } /* Name.Variable.Magic */
.syntax .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */

and b contains https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/pymdownx/_highlight.scss#L30-L151

Then

>>> import re
>>> sa = set(re.findall(r'(?<=\.syntax )\.\w+', a, re.MULTILINE))
>>> sb = set(re.findall(r'(?<=^  )\.\w+', b, re.MULTILINE))
>>> sa - sb
{'.err', '.vm', '.mb', '.sa', '.fm', '.dl', '.w'}
>>> sb - sa
{'.n', '.p', '.l'}

[facelessuser]

I would also be careful and choose carefully what you color. Pygments isn't always the best highlighter. Sometimes coloring certain classes in certain languages is awful in other languages. You kind of need to balance it. More of an FYI.

Also, not everyone wants rainbow code (I'm speaking generally, not offering my personal opinion either way). IIRC, Material was aiming to highlight important things, but not necessarily everything for a technicolor code highlighting experience. Some highlighting classes are arguably more important than others.

[oprypin]

@facelessuser Your comment seems distant from the issue at hand. In fact, fixing this issue would reduce the variability of colors, not increase it.

[facelessuser]

@oprypin, I am speaking about other classes that are maybe not highlighted. I'm also speaking from experience playing with highlighting classes and trying to highlight languages better than Material does with Pygments. I'm not specifically speaking about .mb. Just mentioning, that just because a class isn't colored, doesn't mean it will create a better experience if colored, especially if you are using a limited palette.

Some languages use certain classes improperly/differently, and you can end up with certain languages being heavily highlighted in one color too much etc.

I'm not trying to dissuade .mb from being highlighted, just mentioning that if there are multiple classes not getting highlighted, and you wish to cause them all to be highlighted, double check a lot of languages because your favorite language may look fine, but you may make others look worse.

[squidfunk]

Added in 82b0ea8. Let's see if it breaks highlighting in some other languages, which would mean that we would need to revert that case. As @facelessuser said, Pygments is not super-consistent, i.e. sometimes classes are incorrectly used. Material for MkDocs tries to provide sane defaults, but depending on your target language some additions may be necessary. However, it's super easy to adjust colors and even provide your own syntax theme.

[squidfunk]

Released as part of 6.2.4.