Using JavaScript in HTML template?

Hi,
I’d like to highlight code blocks with prism in the preview. Therefore, I included the two relevant lines

<link href="file:///Users/ck/Documents/Prism/prism.css" rel="stylesheet"/>
<script src="file:///Users/ck/Documents/Prism/prism.js"></script>

at the end of the HTML template’s head section. The preview kind of works, but the code blocks are not highlighted. However, if I export the preview as HTML and then view it in a browser, the blocks are hightlighted.
So the Drafts previewing engine is probably not executing JavaScript code in the template?

What happens if you host those files so they are accessible over http(s)? Does the preview work then?

I’m just wondering if it might be a sandboxing issue and something isn’t actually being pulled in?

The preview certainly supports JavaScript execution. Or at least I’ve had it work i the past. Add a simple alert in the code to check it.

Yes. Thanks for pointing that out. The next question would be if one could put the files in an iCloud location so that it works too?

Maybe try putting them in your Drafts iCloud folder?

Alternatively, you could try including the content of those files into your HTML preview as though you cut and paste the entire file content into script and style blocks to make the HTML self contained.

That does not seem to work. I created a folder Prism in the Drafts folder and put prism.css/prism.js there. If I use Prism/script.js or /Prism/script.js (i.e. absolute or relative path) does not make a difference, the highlighting doesn’t work in either case.
However, it might be a nice feature to have that, since not everybody has a webserver where they can place files.
I know that I could copy/paste the files into the template itself, but since prism is not exactly small, I don’t want to do that. Inline CSS/JavaScript is a bit clumsy, I find.

The web previews doe not currently have a local context, and cannot load arbitrary local files (Sandboxing limitations). A way to do this is something that’s been on my list, and I’ve partially implemented, but not finished. This was a good reminder to finish that work up for the next update. So keep an eye on release notes for details on how that will work.

That said, web previews can load from remote locations, or just embed the content. So if those libraries are on a CDN somewhere, or you can drop them on a web server you control, you can use them just fine as long as you are referencing them via http(s) URLs.

you could try to use the gist service on github for testing. It is simple and free…

1 Like

Keep an eye on release notes he says. Checks release notes on new beta released a couple of hours later… :open_mouth:

1 Like

Life of a beta tester … nice

1 Like