Merge pull request #242 from opensafely-core/241-syntax-highlight-files

Add syntax highlighting to text files

assets/src/scripts/_file-elements.js

@@ -1,6 +1,9 @@
 /* eslint-disable no-param-reassign */
+import hljs from "highlight.js";
 import fileLoader from "./_file-loader";
 import tableBuilder from "./_table-builder";
+import "highlight.js/styles/github.css";
+import { highlightJsName } from "./_utils";
 
 /**
  * @param {Node} el
@@ -38,11 +41,19 @@ export function createImageElement(el, url) {
 export async function createTextElement(el, ext, url) {
   const data = await fileLoader(ext, url);
 
-  const textEl = document.createElement("pre");
-  textEl.classList.add("break-words", "text-sm");
-  textEl.innerText = data;
+  const textEl = document.createElement("code");
+  textEl.classList.add(
+    "break-words",
+    "text-sm",
+    `language-${highlightJsName(ext)}`
+  );
+  textEl.innerHTML = data;
 
-  el.appendChild(textEl);
+  const preEl = document.createElement("pre");
+  preEl.appendChild(textEl);
+  el.appendChild(preEl);
+
+  hljs.highlightAll();
 }
 
 /**
@@ -53,11 +64,15 @@ export async function createTextElement(el, ext, url) {
 export async function createCodeElement(el, ext, url) {
   const data = await fileLoader(ext, url);
 
-  const codeEl = document.createElement("pre");
-  codeEl.classList.add("break-words", "text-sm", "whitespace-break-spaces");
-  codeEl.innerText = JSON.stringify(data, null, 2);
+  const codeEl = document.createElement("code");
+  codeEl.classList.add("break-words", "text-sm", "language-json");
+  codeEl.innerHTML = JSON.stringify(JSON.parse(JSON.stringify(data)), null, 2);
+
+  const preEl = document.createElement("pre");
+  preEl.appendChild(codeEl);
+  el.appendChild(preEl);
 
-  el.appendChild(codeEl);
+  hljs.highlightAll();
 }
 
 /**

assets/src/scripts/_file-loader.js

@@ -13,11 +13,11 @@ async function fileLoader(ext, url) {
 
   if (canDisplay(ext)) {
     if (isCsv(ext) || isTxt(ext)) {
-      res = await response.text();
+      return response.text();
     }
 
     if (isJson(ext)) {
-      res = await response.json();
+      return response.json();
     }
   }
 

assets/src/scripts/_utils.js

@@ -11,14 +11,16 @@ export const isCsv = (ext) => ext.toLowerCase() === "csv";
 export const isImg = (ext) =>
   ["gif", "jpg", "jpeg", "png", "svg"].includes(ext.toLowerCase());
 
-export const TEXT_TYPES = ["txt", "md", "py", "yaml", "R", "log"];
+export const TEXT_TYPES = ["txt", "md", "py", "yaml", "r", "log"];
 /**
  * Confirm if file is .txt
  * @param {string} ext - file extension
  * @returns {boolean}
  */
 export function isTxt(ext) {
-  return TEXT_TYPES.includes(ext.toLowerCase());
+  return TEXT_TYPES.some((type) =>
+    type.toLowerCase().localeCompare(ext.toLowerCase())
+  );
 }
 
 /**
@@ -120,3 +122,22 @@ export function formatDate(date) {
 export function hasComment(outputName) {
   return outputComments.value[outputName].trim() !== "";
 }
+
+/**
+ * @param {string} ext
+ */
+export function highlightJsName(ext) {
+  if (ext === "txt" || ext === "log") {
+    return "plaintext";
+  }
+
+  if (ext === "md") {
+    return "markdown";
+  }
+
+  if (ext === "py") {
+    return "python";
+  }
+
+  return ext.toLowerCase();
+}

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@preact/signals": "^1.1.3",
     "@tailwindcss/forms": "^0.5.3",
+    "highlight.js": "^11.9.0",
     "htm": "^3.1.1",
     "papaparse": "^5.4.1",
     "vhtml": "^2.2.0",