feat: mermaid support

2 years ago · 68693e3b60
6 changed files with 32 additions and 7 deletions
--- a/components/post_content.tsx
+++ b/components/post_content.tsx
@ -60,9 +60,19 @@ class PostContent extends Component<PostContentProps, PostContentState> {
				@@ -60,9 +60,19 @@ class PostContent extends Component<PostContentProps, PostContentState> {
      tables[i].outerHTML = `<div class="${styles.table_wrapper}">${tables[i].outerHTML}</div>`;
    }
  }
+
+  drawMermaid() {
+    if (!!(window as any).mermaid) {
+      try {
+        (window as any).mermaid.init();
+      } catch {}
+    }
+  }
+
  componentDidMount() {
    this.resetImage();
    this.resetTable();
+    this.drawMermaid();
    if (this.isTravel()) {
      this.getTravelData();
    }
@ -70,6 +80,7 @@ class PostContent extends Component<PostContentProps, PostContentState> {
				@@ -70,6 +80,7 @@ class PostContent extends Component<PostContentProps, PostContentState> {
  componentDidUpdate() {
    this.resetImage();
    this.resetTable();
+    this.drawMermaid();
  }

  isTravel = () => {
@ -124,18 +135,18 @@ class PostContent extends Component<PostContentProps, PostContentState> {
				@@ -124,18 +135,18 @@ class PostContent extends Component<PostContentProps, PostContentState> {
    ) : (
      <article className={styles.post}>
        <Head>
-          {this.props.post.content.indexOf('katex') != -1 ? (
+          {this.props.post.content.indexOf('katex') != -1 && (
            <link
              rel="stylesheet"
              href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css"
              integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq"
              crossOrigin="anonymous"
            ></link>
-          ) : null}
+          )}
        </Head>

        <Flex direction="TB" fullWidth>
-          <PostCard post={this.props.post} inset inPost/>
+          <PostCard post={this.props.post} inset inPost />
          {!!this.context.ad_text && <AD setting={this.context.ad_text} />}
          {this.props.prefix}
          {this.renderTravel()}
--- a/package.json
+++ b/package.json
@ -14,6 +14,7 @@
				@@ -14,6 +14,7 @@
        "markdown-it-footnote": "^3.0.2",
        "markdown-it-highlightjs": "^3.3.1",
        "markdown-it-named-headers": "^0.0.4",
+        "md-it-mermaid": "^1.0.0",
        "next": "^10.0.2",
        "qiniu-js": "^3.1.2",
        "react": "^17.0.1",
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -84,7 +84,7 @@ export default class MyApp extends App<MyAppProps, {}, MyAppState> {
				@@ -84,7 +84,7 @@ export default class MyApp extends App<MyAppProps, {}, MyAppState> {
        <Head>
          <title>{this.state.blog_name}</title>
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-          {this.state.grey ? (
+          {this.state.grey && (
            <style
              id="grey-style"
              type="text/css"
@ -92,7 +92,12 @@ export default class MyApp extends App<MyAppProps, {}, MyAppState> {
				@@ -92,7 +92,12 @@ export default class MyApp extends App<MyAppProps, {}, MyAppState> {
                __html: 'html{filter:gray;-webkit-filter: grayscale(100%);}',
              }}
            ></style>
-          ) : null}
+          )}
+          {/* 必须提前引入，否则渲染时，无法成功加载 mermaid */}
+          <script
+            type="text/javascript"
+            src="https://cdn.bootcdn.net/ajax/libs/mermaid/8.9.2/mermaid.min.js"
+          ></script>
        </Head>
        <Layout>
          {this.props.status != 0 ? (
--- a/pages/admin/post/index.tsx
+++ b/pages/admin/post/index.tsx
@ -9,7 +9,8 @@ const MD = require('markdown-it')({ html: true, linkify: true, breaks: true })
				@@ -9,7 +9,8 @@ const MD = require('markdown-it')({ html: true, linkify: true, breaks: true })
  .use(require('markdown-it-deflist'))
  .use(require('markdown-it-footnote'))
  .use(require('markdown-it-named-headers'))
-  .use(require('markdown-it-highlightjs'));
+  .use(require('markdown-it-highlightjs'))
+  .use(require('md-it-mermaid'));

 import Button from '@/components/button';
 import Card from '@/components/card';
--- a/pages/post/post.module.scss
+++ b/pages/post/post.module.scss
@ -92,7 +92,9 @@
				@@ -92,7 +92,9 @@
      display: block;
      max-width: 100% !important;
      height: auto !important;
-      max-height: 75vh;
+      max-height: 50vh;
+      line-height: 1;
+      font-size: unset;
    }

    :global(.footnotes) hr {
--- a/yarn.lock
+++ b/yarn.lock
@ -2534,6 +2534,11 @@ markdown-it@^12.0.2:
				@@ -2534,6 +2534,11 @@ markdown-it@^12.0.2:
    mdurl "^1.0.1"
    uc.micro "^1.0.5"

+md-it-mermaid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/md-it-mermaid/-/md-it-mermaid-1.0.0.tgz#0d74cbdf0874b6b402b507b6746c2a5d687325b0"
+  integrity sha512-qxYUO/DZXMAUJavaFP+kI7S6lUnd0D4u8Z/h0WGg5gSsyLOLhwA3yZNSyyDQkqXo9WNnx5SdHsDX3LBRFGmJVw==
+
 md5.js@^1.3.4:
  version "1.3.5"
  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"