Syntax highlighting doesn't work on macOS with Firefox 80

[camelid]

Most likely because of this issue with Firefox (also see https://rust-lang.zulipchat.com/#narrow/stream/122651-general/topic/Firefox.2080.2E0.20removes.20colors.20from.20the.20playground.20on.20MacOS.20.2E.2E.2E).

However, this issue does not occur with Rustdoc. According to @ehuss, this is because:

Yea, in rustdoc, it is intentionally using an older version of Source Code Pro to avoid this problem.

Perhaps mdBook can use the same trick as Rustdoc to avoid this issue?

[ehuss]

mdBook explicitly uses v1.1 of Source Code Pro to avoid this problem. Unfortunately I'm not able to reproduce your problem. Can you provide some more information?

• Does it happen to all mdbook books?
• Which version of Firefox are you using?
• Which version of macOS are you on?
• Do you have Source Code Pro installed locally?
• Does it happen on a fresh Firefox profile?

On the affected page, can you check that it is loading the expected font? Right click > Inspect element > Click the "Fonts" tab on the far right. Check that "Fonts used" is "Source Code Pro Medium", and then also expand the "All fonts on page" drop-down, and scroll down to "Source Code Pro" and verify the URL is as expected (something like https://doc.rust-lang.org/book/fonts/source-code-pro-v11-all-charsets-500.woff2).

[ehuss]

Another question: are there any error messages in the console, particularly from highlightjs?

[camelid]

I do not see any JS errors, only these:

Error	Location
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!	ch01-02-hello-world.html
Unknown property ‘text-size-adjust’. Declaration dropped.	general.css:14:22
Expected media feature name but found ‘-moz-touch-enabled’.	chrome.css:444:9

[camelid]

Those errors were for https://doc.rust-lang.org/book/ch01-02-hello-world.html. I've been having this issue with the Rust book, Rust by Example, and even the mdBook User Guide, so I thought that this was an issue with mdBook and not one of those. Also, as I mentioned before, I am not having this issue with the Rust docs (e.g., https://doc.rust-lang.org/std).

[camelid]

• Does it happen to all mdbook books? -> Several, at least
• Which version of Firefox are you using? -> 80.0
• Which version of macOS are you on? -> Catalina
• Do you have Source Code Pro installed locally? -> Yes

[camelid]

Also, the issue is resolved when I remove "Source Code Pro" from the CSS code rule in the Inspector. Inspector indeed shows "Source Code Pro Medium", however, it says "System", which I assume means that it is using my system version of the font. The @font-face src is:

src: local("Source Code Pro Medium"), local("SourceCodePro-Medium"), url("source-code-pro-v11-all-charsets-500.woff2") format("woff2");

[flapjackfritz]

So I had the same issue I think, but I noticed it started happening right after I updated my macbook to 10.15.6 (19G2021).

When I would change the font to anything invalid in the style editor, it would start syntax highlighting. Hmm.

So I checkout out my fonts in font book in OSX. Source Code Pro had two versions installed, and one was disabled. Very strange.

Removed the whole font family, now the syntax highlighting is back. Not really sure what that's about, but I think this is an OSX issue.

[camelid]

For me, this issue only started happening when I updated to Firefox 80 from 79; it was working fine for me before.

[camelid]

I may be mistaken, but I have a feeling that this line is the problem:

mdBook/src/theme/fonts/fonts.css

Lines 99 to 100 in f6768b8

	src: local('Source Code Pro Medium'), local('SourceCodePro-Medium'),
	url('source-code-pro-v11-all-charsets-500.woff2') format('woff2');

It seems to prefer local versions of Source Code Pro over the bundled version.

[camelid]

Putting the bundled font first in the list fixes the issue.

[flapjackfritz]

Why would the local font not work? It seems to make sense that if you have the font installed locally, it should choose to use that one first, otherwise it will basically never get used.

[camelid]

@flapjackfritz See rust-lang/rust#24355 and https://bugzilla.mozilla.org/show_bug.cgi?id=1520157 for more information about this issue. Basically, some versions of the font are buggy and in some situations don't handle colors appropriately.

For some reason, in Firefox 80, this issue emerged for more people on macOS. Everything worked fine for me before, but as soon as I updated from 79 to 80, syntax highlighting didn't work on sites like https://play.rust-lang.org (see here for information about that in particular). Also, all mdBooks (for example, https://doc.rust-lang.org/book) no longer have working syntax highlighting for me.

Some versions of Source Code Pro do not have this issue, though, which is why Rustdoc and mdBook bundle their own versions that don't have this issue. Rustdoc does not even try to use a local version, whereas mdBook prefers a local version. So I think it would be better to prefer the bundled version, as Rustdoc does, which is known to not have this issue, rather than relying on a user's local font, which may or may not have the issue.