/ JavaScript

HTML, CSS, and JavaScript demos in Ghost posts

If you're interested in putting small HTML, CSS, and JavaScript tech demos in your Ghost posts, it's pretty simple to do so. I'll forego pondering out loud about whether or not this is a good idea (it probably isn't), and dig into how it works (exactly like any web page works).

I baked a small Web Audio API experiment directly into a Ghost post, and it was quite straightforward. In that example, I provide a button, an image, and a script that is triggered by the button to interact with the image.

I'll do a super simple example here, but the tl;dr is that you just put all the HTML, CSS, and JavaScript in the post (and boldly ignore that gross feeling this gives you).

Try it

Here's some example code:

<button id="manipulate-string-button">Add emphasis</button>
<p id="target-string">YES</p>

<script>
  const manipulateStringButton = document.querySelector("#manipulate-string-button");
  const targetString = document.querySelector("#target-string");

  manipulateStringButton.addEventListener("click", manipulateString)

  function manipulateString() {
    targetString.textContent += "S";
  }
</script>  

And here's that code pasted directly into the Ghost post:

YES

Better alternatives

This is passable for small, one-off experiments where neither showing the code nor providing a particular user experience is crucial. I might do it when noodling around with some idea on this blog from time to time, but wouldn't recommend it for any official API documentation or education effort.

If I was aiming to show off the code and/or some particular user experience, I'd probably make a quick GitHub repo and a GitHub page.

MDN provides "Open in CodePen" and "Open in JSFiddle" buttons, which are both fine alternatives. CodePen talks about this a bit on their blog.