Hello! I'm using Prism.JS (https://prismjs.com/) to generate syntax highlighting for XML markup in the docs I'm writing. Locally, this all works well and looks great, but when the files are uploaded to the server it stops working. You can see the live example here:
It should look like this:
Note that refreshing the page briefly shows the code with highlighting then it breaks...
Checking the console output on the browser, I see no errors and the page should load fine, so my question is WHY is the online version not working and what can I do to resolve it? I suspect it's got something to do with the RoboHelp async loading of JS files required to build the ToC etc... but I have no idea how to resolve the issue.
Note I've tested on Chrome and Edge and they both show the same issue, but Firefox seems to load everything fine.
Theorising here as I haven't tried it.
Could you add "defer" to the script tag to force the prism script to run last? (at least I think that's what it means, not being a programmer.)
Hello Amebr and thanks for the reply! I have tried using "defer" (which RoboHelp HATES as it thinks it should be assigned a value, so I had to modify the files AFTER building to test), but it doesn't help as the scripts that are causing the page refresh are being loaded with the "async" flag so they're still being run after the prism.js loads (async kinda renders defer as useless...). I've also tried various other JS methods to check when the entire page has loaded, but none of them detect async loading and only work on full DOM elements being loaded, which happens before the async stuff finishes... 😞
I think I might have to contact support on this one...
I know sometimes just adding "async" to the tag causes editors to have fits, and making it async="async" calms them down. It could be similar with "defer".
Another trick is to add the script at the bottom of the page rather than in the head. Have you tried that?
Hello! Yes, I've tried moving the Prism script call to other parts of the HTML and it doesn't change anything. And yes, the RH editor doesn't mind if I do defer="defer" at all, it's just having defer on it's own it hates! Also, sadly, the HTML that is calling the RH scripts with async is autogenerated and I can't edit it in any way it seems or I'd test removing the async call from them...
Thanks Amebr! I think that is going to have be my next course of action here... 😞
Do post back an answer when you get one. 🙂
Not sure, if it is related, but when loading your example, Chrome's console gives me a couple of 404s:
DevTools failed to load SourceMap: Could not load content for https://docs.flightsimulator.com/html/template/Orange/orange.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE DevTools failed to load SourceMap: Could not load content for https://docs.flightsimulator.com/html/template/scripts/topicpage.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE DevTools failed to load SourceMap: Could not load content for https://docs.flightsimulator.com/html/template/Orange/orange.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
That said, I have created a small sample with RoboHelp 2020 and it works fine with PrismJS 1.23.0:
By the way, I do see the short flashing of the highlighted code in your example as well. So, basically it does work, but then "something" is coming in its way. Would need some more debugging …
Hello Stefan! Thanks for the reply! Yes, it works briefly and then stops, and with the help of the chrome console I've determined the issue is related to async scripts that RH calls... they seem to be reloading (or at least regenerating) the page, but not reloading Prism. As for the warnings, I'm pretty sure they are not related as they've been present from day one of using the orange base skin, and the fact that running the HTML locally still shows those warnings but has the syntax highlighting working makes me thnk they are independent issues. I've also found another page with the same issue too but using another JS script, if that's any help:
That page uses MathJax to generate laTeX maths equations to the page and (again) works locally but when on the server, the maths isn't generated. If you refresh the page it shows briefly but is then "reset", exactly the same as the syntax highlighting. So, yeah, I'm 99% certain that it's the RH async scripts that are causing the issue... I'll contact support and see if they can shed any light on it.
Remove the script src from your topic.
Go into your project folder to \publish\skins\Orange\ and open the file topicpage.ejs in a text editor. At the end of this file, right before the body tag, add the script src to your prism.js:
<script src="../../assets/css/Prism/prism.js"></script> </body>
Save and close the file.
Open your output folder and browse to /assets/css/Prism/
Paste the file prism.js file into this folder.
Upload everything to your server.
This should do the trick. The problem seems to be the position of the js file / when it is loaded / overwritten (as you already noticed).
By the way, I could also get it running by just adding the prism.js in the head of the topic instead of the body:
Oooooooooh... Okay, cool, I'll give that a go this afternoon and let you know how I get on! Thanks a lot!
Hello! Sorry, I forgot to get back to you... Yes, I tried both your suggestions (moving the <script> to the header and injecting it into the .ejs file), but I'm afraid neither were successful. I've been in touch support and am currently in contact with them to see if they can offer some insight into the issue. Thanks again for the suggestions, and when support gives me a solution or a workaround I'll be sure to post again.
Just to update this topic... The issue has been identified as a bug by the Adobe Support team and is scheduled to be fixed in RH 2020 Update 5, which - unfortunately - they don't have a timeline for. Thank you everyone for the replies and attempts to help me resolve this!
Strange, because adding it to the topicpage.ejs solved it for me.
Hello! The latest update (2020.5) resolved the issue for me and everything is working as it should. If that's the version you're on and you're still having the issue, then I would suggest reporting it to Adobe...
Yes, I am using the latest version of the product, but unfortunately, this does not solve the problem. Moreover, I tried to connect the prismjs and face the same problem.
Here is the support answer:
since the script works fine locally, it suggets the issue is not with Robohelp, also checking and assessing scripts is out of our scope of support.
@Stefan-Gentz One more unresolved issue. Thanks a lot for your support.
Hello Stefan! I did add a relative path to the css and JS files into the EJS file and tested myself and it didn't work. It had the same issue - it would work momentarily on page refresh then break as the rest of the async JS was called. Can I ask exactly what you did and how you tested? I'm wondering if there's a difference in out methodology here, and if I can replicate it and work around the issue...