nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

mermaid: fix Gantt chart width #365

Browse source
This commit is contained in:
Sören Weber 2022-11-05 13:00:22 +01:00
parent 07fe4f5c73
commit 5efdd8db6e
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
3 changed files with 24 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
exampleSite/content/shortcodes/math.en.md
View file

@ -107,19 +107,19 @@ Inline math is generated if you use a single `$` as a delimiter around your form
Inline math is generated if you use a single `$` as a delimiter around your formulae: {{< math >}}$\sqrt{3}${{< /math >}} Inline math is generated if you use a single `$` as a delimiter around your formulae: {{< math >}}$\sqrt{3}${{< /math >}}
### Blocklevel Math with Left Alignment ### Blocklevel Math with Right Alignment
````md ````md
If you delimit your formulae by two consecutive `$$` it generates a new block. If you delimit your formulae by two consecutive `$$` it generates a new block.
{{</* math align="left" */>}} {{</* math align="right" */>}}
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$ $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
{{</* /math */>}} {{</* /math */>}}
```` ````
If you delimit your formulae by two consecutive `$$` it generates a new block. If you delimit your formulae by two consecutive `$$` it generates a new block.
{{< math align="left" >}} {{< math align="right" >}}
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$ $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
{{< /math >}} {{< /math >}}

10
exampleSite/content/shortcodes/mermaid.en.md
View file

@ -116,7 +116,7 @@ mermaidInitialize = "{ \"theme\": \"dark\" }"
### Flowchart with Non-Default Mermaid Theme ### Flowchart with Non-Default Mermaid Theme
````go ````go
{{</* mermaid align="left" */>}} {{</* mermaid */>}}
%%{init:{"theme":"forest"}}%% %%{init:{"theme":"forest"}}%%
graph LR; graph LR;
A[Hard edge] -->|Link text| B(Round edge) A[Hard edge] -->|Link text| B(Round edge)
@ -126,7 +126,7 @@ graph LR;
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ````
{{< mermaid align="left" >}} {{< mermaid >}}
%%{init:{"theme":"forest"}}%% %%{init:{"theme":"forest"}}%%
graph LR; graph LR;
A[Hard edge] -->|Link text| B(Round edge) A[Hard edge] -->|Link text| B(Round edge)
@ -207,10 +207,10 @@ gantt
Add to Mermaid :1d Add to Mermaid :1d
{{< /mermaid >}} {{< /mermaid >}}
### Class ### Class Diagram Aligned to the Right
````go ````go
{{</* mermaid */>}} {{</* mermaid align="right" */>}}
classDiagram classDiagram
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04 Class03 *-- Class04
@ -228,7 +228,7 @@ classDiagram
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ````
{{< mermaid >}} {{< mermaid align="right" >}}
classDiagram classDiagram
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04 Class03 *-- Class04

29
static/css/theme.css
View file

@ -1466,14 +1466,14 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
display: inline; display: inline;
} }
.math.align-center > mjx-container{
text-align: center !important;
}
.math.align-left > mjx-container{ .math.align-left > mjx-container{
text-align: left !important; text-align: left !important;
} }
.math.align-center > mjx-container{
text-align: center !important;
}
.math.align-right > mjx-container{ .math.align-right > mjx-container{
text-align: right !important; text-align: right !important;
} }
@ -1524,17 +1524,20 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
} }
*/ */
.align-right { .mermaid-container .align-right > * {
display: flex; display: block;
justify-content: right; margin-left: auto;
margin-right: 0;
} }
.align-center { .mermaid-container .align-center > * {
display: flex; display: block;
justify-content: center; margin-left: auto;
margin-right: auto;
} }
.align-left { .mermaid-container .align-left > * {
display: flex; display: block;
justify-content: left; margin-left: 0;
margin-right: auto;
} }