Hi,
I want to load a third-party JS library in just one or two pages (e.g.: index.ejs). It’s a code highlighter that will colorize <code> blocks in the page.
I’m not sure if I just put the <script> tag at the end of page(s) I want to use, or if there’s a proper way of importing scripts? (note I don’t need the script in every page)
https://highlightjs.org/usage/
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
I tried clicking the “Add Framework” button, but it doesn’t give me the option to input a third-party one. What’s the recommended approach here?
Also, wondering if I want to store the JS file locally instead of using a CDN - do I manually download the JS file into the project folder (e.g.: assets) and manually type the path to it in the <script> tag? Or is there a Wappler picker like you can select images for <img> tags?
Thanks!
Edit: I also need to load a custom stylesheet, I’m not sure where to put the <link> tag to load the CSS (aside from the master page?)
Edit 2: For now, I put the stylesheet in the master page, and I’m loading the script at the end of index.ejs - loading from a CDN. I’m still looking to know if there’s a better approach.
Edit 3: By the way, using this approach above, it seems Wappler is not loading the stylesheet from the master page (browser preview works fine though) while editing index.ejs. I have experienced the same issue with Bootswatch before, the way to solve this was to click the button “Add Framework” and add the Booswatch 5 theme there (on index.ejs), but I can’t do this because there’s no way to insert custom frameworks there.
Last updated: