Add support for [b] and [i] markup in test mode

package.json

@@ -15,6 +15,7 @@
   "author": "Secret Lab Pty Ltd",
   "license": "MIT",
   "devDependencies": {
+    "@types/html-escaper": "^3.0.2",
     "compression-webpack-plugin": "^9.2.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.6.0",
@@ -33,6 +34,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.2",
     "bootstrap": "^5.1.3",
+    "html-escaper": "^3.0.3",
     "jquery": "^3.6.0",
     "monaco-editor": "^0.32.1",
     "monaco-editor-webpack-plugin": "^7.0.1",

src/playground.ts

@@ -10,6 +10,8 @@ import * as yarnspinner from './yarnspinner';
 import "../scss/yarnspinner.scss";
 import 'bootstrap';
 
+import { escape } from 'html-escaper';
+
 import { initialContent } from './starter-content';
 
 let editor: monaco.editor.IStandaloneCodeEditor
@@ -474,7 +476,13 @@ function clearLog() {
 
 function addLogText(text: string, ...classes : string[]) {
     var logElement = addLogElement("div", "list-group-item", ...classes);
-    logElement.innerText = text;
+
+    text = escape(text);
+
+    text = text.replace(/\[i\](.*)\[\/i\]/, (substring, group1) => `<i>${group1}</i>`)
+    text = text.replace(/\[b\](.*)\[\/b\]/, (substring, group1) => `<b>${group1}</b>`)
+
+    logElement.innerHTML = text;
     return logElement;
 }