diff --git a/package-lock.json b/package-lock.json
index faadeb5..9413ca0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,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",
@@ -20,6 +21,7 @@
         "yarnspinner.js": "dotnet.js"
       },
       "devDependencies": {
+        "@types/html-escaper": "^3.0.2",
         "compression-webpack-plugin": "^9.2.0",
         "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^6.6.0",
@@ -232,6 +234,12 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/html-escaper": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/html-escaper/-/html-escaper-3.0.2.tgz",
+      "integrity": "sha512-A8vk09eyYzk8J/lFO4OUMKCmRN0rRzfZf4n3Olwapgox/PtTiU8zPYlL1UEkJ/WeHvV6v9Xnj3o/705PKz9r4Q==",
+      "dev": true
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -2036,6 +2044,11 @@
         }
       ]
     },
+    "node_modules/html-escaper": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",
+      "integrity": "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ=="
+    },
     "node_modules/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
diff --git a/package.json b/package.json
index 9310ce9..f4b5230 100644
--- a/package.json
+++ b/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",
diff --git a/src/playground.ts b/src/playground.ts
index becd466..47d7350 100644
--- a/src/playground.ts
+++ b/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;
 }