Browse Source

feat: mermaid support

master
OhYee 1 year ago
parent
commit
68693e3b60
Signed by: OhYee
GPG Key ID: 5A9E1F63ED274FBB
  1. 17
      components/post_content.tsx
  2. 1
      package.json
  3. 9
      pages/_app.tsx
  4. 3
      pages/admin/post/index.tsx
  5. 4
      pages/post/post.module.scss
  6. 5
      yarn.lock

17
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()}

1
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",

9
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 ? (

3
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';

4
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 {

5
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"

Loading…
Cancel
Save