Easy CODE Mark-Up WITH “HIGHLIGHT.JS”

I wrote 29 blog posts before I bothered to think of actually making the code look presentable. I am embedding the code I give in these posts into code blocks, and ticking on the “display code” checkbox. I didn’t want to change all those 29 posts retrospectively to have code mark-up and I definitely didn’t want to style every mark-up situation with CSS. The solution was to implement Highlight.js and write a piece of code to automatically wrap the desired code in the right tags so that Highlight.js can do its magic. My code is always preceded by the text “HTML”, “JAVASCRIPT”, or “CSS”, on the first line of the code blocks. This was the only identifier for the scripting language that I had as the squarespace code blocks do not add separate classes based on the type of code that is inside the block, as far as I could find. Below is a piece of code that allowed me to use code mark-up with minimal effort considering the above. Please note that the Javascript goes into the Footer section, and only the HTML goes into the Header section.

HTML:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/an-old-hope.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>

JAVASCRIPT:

document.addEventListener("DOMContentLoaded", function() {
//Check if we are in blog
const subString = 'developmentlog';
const getURL = window.location.href;
if (getURL.includes(subString)) {
//Find all elements with the class 'source-code'
var codeBlocks = document.querySelectorAll('.source-code');
codeBlocks.forEach(function(block) {
var codeText = block.textContent.trim();
var language = 'plaintext'; // Default language
//Extract the first line to detect the language
var firstLineEndIndex = codeText.indexOf('\n');
var firstLine = firstLineEndIndex === -1 ? codeText : codeText.substring(0, firstLineEndIndex).trim();
//Map common language names to Highlight.js classes
var languageMap = {
'html:': 'html',
'javascript:': 'javascript',
'css:': 'css',
};
//Detect the language if the first line is a known language indicator
if (languageMap[firstLine.toLowerCase()]) {
language = languageMap[firstLine.toLowerCase()];
//Remove the "//" to remove the first line from the code text
// codeText = firstLineEndIndex === -1 ? '' : codeText.substring(firstLineEndIndex + 1).trim();
}
// Create a <pre> element and <code> element
var pre = document.createElement('pre');
var code = document.createElement('code');
code.className = 'language-' + language; // Add language class to <code>
//Set the remaining code text into the <code> block
code.textContent = codeText;
pre.appendChild(code);
//Replace the source-code block with the newly created <pre><code> block
block.parentNode.replaceChild(pre, block);
});
//Initialize Highlight.js to apply syntax highlighting
hljs.highlightAll();
}
});

CSS:

I have a check at the beginning to see if I am in the blog section. You can eliminate that for your purposes, or change the subString to the url slug of your blog. Hightlight.js has a plethora of themes, you can pick whatever suits your personal preference from their website - highlightjs.org. I am not affiliated with them, but I must say I very much appreciate what they did. Thank you Highlight.Js!