Firefox -- Code Syntax Highlighting Breaks on Refresh

Help
1

When you create or open a post in Firefox for the first time, the syntax highlighting appears to work as you’d expect. However, if you refresh the page using the refresh button, F5, or some other method, the syntax highlighting breaks until you leave the page and go back.

For example, if I’m currently viewing a post which contains code and the syntax highlight breaks, I can make it work again by visiting the blog owner’s home page, and then revisit the post from their home page.

I’m not sure if I’m doing something wrong, or if this is a problem with the way write.as works with Firefox. This issue does not seem to appear in Google Chrome.

I currently have no custom themes loaded. I do have Firefox addons, but I loaded up a fresh Firefox profile without addons and the issue still occurred.

When you load a page with syntax highlighting for the first time, here’s the console output:

Loading failed for the <script> with source “https://analytics.write.as/piwik.js”. some-code:1:1
GET https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/c.min.js
[HTTP/2 404 Not Found 120ms]

The resource from “https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/c.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff). some-code
Loading failed for the <script> with source “https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/c.min.js”. some-code:1:1

When you refresh the page using the refresh button, here’s what you get:

Loading failed for the <script> with source “https://analytics.write.as/piwik.js”. some-code:1:1
GET https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/c.min.js
[HTTP/2 404 Not Found 25ms]

The resource from “https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/c.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff). some-code
Loading failed for the <script> with source “https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/c.min.js”. some-code:1:1
Uncaught ReferenceError: hljs is not defined
    highlight https://write.as/nyhilum/some-code:100
    <anonymous> https://write.as/nyhilum/some-code:141
    loadLanguages https://write.as/nyhilum/some-code:116
    loadLanguages https://write.as/nyhilum/some-code:106
    <anonymous> https://write.as/nyhilum/some-code:141
    EventListener.handleEvent* https://write.as/nyhilum/some-code:87
some-code:100:9

I didn’t see any posts mentioning this issue, but I could’ve overlooked something, so feel free to point me in that direction if it exists.

2

Hey, thanks for bringing this up! It looks like we’re missing some code specifically for C syntax highlighting. We’ve just fixed this on our end, and will deploy that change a little later today. Will update you here once that’s live.

3

Awesome. Appreciate the fast response.

I did attempt another language like JS, and it appears the same thing occurs with JS.

Loading failed for the <script> with source “https://analytics.write.as/piwik.js”. some-code:1:1
GEThttps://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/js.min.js
[HTTP/2 404 Not Found 26ms]

The resource from “https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/js.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff). some-code
Loading failed for the <script> with source “https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/js.min.js”. some-code:1:1
Uncaught ReferenceError: hljs is not defined
    highlight https://write.as/nyhilum/some-code:271
    <anonymous> https://write.as/nyhilum/some-code:312
    loadLanguages https://write.as/nyhilum/some-code:287
    loadLanguages https://write.as/nyhilum/some-code:277
    <anonymous> https://write.as/nyhilum/some-code:312
    EventListener.handleEvent* https://write.as/nyhilum/some-code:258
some-code:271:9

I removed the original C code from my post and replaced it with JS just to make sure that the C syntax breakage wasn’t interfering with the JS syntax, and the same thing still happens.

4

Yeah, right now it’s failing anywhere we rely on a language alias to load the correct syntax highlighting files. That would be any language that’s a key in this map:

var aliasmap = {
  "elisp"      : "lisp",
  "emacs-lisp" : "lisp",
  "c"          : "cpp",
  "cc"         : "cpp",
  "h"          : "cpp",
  "c++"        : "cpp",
  "h++"        : "cpp",
  "hpp"        : "cpp",
  "hh"         : "cpp",
  "hxx"        : "cpp",
  "cxx"        : "cpp",
  "sh"         : "bash",
  "js"         : "javascript",
  "jsx"        : "javascript",
  "html"       : "xml"
};
5

Ah, gotcha. Yeah if I use the value rather than the key the formatting works as expected. That is, using javascript vs. js allows the syntax highlighting to work.

Thanks for the clarification.

2 Likes
6

Okay, this fix is live now! Please let me know if you still notice any other issues.

7

Thanks!

I went back to my post and changed javascript back to js in firefox and everything seems to work after pushing the refresh button as expected.

1 Like