This is a page, trying to see if it is working.
Context
- Test of
Mermaidinjekyll - How to write fomula by
MathJaxinjekyll - How to add a Table of Context in
jekyll
Test of Mermaid in jekyll
The origin jekyll does not support mermaid. To do this, mermaid is included by:
1
<script src="mermaid.full.min.js"></script>
An example of a flowchart
Here is the source code that should be put into the .md blog file.
1
2
3
4
5
6
7
<div class="mermaid">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</div>
Demonstration:
Meanwhile in normal markdown, you can write:
1
2
3
4
5
6
7
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
An example of a gantt diagram
Here is the source code that should be put into the .md blog file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
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
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
</div>
Demonstration:
These graphic functions aid to present project works and etc.
How to write fomula by MathJax in jekyll
Add MathJax.js into the head of webpage
1
2
<script type="text/javascript" async src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
Use LaTeX to write fomula
- To use the common form in
LaTeX, like using$to quote the fomula:$Math_Fomula$, this following line should be added into the webpage.
1
2
3
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
- Then, just write the
.mdfiles as you do in themarkdownsoftwares likeTypora, etc.
Another important stuff included in this page is to build a simple and straightforward context of a markdown blog.
How to add a Table of Context in jekyll
The markdown setting in jekyll, espicially for Github page is:
1
2
3
markdown: kramdown
kramdown:
input: GFM #Github Flavored Markdown
kramkown supports toc by using:
1
2
* There will be a ToC (and this line will not appear)
{:toc}
Add the two lines into the position where you want to put the ToC.
The table will look just as the top of this page content.
There should be only one ToC at most.