diff --git a/src/web_interface/components/ajax_routes.py b/src/web_interface/components/ajax_routes.py
index e9a7ca607d..20f23c93fa 100644
--- a/src/web_interface/components/ajax_routes.py
+++ b/src/web_interface/components/ajax_routes.py
@@ -90,10 +90,7 @@ def ajax_get_binary(self, mime_type, uid):
         mime_type = mime_type.replace('_', '/')
         binary = self.intercom.get_binary_and_filename(uid)[0]
         if 'text/' in mime_type:
-            return (
-                '<pre class="line_numbering" style="white-space: pre-wrap">'
-                f'{html.escape(bytes_to_str_filter(binary))}</pre>'
-            )
+            return f'<pre style="white-space: pre-wrap">{html.escape(bytes_to_str_filter(binary))}</pre>'
         if 'image/' in mime_type:
             return (
                 '<div style="display: block; border: 1px solid; border-color: #dddddd; padding: 5px; '
diff --git a/src/web_interface/static/css/line_numbering.css b/src/web_interface/static/css/line_numbering.css
deleted file mode 100644
index 9ddefc0fbf..0000000000
--- a/src/web_interface/static/css/line_numbering.css
+++ /dev/null
@@ -1,26 +0,0 @@
-#preview-div pre{
-  border: 1px solid white;
-}
-
-#preview-div pre .line-number {
-  color:black;
-  display:block;;
-}
-
-#preview-div pre .line-number {
-  float:left;
-  margin: 0;
-  border-right:1px solid;
-  text-align:right;
-  margin-right: 1em;
-}
-
-#preview-div pre .line-number span {
-  display:block;
-  padding:0 .5em 0 1em;
-}
-
-#preview-div pre .cl {
-  display:block;
-  clear:both;
-}
diff --git a/src/web_interface/static/js/line_numbering.js b/src/web_interface/static/js/line_numbering.js
deleted file mode 100644
index c0817791c6..0000000000
--- a/src/web_interface/static/js/line_numbering.js
+++ /dev/null
@@ -1,12 +0,0 @@
-function line_numbering() {
-    var pre = document.getElementsByClassName('line_numbering'),
-        pl = pre.length;
-    for (var i = 0; i < pl; i++) {
-        pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
-        var num = pre[i].innerHTML.split(/\n/).length;
-        for (var j = 0; j < num-1; j++) {
-            var line_num = pre[i].getElementsByTagName('span')[0];
-            line_num.innerHTML += '<span>' + (j + 1) + '</span>';
-        }
-    }
-}
diff --git a/src/web_interface/static/js/show_analysis_preview.js b/src/web_interface/static/js/show_analysis_preview.js
index 261c21e1c3..d331be14dd 100644
--- a/src/web_interface/static/js/show_analysis_preview.js
+++ b/src/web_interface/static/js/show_analysis_preview.js
@@ -5,19 +5,33 @@ const offset_input = document.getElementById("hex-preview-offset");
 function hide_gif(element) {
     element.style.display = "none";
 }
+
 function init_preview() {
     hide_gif(preview_loading_gif);
     if (isTextOrImage) {
-        highlight_code();
+        highlightCode('div#preview-div pre', true).then(
+            (_) => null, // do nothing
+            (error) => {
+                console.log(`Error: Code highlighting not successful: ${error}`);
+            }
+        );
     }
     preview_button.scrollIntoView();
     offset_input.focus();
 }
-function highlight_code() {
-    const block = $('div#preview-div pre')[0];
-    hljs.highlightElement(block);
-    line_numbering();
+
+async function highlightCode(jqElement, lineNumbering = false, sizeLimit = 1048576) {
+    if (typeof jqElement === "string") {
+        jqElement = $(jqElement)[0];
+    }
+    if (jqElement.innerText.length < sizeLimit) { // only highlight the element if it isn't too large
+        hljs.highlightElement(jqElement);
+    }
+    if (lineNumbering) {
+        hljs.lineNumbersBlock(jqElement);
+    }
 }
+
 function load_preview(offset = null, focus = false) {
     let resourcePath;
     document.getElementById("preview_button").onclick = () => false;
@@ -43,16 +57,16 @@ function load_preview(offset = null, focus = false) {
     preview_loading_gif.style.display = "block";
     $("#preview-content").load(resourcePath, init_preview);
 }
+
 preview_button.onclick = load_preview;
 let rawResultIsHighlighted = false;
 const toggleSwitch = document.getElementById("rawResultSwitch");
+const analysisTable = document.getElementById("analysis-table-body");
+const rawResultRow = document.getElementById("raw-result");
+const analysisRows = Array.from(analysisTable.children)
+    .filter(child => !child.classList.contains("analysis-meta"));
 
-toggleSwitch.addEventListener('change', function() {
-    const analysisTable = document.getElementById("analysis-table-body");
-    const rawResultRow = document.getElementById("raw-result");
-    const analysisRows = Array.from(analysisTable.children)
-        .filter(child => !child.classList.contains("analysis-meta"));
-
+toggleSwitch.addEventListener('change', function () {
     if (toggleSwitch.checked) {
         analysisRows.forEach((element) => {
             element.style.visibility = "collapse";
@@ -69,11 +83,16 @@ toggleSwitch.addEventListener('change', function() {
         // highlight the result lazily and only once
         rawResultIsHighlighted = true;
         let rawResult = document.getElementById('raw-analysis');
-        hljs.highlightBlock(rawResult);
+        highlightCode(rawResult).then(
+            (_) => null, // do nothing
+            (error) => {
+                console.log(`Error: Raw result highlighting not successful: ${error}`);
+            }
+        );
     }
 });
 
-window.onload = function() {
+window.onload = function () {
     // make sure the switch is off when the page is reloaded
     toggleSwitch.checked = false;
 };
diff --git a/src/web_interface/static/package-lock.json b/src/web_interface/static/package-lock.json
index 5d450f9521..eaae2da7d6 100644
--- a/src/web_interface/static/package-lock.json
+++ b/src/web_interface/static/package-lock.json
@@ -19,6 +19,7 @@
         "chart.js": "^2.3.0",
         "diff2html": "^3.4.18",
         "graphiql": "^3.2.3",
+        "highlightjs-line-numbers.js": "^2.9.0",
         "jquery": "^3.5.0",
         "json5": "^2.2.3",
         "jstree": "^3.3.12",
@@ -123,11 +124,9 @@
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
     },
     "node_modules/@fortawesome/fontawesome-free": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
-      "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
-      "hasInstallScript": true,
-      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz",
+      "integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==",
       "engines": {
         "node": ">=6"
       }
@@ -1285,6 +1284,11 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/highlightjs-line-numbers.js": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/highlightjs-line-numbers.js/-/highlightjs-line-numbers.js-2.9.0.tgz",
+      "integrity": "sha512-hMYK5VU+Qi0HmkkdZxamV71ALu9Hq2icQk2WP8OX5q7IPMilSv47ILlJu+fBvxAQdhjW6wONnSQeypsbeRM7WQ=="
+    },
     "node_modules/hogan.js": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/hogan.js/-/hogan.js-3.0.2.tgz",
diff --git a/src/web_interface/static/package.json b/src/web_interface/static/package.json
index 3390b232e2..165d4413b4 100644
--- a/src/web_interface/static/package.json
+++ b/src/web_interface/static/package.json
@@ -10,6 +10,7 @@
     "chart.js": "^2.3.0",
     "diff2html": "^3.4.18",
     "graphiql": "^3.2.3",
+    "highlightjs-line-numbers.js": "^2.9.0",
     "jquery": "^3.5.0",
     "json5": "^2.2.3",
     "jstree": "^3.3.12",
diff --git a/src/web_interface/templates/show_analysis.html b/src/web_interface/templates/show_analysis.html
index d28b359273..73d5b32850 100644
--- a/src/web_interface/templates/show_analysis.html
+++ b/src/web_interface/templates/show_analysis.html
@@ -28,15 +28,28 @@
     <script src="{{ url_for('static', filename='node_modules/@highlightjs/cdn-assets/highlight.min.js') }}"></script>
     <link rel="stylesheet" href="{{ url_for('static', filename='node_modules/@highlightjs/cdn-assets/styles/github.min.css') }}" />
 
-    {# line_numbering.js import #}
-    <script type="text/javascript" src="{{ url_for('static', filename='js/line_numbering.js') }}"></script>
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/line_numbering.css') }}" />
+    <script src="{{ url_for('static', filename='node_modules/highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js') }}"></script>
 
     <script>
         const uid = "{{ uid | safe }}";
         const selected_analysis = "{{ selected_analysis }}";
     </script>
     <script src="{{ url_for('static', filename='js/file_tree.js') }}"></script>
+
+    <style>
+        {# styling for file preview line lumbers #}
+        .hljs-ln-numbers {
+            user-select: none;
+            text-align: center;
+            color: gray;
+            border-right: 1px solid gray;
+            vertical-align: top;
+            padding-right: 5px !important;
+        }
+        .hljs-ln-code {
+            padding-left: 10px !important;
+        }
+    </style>
 {% endblock %}