feat: add mermaid code fences usage

This commit is contained in:
Henk Verlinde 2021-07-01 16:21:03 +02:00
parent 6a87dc6e29
commit 7d6df42519
8 changed files with 50 additions and 17 deletions

View File

@ -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', {

View File

@ -7,4 +7,5 @@ var config = {
document.addEventListener('DOMContentLoaded', () => {
mermaid.initialize(config);
mermaid.init(undefined, '.language-mermaid');
});

View File

@ -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";

View File

@ -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;
}

View File

@ -60,3 +60,7 @@ pre code:hover {
pre code::-webkit-scrollbar-thumb:hover {
background: $gray-500;
}
code.language-mermaid {
background: none;
}

View File

@ -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

View File

@ -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 -}}