Fixed so PrismJS and Mermaid can be used together #318
Conversation
default/index.yaml
Outdated
| window.isHotReload = window.isHotReload !== undefined; | ||
| if (window.isHotReload) { | ||
| highlightAllExceptMermaid(); | ||
| } else { | ||
| window.addEventListener('load', function() { | ||
| highlightAllExceptMermaid(); | ||
| }); | ||
| } |
There was a problem hiding this comment.
Could you add a comment explaining what window.isHotReload does?
There was a problem hiding this comment.
I'm now less sure of what this is achieving When I tried bin/run locally, the old problem (of syntax highlighting not being applied in some cases when switching routes, in live server) remains.
There was a problem hiding this comment.
OK I've finally found the cause here. The morphdom from Ema is removing the <script async src=".../mermaid.js"> tags.
When the highlightElement is called, the autoloader plugin adds an async script tag to the <body> and sets a callback on its onload.
But here a race condition comes in. I'm only guessing here, but it seems like either:
- (happy path) the
<script>is loaded andonloadis called before it's removed from<body>, - or the
<script>is removed before the browser even starts loading the script resulting in no outcomes (no errors logs, and no syntax highlighting), - or the browser starts fetching the JS file and at the point the fetch completes the
<script>tag has already been removed resulting in code error as the autoloader plugin tries to remove the<script>tag itself when it no longer exists.
I've tried to combat this, and the code grew. Not my proudest work at all. What do you think?
It's a little glitchy when first opening a page, but it at least resolves into a syntax highlighted page eventually. And there's no glitchyness after a hot reload or after just loading the statically generated site.
There was a problem hiding this comment.
Do you think this whole debounce logic is worth upstreaming to Ema (its multisite branch)? cf. srid/ema#69
ie., do we envision doing this for anything other than PrismJS?
There was a problem hiding this comment.
In particular, perhaps we can abstract this out in a function (in Ema) and call it in one line as:
Ema.invoke(1000, highlightAllExceptMermaid);There was a problem hiding this comment.
Adding a debounce function to upstream Ema library just feels like adding it for the sake of it. I'd vote for no as it's quite the simple function.
Anyway that decision is not written in stone. Could extract it first when a need for it appears in multiple places.
Besides, this code is actually me working around Ema's behavior, but perhaps that could be modified instead. Like when using emanote run then on a fresh page load it will:
- run scripts (on regular page load)
- run scripts when websocket connected
- load page again (via websockets) and morph DOM
- run script after DOM morph
I see you have comments in the JavaScript in the sorts of "We have to reload <script>'s here on initial page load here, so as to make Twind continue to function", and I don't know the full depth of this, but I think the best option would be if scripts only ran once and morphing the DOM only happens on page changes and not on initial load.
|
@jilleJr Could you move the EDIT: you can make it on top of this PR's branch to avoid conflicts. |
Ehm sure. The debounce logic is a requirement to get this working during |
Revert #318; and, use `highlight.js` as default in docs
Co-authored-by: Sridhar Ratnakumar <srid@srid.ca>
Revert srid#318; and, use `highlight.js` as default in docs
Fixes PrismJS script to work with Mermaid.
Had to use manual syntax highlighting, and in there filter out the mermaid tags. Also had to do some "is hot-reload" checking to make it more reliable when using
emanote runI took inspiration from PrismJS/prism#2068 (comment), which the
filter-highlight-allPrismJS plugin was created to simplify anyway.Also changed some docs:
<script var="js.prism" />for Syntax HighlightingRelated to discussion #281
Sidenote
I tried using https://prismjs.com/plugins/filter-highlight-all/, which worked fine until the hot-reload kicked in.
My theory is that while running
emanote runand editing a file that the hot-reload would recreate the<head>element and thereby recreate the PrismJS script tag, making it run again.In the happy path when PrismJS is loaded in first time, it waits until the document has finished loading, and also letting PrismJS plugins to load as well.
But when it ran again after a hot-reload then the document was already ready and it started syntax highlighting before the
filter-highlighting-allplugin could register its exceptions, so it still would apply syntax highlighting on those poor<code class="mermaid">tags.