diff --git a/assets/controllers/pages/latex_preview_controller.js b/assets/controllers/pages/latex_preview_controller.js
index 6113393a..7f1e611c 100644
--- a/assets/controllers/pages/latex_preview_controller.js
+++ b/assets/controllers/pages/latex_preview_controller.js
@@ -33,7 +33,10 @@ export default class extends Controller {
     {
         let value = "";
         if (this.unitValue) {
-            value = "\\mathrm{" + this.inputTarget.value + "}";
+            //Escape percentage signs
+            value = this.inputTarget.value.replace(/%/g, '\\%');
+
+            value = "\\mathrm{" + value + "}";
         } else {
             value = this.inputTarget.value;
         }
diff --git a/assets/controllers/pages/parameters_autocomplete_controller.js b/assets/controllers/pages/parameters_autocomplete_controller.js
index cd82875a..e187aa42 100644
--- a/assets/controllers/pages/parameters_autocomplete_controller.js
+++ b/assets/controllers/pages/parameters_autocomplete_controller.js
@@ -85,7 +85,9 @@ export default class extends Controller
                         tmp += '<span>' + katex.renderToString(data.symbol) + '</span>'
                     }
                     if (data.unit) {
-                        tmp += '<span class="ms-2">' + katex.renderToString('[' + data.unit + ']') + '</span>'
+                        let unit  = data.unit.replace(/%/g, '\\%');
+                        unit = "\\mathrm{" + unit + "}";
+                        tmp += '<span class="ms-2">' + katex.renderToString('[' + unit + ']') + '</span>'
                     }