Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pygments styles missing .mb "Number, binary" #2156

Closed
oprypin opened this issue Dec 27, 2020 · 8 comments
Closed

Pygments styles missing .mb "Number, binary" #2156

oprypin opened this issue Dec 27, 2020 · 8 comments

Comments

@oprypin
Copy link
Contributor

@oprypin oprypin commented Dec 27, 2020

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.

.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

image

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
Copy link
Owner

@squidfunk squidfunk commented Dec 27, 2020

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

@oprypin
Copy link
Contributor Author

@oprypin oprypin commented Dec 27, 2020

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
Copy link
Contributor Author

@oprypin oprypin commented Dec 27, 2020

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
Copy link
Contributor

@facelessuser facelessuser commented Dec 27, 2020

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
Copy link
Contributor Author

@oprypin oprypin commented Dec 27, 2020

@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
Copy link
Contributor

@facelessuser facelessuser commented Dec 27, 2020

@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
Copy link
Owner

@squidfunk squidfunk commented Dec 30, 2020

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
Copy link
Owner

@squidfunk squidfunk commented Jan 9, 2021

Released as part of 6.2.4.

@squidfunk squidfunk closed this Jan 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants