FLYNNLABAboutMeCodingActivityStudy 2024초등수학
Ghost Extension - UML, Math
2017-09-20
ghost, markdown, uml, math

Markdown만으로 컨텐츠를 표현하기가 힘들었다. 다행이 찾아보니 text를 UML이나 Math표현으로 변환하는 툴이 있었고 이를 적용해보았다.

Code Injection

Blog Header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.0/mermaid.min.css" />

Blog Footer

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.0/mermaid.min.js"></script>
<script>
mermaid.init({}, ".language-mermaid");
</script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script>
MathJax.Hub.Config({tex2jax: {inlineMath: [["$", "$"], ["\\(", "\\)"]],processEscapes: true}});
</script>

Usages

Math

$$\epsilon = \frac{2a}{1-b^2}$$

$$\epsilon = \frac{2a}{1-b^2}$$

Sequence Diagram

 ```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

Flow

 ```mermaid
%% Example of graph
  graph TD
    Start --> Stop
```mermaid
%% Example of graph
  graph TD
    Start --> Stop

Gantt

 ```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

Resource