I was wondering about integrating JavaScript into my Software Design blog and Markdown clearly didn’t support HTML at this time… at least that was what I thought.
There are several ways to include JavaScript on demand using Jekyll.
- RAW HTML which looked messy but it does work
- Modify the header code generated by Jekyll to import JavaScript into the Post
- Modify the header code generated by Jekyll to use a script element
I rejected option 1, though I may use it one day, because it is just messy. Everything must be tightly aligned on the left of the text which is okay for something short but terrible for longer scripts.
I rejected option 2 because I seem to prefer having my javascript loaded rather than having it embedded into my page. In the end it isn’t much different than option 3.
I took the option of having Jekyll generate a separate script element to import multiple scripts from local or remote. I just add a property at the top of the post and my script is loaded and ready to run.
The js-list and css-list properties are now part of any page that needs to use a different JavaScript or CSS file.
---
layout: post
title: "Integrating JavaScript In Jekyll"
date: 2020-05-10 16:24:25 -0700
tags: javascript
js-list:
- "/assets/js/clock1.js"
css-list:
- "/assets/css/clock1.css"
---
The jekyll script I added to the custom header portion looks like this…
<script src="/assets/js/clock1.js"></script>
<link href="/assets/css/clock1.css" rel="stylesheet">