Touching up syntax highlighting

.eleventy.js

@@ -277,17 +277,22 @@ module.exports = function (eleventyConfig) {
 		`;
 		}
 	);
-	function getNProjectItem(collection, page, projectName, index, operation){
+	function getNProjectItem(collection, page, projectName, index, operation) {
 		let found = false;
 		let i = index;
-		if (projectName){
+		if (projectName) {
 			let lastPost;
 			while (found === false) {
-				lastPost = getCollectionItem(collection, page, i)
-				if (lastPost && lastPost.data.hasOwnProperty("project") && lastPost.data.project == projectName && !lastPost.data.hasOwnProperty('wrapup')){
+				lastPost = getCollectionItem(collection, page, i);
+				if (
+					lastPost &&
+					lastPost.data.hasOwnProperty("project") &&
+					lastPost.data.project == projectName &&
+					!lastPost.data.hasOwnProperty("wrapup")
+				) {
 					found = true;
 				} else {
-					if (!lastPost){
+					if (!lastPost) {
 						return false;
 					}
 					i = operation(i);
@@ -300,16 +305,32 @@ module.exports = function (eleventyConfig) {
 	}
 	eleventyConfig.addFilter(
 		"getPreviousProjectItem",
-		function (collection, page, project){
+		function (collection, page, project) {
 			let index = -1;
-			return getNProjectItem(collection, page, project, index, function(i){return i-1})
+			return getNProjectItem(
+				collection,
+				page,
+				project,
+				index,
+				function (i) {
+					return i - 1;
+				}
+			);
 		}
 	);
 	eleventyConfig.addFilter(
 		"getNextProjectItem",
-		function (collection, page, project){
+		function (collection, page, project) {
 			let index = 1;
-			return getNProjectItem(collection, page, project, index, function(i){return i+1})
+			return getNProjectItem(
+				collection,
+				page,
+				project,
+				index,
+				function (i) {
+					return i + 1;
+				}
+			);
 		}
 	);
 	eleventyConfig.addFilter("relproject", function (url) {
@@ -444,6 +465,20 @@ module.exports = function (eleventyConfig) {
 					inside: Prism.languages.yaml,
 				},
 			});
+			//console.log(Prism.languages);
+			Prism.languages.liquid = Prism.languages.extend("html", {
+				templateTag: {
+					pattern: /(?<=\{\%).*?(?=\%\})/g,
+					greedy: true,
+					inside: Prism.languages.javascript,
+				},
+				templateTagBoundary: {
+					pattern: /\{\%}?|\%\}?/g,
+					greedy: false,
+					alias: "template-tag-boundary",
+				},
+			});
+			Prism.languages.njk = Prism.languages.extend("liquid", {});
 		},
 	});
 

src/_sass/syntax-highlighting.scss

@@ -1,4 +1,5 @@
-@use 'base-syntax-highlighting';
+@use "base-syntax-highlighting";
+@use "variables";
 
 /**
  * Syntax highlighting styles
@@ -204,3 +205,21 @@
 		color: #099;
 	} // Literal.Number.Integer.Long
 }
+
+pre[class*="language-"] {
+	width: 100%;
+	overscroll-behavior-x: contain;
+	.template-tag-boundary {
+		color: #ec4984;
+	}
+
+	.tag > .tag > .punctuation,
+	.tag > .punctuation:last-of-type {
+		color: #1cf08d;
+	}
+	@media (max-width: variables.$mobile-width) {
+		code[class*="language-"] {
+			font-size: 12px;
+		}
+	}
+}

src/posts/projects/devblog/hello-day-31.md

@@ -137,7 +137,7 @@ So no project property. The project proprty of the post is escaped into its own
 So now the template calls the filter like:
 
 {% raw %}
-```liquid
+```njk
 	{% set previousPost = collections.posts | getPreviousProjectItem(page, project) %}
 	{% set nextPost = collections.posts | getNextProjectItem(page, project) %}
 ```