feat: add mermaid code fences usage
This commit is contained in:
parent
6a87dc6e29
commit
7d6df42519
|
@ -5,7 +5,11 @@ var pre = document.getElementsByTagName('pre');
|
|||
for (var i = 0; i < pre.length; ++ i)
|
||||
{
|
||||
var element = pre[i];
|
||||
element.insertAdjacentHTML('afterbegin', '<button class="btn btn-copy"></button>');
|
||||
var mermaid = element.getElementsByClassName('language-mermaid')[0];
|
||||
|
||||
if (mermaid == null) {
|
||||
element.insertAdjacentHTML('afterbegin', '<button class="btn btn-copy"></button>');
|
||||
}
|
||||
}
|
||||
|
||||
var clipboard = new Clipboard('.btn-copy', {
|
||||
|
|
|
@ -7,4 +7,5 @@ var config = {
|
|||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
mermaid.initialize(config);
|
||||
mermaid.init(undefined, '.language-mermaid');
|
||||
});
|
||||
|
|
|
@ -22,9 +22,9 @@
|
|||
@import "components/code";
|
||||
@import "components/syntax";
|
||||
@import "components/comments";
|
||||
@import "components/diagrams";
|
||||
@import "components/forms";
|
||||
@import "components/images";
|
||||
@import "components/mermaid";
|
||||
@import "components/search";
|
||||
@import "components/tables";
|
||||
@import "layouts/footer";
|
||||
|
|
|
@ -232,11 +232,6 @@ body.dark pre code::-webkit-scrollbar-thumb {
|
|||
background: $gray-400;
|
||||
}
|
||||
|
||||
body.dark code:not(.hljs) {
|
||||
background: $body-overlay-dark;
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark pre code:hover {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $border-dark transparent;
|
||||
|
@ -246,6 +241,11 @@ body.dark pre code::-webkit-scrollbar-thumb:hover {
|
|||
background: $gray-500;
|
||||
}
|
||||
|
||||
body.dark code:not(.hljs):not(.language-mermaid) {
|
||||
background: $body-overlay-dark;
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark blockquote {
|
||||
border-left: 3px solid $border-dark;
|
||||
}
|
||||
|
|
|
@ -60,3 +60,7 @@ pre code:hover {
|
|||
pre code::-webkit-scrollbar-thumb:hover {
|
||||
background: $gray-500;
|
||||
}
|
||||
|
||||
code.language-mermaid {
|
||||
background: none;
|
||||
}
|
||||
|
|
|
@ -15,6 +15,8 @@ toc: true
|
|||
|
||||
## Flow
|
||||
|
||||
### Shortcode
|
||||
|
||||
```md
|
||||
{{</* mermaid class="bg-light text-center" */>}}
|
||||
graph TD
|
||||
|
@ -33,6 +35,26 @@ graph TD
|
|||
C -->|Two| E[Result 2]
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Code fences
|
||||
|
||||
````md
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Hard] -->|Text| B(Round)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result 1]
|
||||
C -->|Two| E[Result 2]
|
||||
```
|
||||
````
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Hard] -->|Text| B(Round)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result 1]
|
||||
C -->|Two| E[Result 2]
|
||||
```
|
||||
|
||||
## Sequence
|
||||
|
||||
{{< mermaid >}}
|
||||
|
@ -51,13 +73,15 @@ sequenceDiagram
|
|||
|
||||
{{< mermaid >}}
|
||||
gantt
|
||||
section Section
|
||||
Completed :done, des1, 2014-01-06,2014-01-08
|
||||
Active :active, des2, 2014-01-07, 3d
|
||||
Parallel 1 : des3, after des1, 1d
|
||||
Parallel 2 : des4, after des1, 1d
|
||||
Parallel 3 : des5, after des3, 1d
|
||||
Parallel 4 : des6, after des4, 1d
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram to mermaid
|
||||
excludes weekdays 2014-01-10
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Class
|
||||
|
|
|
@ -3,6 +3,6 @@
|
|||
{{ $data := replaceRE "(^\\s+```)" "" .Inner -}}
|
||||
{{ replaceRE "(```\\s+$)" "" $data -}}
|
||||
</div>
|
||||
{{ else }}
|
||||
{{ errorf "Set `mermaid = true` in `./config/_default/params.toml`"}}
|
||||
{{ end }}
|
||||
{{ else -}}
|
||||
{{ errorf "Set `mermaid = true` in `./config/_default/params.toml`" }}
|
||||
{{ end -}}
|
||||
|
|
Loading…
Reference in New Issue