Merge pull request #68 from alan16742/master

fix: gfm alerts

front-end/index.html

@@ -260,6 +260,59 @@
         font-family: initial;
       }
 
+      .markdown-alert {
+        padding: 0 1em;
+        margin-bottom: 16px;
+        color: inherit;
+        border-left: 0.25em solid #444c56;
+      }
+
+      .markdown-alert-title {
+        display: inline-flex;
+        align-items: center;
+        font-weight: 500;
+      }
+
+      .markdown-alert-note {
+        border-left-color: #539bf5;
+      }
+
+      .markdown-alert-tip {
+        border-left-color: #57ab5a;
+      }
+
+      .markdown-alert-important {
+        border-left-color: #986ee2;
+      }
+
+      .markdown-alert-warning {
+        border-left-color: #c69026;
+      }
+
+      .markdown-alert-caution {
+        border-left-color: #e5534b;
+      }
+
+      .markdown-alert-note > .markdown-alert-title {
+        color: #539bf5;
+      }
+
+      .markdown-alert-tip > .markdown-alert-title {
+        color: #57ab5a;
+      }
+
+      .markdown-alert-important > .markdown-alert-title {
+        color: #986ee2;
+      }
+
+      .markdown-alert-warning > .markdown-alert-title {
+        color: #c69026;
+      }
+
+      .markdown-alert-caution > .markdown-alert-title {
+        color: #e5534b;
+      }
+
       pre,
       code,
       pre *,
@@ -732,16 +785,17 @@
 
       function fromCdn(cdnName, ...resources) {
         const cdnMap = {
-          jsdelivr: '//cdn.jsdelivr.net/npm',
+          jsdelivr: '//gcore.jsdelivr.net/npm',
           taobao: '//registry.npmmirror.com',
           bytedance: '//lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M',
         };
         const baseURL = cdnMap[cdnName];
         return resources.map((r) => `${baseURL}${r}`);
       }
 
-      function loadResource(resources) {
-        return Promise.all(resources.map(load));
+      function loadResource(...resources) {
+        const allResources = resources.flat();
+        return Promise.all(allResources.map(load));
 
         function load(resource) {
           if (!window.resourceCache[resource]) {
@@ -1158,12 +1212,17 @@
         }
 
         await loadResource(
+          fromCdn('jsdelivr', '/[email protected]/dist/index.umd.js'),
+          fromCdn(
+            'taobao',
+            '/marked/15.0.4/files/marked.min.js',
+            '/marked-highlight/2.2.1/files/lib/index.umd.js'
+          ),
           fromCdn(
             'bytedance',
             '/github-markdown-css/5.1.0/github-markdown-light.min.css',
             '/highlight.js/11.4.0/styles/github.min.css',
-            '/highlight.js/11.4.0/highlight.min.js',
-            '/marked/4.0.2/marked.min.js'
+            '/highlight.js/11.4.0/highlight.min.js'
           )
         );
 
@@ -1176,7 +1235,6 @@
             return;
           }
 
-          // It is not possible to load resources that are not cached and in an encrypted path.
           const transformHref = (href) => {
             if (href.startsWith('http') || href.startsWith('//')) {
               return href;
@@ -1201,25 +1259,26 @@
           };
 
           const renderer = new marked.Renderer();
-          renderer.image = (href, title, text) =>
-            `<img src="${transformHref(href)}" alt="${text}">`;
-          renderer.link = (href, title, text) =>
-            `<a href="${transformHref(href)}">${text}</a>`;
-
-          text = marked.parse(text, {
-            gfm: true,
-            renderer: renderer,
-            highlight: (code, language, callback) => {
-              try {
-                return hljs.highlight(code, {
-                  language,
-                  ignoreIllegals: true,
-                }).value;
-              } catch (_) {
-                return code;
-              }
-            },
-          });
+          renderer.image = (href) =>
+            `<img src="${transformHref(href.href)}" alt="${href.text}">`;
+          renderer.link = (href) =>
+            `<a href="${transformHref(href.href)}">${href.text}</a>`;
+
+          text = new marked
+            .Marked(
+              markedAlert(),
+              markedHighlight.markedHighlight({
+                langPrefix: 'hljs language-',
+                highlight(code, lang, info) {
+                  const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+                  return hljs.highlight(code, { language }).value;
+                }
+              })
+            )
+            .parse(text, {
+              gfm: true,
+              renderer: renderer,
+            });
 
           if (isReadMe()) {
             document.getElementById('readme').innerHTML = text;