[feat] tag-plugin: md

_config.yml

@@ -305,6 +305,7 @@ plugins:
     fcircle: /js/plugins/fcircle.js
     weibo: /js/plugins/weibo.js
     memos: /js/plugins/memos.js
+    marked: /js/plugins/marked.js
 
   marked: https://cdn.bootcdn.net/ajax/libs/marked/4.0.18/marked.min.js
 

scripts/tags/index.js

@@ -22,6 +22,7 @@ hexo.extend.tag.register('sites', require('./lib/sites')(hexo))
 hexo.extend.tag.register('ghcard', require('./lib/ghcard')(hexo))
 hexo.extend.tag.register('toc', require('./lib/toc')(hexo))
 hexo.extend.tag.register('timeline', require('./lib/timeline')(hexo), {ends: true})
+hexo.extend.tag.register('md', require('./lib/md')(hexo))
 
 // express
 hexo.extend.tag.register('checkbox', require('./lib/checkbox')(hexo, 'checkbox'))

scripts/tags/lib/md.js

@@ -0,0 +1,20 @@
+/**
+ * md.js v1.0 | https://github.com/volantis-x/hexo-theme-volantis/
+ * contributor: @MHuiG
+ * 
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% md [src:url] %}
+ *
+ */
+'use strict'
+
+var md_index = 0
+
+module.exports = ctx => function(args) {
+  args = ctx.args.map(args, ['src'])
+  const md_id = "md_" + ++md_index
+  return `
+  <div class="stellar-marked-api md-marked" src="${args.src}" id="${md_id}"></div>
+  `
+}

source/css/_layout/md.styl

@@ -161,3 +161,6 @@ h1.article-title
           bottom: 0
           left: -2px
           right: -2px
+      &:has(img)
+        &:before
+          content: none

source/js/main.js

@@ -242,7 +242,7 @@ if (stellar.plugins.stellar) {
       const els = document.getElementsByClassName('stellar-' + key + '-api');
       if (els != undefined && els.length > 0) {
         stellar.jQuery(() => {
-          if (key == 'timeline' || 'memos') {
+          if (key == 'timeline' || 'memos' || 'marked') {
             stellar.loadScript(stellar.plugins.marked).then(function () {
               stellar.loadScript(js, { defer: true });
             });

source/js/plugins/marked.js

@@ -0,0 +1,50 @@
+const loadMarkdown = (cfg) => {
+  if (!window.fetch) {
+    cfg.el.innerHTML =
+      '<div style="font-size: 24px"><p>Your browser outdated. Please use the latest version of Chrome or Firefox!</p><p>您的浏览器版本过低，请使用最新版的 Chrome 或 Firefox 浏览器！</p></div>';
+  } else {
+    cfg.el.innerHTML =
+      '<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>';
+    fetch(cfg.src, { method: "GET" })
+      .then((resp) => {
+        return Promise.all([
+          resp.ok,
+          resp.status,
+          resp.text(),
+          resp.headers,
+        ]);
+      })
+      .then(([ok, status, data, headers]) => {
+        if (ok) {
+          return {
+            ok,
+            status,
+            data,
+            headers,
+          };
+        } else {
+          throw new Error(JSON.stringify(json.error));
+        }
+      })
+      .then((resp) => {
+        let data = marked.parse(resp.data);
+        cfg.el.innerHTML = data;
+      })
+      .catch((error) => {
+        console.error(error);
+        cfg.el.innerHTML =
+          '<div class="loading-wrap error"><svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg></div>';
+      });
+  };
+};
+
+$(function () {
+  const els = document.getElementsByClassName('stellar-marked-api');
+  for (var i = 0; i < els.length; i++) {
+    var cfg = new Object();
+    const el = els[i];
+    cfg.src = `${el.getAttribute('src')}?t=${new Date().getTime()}`;
+    cfg.el = el;
+    loadMarkdown(cfg);
+  }
+});