obnotes
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>widcardw 的笔记</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <!-- docsify -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
  <!-- mermaid -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css">
  <!-- admonition -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="./.docsify-plugin/admonition.css" />
  <!-- code font -->
  <!-- <link rel="stylesheet" href="./.docsify-plugin/cufangsong.css" /> -->
  <link rel="stylesheet" href="./.docsify-plugin/font-config.css" />
  <style type="text/css">
    .yellow-hlit {
      background-color: #cbe6ff;
    }

    img,
    svg {
      display: block;
      margin: 0 auto;
    }

    .markdown-section table {
      width: auto;
      display: table;
      margin: 0 auto 0.5em auto;
    }

    .lang-wavedrom {
      display: none !important;
    }

    .docsify-copy-code-button {
      margin-top: 0.3em;
      margin-right: 0.3em;
      font-size: 0.8em !important;
      padding: 0.3em 0.4em !important;
      border-radius: 3px !important;
    }

    /* aside.toc-nav {
      right: 0 !important;
      --sidebar-nav-link-color--active: #6699cc;
    }

    aside::-webkit-scrollbar {
      width: 3px;
      height: 3px;
    }

    aside::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #ccc;
    } */

    .tocc {
      padding-left: 180px;
    }

    a,
    a:visited {
      color: darkslateblue;
    }

    @media screen and (max-width: 600px) {
      .markdown-section {
        max-width: 96%;
        font-size: 70%;
      }
    }
  </style>
  <!-- katex -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css">
  <!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css"/> -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/prismjs@1.25.0/themes/prism.css" />
</head>

<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: 'widcardw',
      repo: '',
      themeColor: '#6699cc',
      loadSidebar: true,
      subMaxLevel: 2,
      auto2top: true,
      noEmoji: true,
      labelVisibility: 'hidden',
      // alias: {
      //   '/.*/_sidebar.md': '/_sidebar.md'
      // },
      copyCode: {
        buttonText: 'Copy',
        errorText: 'Error',
        successText: 'Copied'
      },
      toc: {
        tocMaxLevel: 3,
        target: 'h1, h2, h3'
      },
      search: 'auto', // 默认值

      markdown: {
        renderer: {
          // mermaid 渲染
          code: function (code, lang) {
            if (lang === "mermaid") {
              return (
                '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + "</div>"
              );
            } else if (lang.substring(0, 3) === 'ad-') {
              // admonotion 渲染
              let sty = lang.split('-')[1];
              let lines = code.split('\n');
              // console.log("this", this);
              let element = `<div class='admonition ${sty}'>\n`;
              if (lines && lines[0].substring(0, 6) === 'title:') {
                // 包含标题
                element += `<p class="admonition-title">${lines[0].substring(6).trim()}</p>\n`;
                lines.shift();
                element += marked(lines.join("\n"));
              } else {
                // 不包含标题
                element += `<p class="admonition-title">${sty.toUpperCase()}</p>\n`;
                element += marked(code);
              }
              element += '</div>\n';
              return element;
            } /* else if (lang === "wavedrom") {
              // console.log("code:", code);
              let obj = Object();
              code = code.replace(/(\s*?{\s*?|\s*?,\s*?)(['"])?([a-zA-Z0-9]+)(['"])?:/g, '$1"$3":');
              let code_obj = JSON.parse(code);
              console.log("code_obj", code_obj)
              WaveDrom.RenderWaveForm(0, code_obj, null, false);
              return obj;
            }*/
            return this.origin.code.apply(this, arguments);
          },
          // 高亮块渲染
          paragraph: function (text) {
            return "<p>" + text.replace(/\=\=(.+?)\=\=/g, "<span class='yellow-hlit'>$1</span>") + "</p>\n";
          },
          listitem: function (text) {
            return '<li>' + text.replace(/\=\=(.+?)\=\=/g, "<span class='yellow-hlit'>$1</span>") + '</li>\n';
          }
          // 更改 heading 的渲染会导致无法显示目录
          // heading: function (text, level, raw) {
          //   text = text.replace(/\=\=(.+?)\=\=/g, '<span class="yellow-hlit">$1</span>')
          //   if (this.options.headerIds) {
          //     return '<h'
          //       + level
          //       + ' id="'
          //       + this.options.headerPrefix
          //       + raw.toLowerCase().replace(/[^\w]+/g, '-')
          //       + '">'
          //       + text
          //       + '</h'
          //       + level
          //       + '>\n';
          //   }
          //   return '<h' + level + '>' + text + '</h' + level + '>\n';
          // }
        }
      },

      plugins: [
        function (hook, vm) {
          // hook.beforeEach(function (html) {
          //   return (
          //     html +
          //     '\n----\n' +
          //     'Powered by [docsify](https://docsify.js.org/)\n'
          //   );
          // });
          // 将 ![[]] 格式的媒体替换成 html 元素
          hook.afterEach(function (html, next) {
            var modifiedHtml = html.replace(/\!\[\[(.+?)\]\]/g, function (word, match) {
              let suffix = match.split("\.")[1];
              if (suffix === "png" || suffix === "jpg" || suffix === "jpeg" || suffix === "gif" || suffix === "svg") {
                return `<img src='${match}' />\n`;
              } else if (suffix === "mp4" || suffix == "webm") {
                return `<video src='${match}' style='max-width:100%' controls="controls"/>\n`;
              }
            });
            // 异步处理完成后调用 next(html) 返回结果
            next(modifiedHtml);
          });
          hook.doneEach(() => {
            WaveDrom.ProcessAll();
          })
        }
      ]
    }
    var num = 0;
    mermaid.initialize({ startOnLoad: false });


  </script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-java.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-verilog.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-python.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-sql.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-clike.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-c.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-cpp.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-latex.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-yaml.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-nasm.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="./.docsify-plugin/admonition.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
  <!-- <script src="https://unpkg.com/docsify-admonition-plugin/build/index.js"></script> -->
  <!-- <script src="./.docsify-plugin/admonition.js"></script> -->
  <script src="https://cdn.bootcdn.net/ajax/libs/wavedrom/2.8.1/skins/default.min.js"></script>
  <script src="./.docsify-plugin/wavedrom.js" type="text/javascript"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
  <!-- <script src="./.docsify-plugin/docsify-toc.js"></script> -->
</body>

</html>