Making log window colorful

ihp-ide/IHP/IDE/ToolServer/Layout.hs

@@ -24,7 +24,7 @@ toolServerLayout inner = [hsx|
         <script src={assetPath "/vendor/timeago.js"}></script>
         <script src={assetPath "/vendor/popper.min.js"}></script>
         <script src={assetPath "/vendor/bootstrap.min.js"}></script>
-
+        <script type="module" src={assetPath "/vendor/ansi-up.min.js"}></script>
 
         <script src={assetPath "/vendor/turbolinks.js"}></script>
         <script src={assetPath "/vendor/morphdom-umd.min.js"}></script>
@@ -45,6 +45,7 @@ toolServerLayout inner = [hsx|
         <script src={assetPath "/IDE/query-editor.js"}></script>
         <script src={assetPath "/IDE/data-hovercard.js"}></script>
         <script src={assetPath "/IDE/migration-editor.js"}></script>
+        <script type="module" src={assetPath "/IDE/log-color.js"}></script>
 
 
         <title>IHP IDE</title>

ihp-ide/data/static/IDE/log-color.js

@@ -0,0 +1,18 @@
+import { AnsiUp } from "/vendor/ansi-up.min.js";
+
+function renderAnsiLogs() {
+  const pres = document.querySelectorAll('#logs pre');
+  if (pres.length === 0) return;
+
+  const ansiUp = new AnsiUp();
+  ansiUp.use_classes = false;
+
+  pres.forEach(pre => {
+    const ESC = "\u001b";
+    const text = pre.textContent.replace(/\\ESC\[/g, ESC + "[");
+    const html = ansiUp.ansi_to_html(text);
+
+    pre.innerHTML = html;
+  });
+}
+document.addEventListener('turbolinks:load', renderAnsiLogs);