refactor: upgrade highlightjs

front-end/index.html

@@ -30,11 +30,15 @@
       src="//lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/ionicons/4.6.3/ionicons/ionicons.js"
     ></script>
     <script src="//s0.pstatp.com/cdn/expire-1-M/marked/0.6.2/marked.min.js"></script>
-    <script src="//s0.pstatp.com/cdn/expire-1-M/highlight.js/9.15.6/highlight.min.js"></script>
     <link
-      href="//s0.pstatp.com/cdn/expire-1-M/highlight.js/9.15.6/styles/github.min.css"
+      href="//lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/styles/github.min.css"
+      type="text/css"
       rel="stylesheet"
     />
+    <script
+      src="//lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/highlight.min.js"
+      type="application/javascript"
+    ></script>
     <link
       href="//s0.pstatp.com/cdn/expire-1-M/github-markdown-css/3.0.1/github-markdown.min.css"
       rel="stylesheet"
@@ -242,8 +246,18 @@
         margin: 5px 0;
       }
 
-      pre * {
-        font-family: Courier New;
+      .markdown-body,
+      .markdown-body * {
+        font-family: initial;
+      }
+
+      pre,
+      code,
+      pre *,
+      code * {
+        font-family: Consolas, Monaco, Lucida Console, Liberation Mono,
+          DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, Cascadia Code,
+          monospace !important;
       }
 
       .preview {
@@ -532,7 +546,7 @@
         }
 
         .file-name {
-          overflow-x: scroll;
+          overflow-x: auto;
           height: 100%;
         }
       }
@@ -906,22 +920,21 @@
 
       async function renderMarkdown(path, url) {
         const render = (text) => {
-          let markedText;
-          try {
-            markedText = marked(text, {
-              gfm: true,
-              highlight: (code, lang, callback) => {
-                return hljs.highlight(lang, code).value;
-              },
-            });
-          } catch (e) {
-            markedText = marked(text, {
-              gfm: true,
-              highlight: (code, lang, callback) => {
-                return hljs.highlight('bash', code).value;
-              },
-            });
-          }
+          const markedText = marked(text, {
+            gfm: true,
+            highlight: (code, language, callback) => {
+              try {
+                return hljs.highlight(code, { language, ignoreIllegals: true })
+                  .value;
+              } catch (e) {
+                return hljs.highlight(code, {
+                  language: 'plaintext',
+                  ignoreIllegals: true,
+                }).value;
+              }
+            },
+          });
+
           if (
             window.backFordwardCache.current +
               (window.backFordwardCache.current === '/' ? '' : '/') +
@@ -1296,21 +1309,19 @@
                 break;
               case 'text':
                 sendRequest('GET', url, null, null, (data) => {
-                  let pre = document.createElement('pre');
-                  let code = document.createElement('code');
-                  pre.append(code);
+                  const pre = document.createElement('pre');
                   pre.style.background = 'rgb(245,245,245)';
-                  pre.style['overflow-x'] = 'scroll';
-                  pre.classList.add(suffix);
-                  // content.style.textAlign = "initial";
+                  pre.style.padding = '5px';
+                  pre.style['overflow-x'] = 'auto';
+                  content.style.textAlign = 'initial';
                   content.innerHTML = '';
                   content.append(pre);
-                  code.textContent = data;
+                  pre.textContent = data;
                   if (
                     size.indexOf(' B') >= 0 ||
                     (size.indexOf(' KB') && size.split(' ')[0] < 100)
                   ) {
-                    hljs.highlightBlock(pre);
+                    hljs.highlightElement(pre);
                   }
                 });
                 break;