PrismJS does not load through Cloudflare

[tmsteen]

This is most likely an issue on my end but I was curious if you had seen it anywhere else.

With Cloudflare active, none of the code syntax highlighting works. There is the grey block of code, but no line numbers or highlighting. If I play Cloudflare in Development (pass through) mode, then I get the highlighting back. My local NGINX logs show the 404s for the PrismJS files.

Any ideas?

Ghost: 1.20.3
Mapache: 2.1.3

[MaluNoPeleke]

I currently have a only a smartphone available (on vacation) so I cannot investigate any further but at least your mentioned setup works for me (Cloudflare activated): https://www.peleke.de/ghost-1-0-aktualisierung-bei-uberspace/

[tmsteen]

Interesting, I have caching set to standard and AutoMinify for JS, CSS, and HTML. Those are the only settings in CF that I would expect to change behavior but they also seem like normal settings,

[tmsteen]

So today I checked on mobile and it works there. Still does not seem to work in a browser.

[godofredoninja]

Hi @tmsteen

to help you better.

can you share the url of your page

[tmsteen]

On this page it does NOT seem to work: https://ratil.life/sans-holiday-hack-2017/
On this page it was just working and then when I refreshed it was not working: https://ratil.life/hack-the-box-marai/

Seems like it may work whenever Cloudflare does not have the cached version.

[godofredoninja]

Hi @tmsteen

I think the problem is because you are not adding the code syntax

— please read the documentation

— here you have all the languages that supports prism

[tmsteen]

I do not think it is the syntax I am using as it all displays correctly if I bypass Cloudflare.

Here is one of the examples that gets a 404: /hack-the-box-marai/components/prism-bash.min.js/: 2 Time(s)

[tmsteen]

I think I figured it out. Cloudflare has a Beta RocketLoader feature that appears to break some JS. Might be cool to add support for this.

Here are the details from Cloudflare if you are interested.

What does Rocket Loader do?
Rocket Loader can improve load times for pages that include JavaScript. Your search engine ranking may be improved by reducing page load time.

Rocket Loader improves page load times by:

Decreasing the number of network requests by bundling JavaScript files, even third party resources, to avoid slowing down page rendering
Asynchronously loading scripts, including third party scripts, so that they do not block the content of your page from loading immediately
Caching scripts locally (using LocalStorage, available on most browsers and smart phones) so they aren’t refetched unless necessary
What Rocket Loader setting should I use?
Automatic: Optimize all JavaScript resources on your website. No configuration required
Manual: Selectively enable Rocket Loader for individual scripts. Add the following attribute to the script tag for each script where you want to enable Rocket Loader:
data-cfasync="true"
Note: The ‘data-cfasync‘ attribute must be added to the HTML script tag before the ‘src‘ attribute (adding the attribute via JavaScript is not sufficient).

Rocket Loader is considered Beta because it’s an experimental feature that modifies the loading and execution flow of Javascript. While efforts are taken to increase Rocket Loader’s compatibility with third-party Javascripts, not all scripts work with this feature. Issues with Rocket Loader affect only a small percentage of customers.