Adding Syntax Highlighting for the JavaScript in your Template Notes

[ChristinWhite]

So in a discussion about improving the way we write JavaScript for Templater on the Obsidian Discord @GitMurf mentioned wanting to have syntax highlighting for JavaScript code blocks in Obsidian template notes. I've been using standard JavaScript code fencing for this but in my the big note template where I'm using it I was discarding the whole note and writing the tR variable with what I wanted, a fine approach but one that's pretty limited.

It did get me thinking though, maybe there is a clean way to just manipulate the tR variable and remove the code fences. A little RegEx and a short function later I have it working. I wrote up the details and included the function here.

If you want the short version, make sure you label your fences javascript tp and run this function at the end of the note:

/**
 * Quick function that takes the note content variable (or another string) and remove the code fences from it.
 * @param {string} tR The note content string.
 * @returns string
 * 
 * @example
 *     tR = await tp.user.removeFences(tR);
 */
function removeFences(tR) {

	/** @type {RegExp} */
	const fencePattern = /(^[\s]*)(^`{3}javascript tp[\s]+[\s\S]*?^`{3})(\s*)/gmi;

	tR = tR.replace(fencePattern, '\n');
	return tR;

};
module.exports = removeFences;

Murf suggested posting it here as well so I hope it's useful. If you come up with any edge-cases where the RegEx (or anything else) fails let me know and I'll be happy to try to update the pattern to handle it!

[ChristinWhite]

Tweaked the pattern to account for string interpolation in some circumstances.