Ruby!

puts 'hello'

Python

print('hello')

Neat, huh? This was a fun exercise in learning how to use importmaps to embed javascript and css together. I'm a newbie when it comes to advancing rails beyond CRUD so all this is new to me and probably not the best way to go about it, but here's how I did it.

First, I decided on a framework for syntax highlighting. As much fun as it would be to just build my own (that's not fun, that's sarcasm), I figure it made more sense to rely on the work of others. I chose Highlight.js for its simplicty and many different theme options.

Next, I went under config/importmap.rb and added the following line:

pin "highlight.js", to: "https://ga.jspm.io/npm:highlight.js@11.4.0/es/index.js"

Next, I modified app/javascript/application.js to import the framework and embed an event listener on every document. I will probably, in the future, migrate this to make sure this only shows up on post pages and not every page. 

import { HighlightJS } from "highlight.js"

HighlightJS.configure({ languages: ["ruby", "python", "javascript"] })

document.addEventListener("turbo:load", (event) => {
  document.querySelectorAll('pre').forEach((block) => {
    HighlightJS.highlightElement(block)
  })
})

I thought I was done. Reloaded a post and still see no highlighting in the code block for actiontext. I checked the developer tools and sure enough the pre tags were getting modified to include the classes. It's at this point I realize that importmaps is really good for javascript - it does nothing for me using CSS. 

Remember, I am still learning, so my next steps are probably not the best but I did it anyway. In application.html.erb, I added the following line entry into the head tags:

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/sunburst.min.css" />

And yay! It worked. Everything was awesome. Except my chosen css was looking ugly in the editor. I mean ugly, I couldn't see a thing. I had to make a little teeny weeny little hack to my app/views/posts/edit.html.erb template:

<style>
.trix-content pre {
  background-color: #eee;
}
</style>

Voila. My background color in the editor now was back to the original default cream color in the editor.

One of the things I plan to do in the future is implement light and dark mode for this site. I think when I do that, I'm going to copy all my CSS into local files so I can have better control over how well they integrate. I can foresee bundling multiple CSS from CDNs can be laborious and a nightmare to maintain.