a post with echarts
This is an example post with some echarts code.
```echarts
{
"title": {
"text": "ECharts Getting Started Example"
},
"responsive": true,
"tooltip": {},
"legend": {
"top": "30px",
"data": ["sales"]
},
"xAxis": {
"data": ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"]
},
"yAxis": {},
"series": [
{
"name": "sales",
"type": "bar",
"data": [5, 20, 36, 10, 10, 20]
}
]
}
```
Which generates:
a post with chart.js
This is an example post with some chart.js code.
```chartjs
{
"type": "line",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets": [
{
"label": "# of bugs",
"fill": false,
"lineTension": 0.1,
"backgroundColor": "rgba(75,192,192,0.4)",
"borderColor": "rgba(75,192,192,1)",
"borderCapStyle": "butt",
"borderDash": [],
"borderDashOffset": 0,
"borderJoinStyle": "miter",
"pointBorderColor": "rgba(75,192,192,1)",
"pointBackgroundColor": "#fff",
"pointBorderWidth": 1,
"pointHoverRadius": 5,
"pointHoverBackgroundColor": "rgba(75,192,192,1)",
"pointHoverBorderColor": "rgba(220,220,220,1)",
"pointHoverBorderWidth": 2,
"pointRadius": 1,
"pointHitRadius": 10,
"data": [
65,
59,
80,
81,
56,
55,
40
],
"spanGaps": false
}
]
},
"options": {}
}
```
This is how it looks like:
a post with TikZJax
This is an example post with TikZ code. TikZJax converts script tags (containing TikZ code) into SVGs.
a post with bibliography
This post shows how to add bibliography to simple blog posts. We support every citation style that jekyll-scholar does. That means simple citation like { % cite einstein1950meaning % }, multiple citations like { % cite einstein1950meaning einstein1905movement % }, long references like { % reference einstein1905movement % } or also quotes:
{ % quote einstein1905electrodynamics % } Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing. { % endquote % }
a post with jupyter notebook
To include a jupyter notebook in a post, you can use the following code:
{% raw %}
{::nomarkdown}
{ % assign jupyter_path = 'assets/jupyter/blog.ipynb' | relative_url %}
{ % capture notebook_exists %}{ % file_exists assets/jupyter/blog.ipynb % }{ % endcapture %}
{ % if notebook_exists == 'true' %}
{ % jupyter_notebook jupyter_path % }
{ % else %}
<p>Sorry, the notebook you are looking for does not exist.</p>
{ % endif %}
{:/nomarkdown}
{% endraw %}
a post with custom blockquotes
This post shows how to add custom styles for blockquotes. Based on jekyll-gitbook implementation.
We decided to support the same custom blockquotes as in jekyll-gitbook, which are also found in a lot of other sites’ styles. The styles definitions can be found on the _base.scss file, more specifically:
/* Tips, warnings, and dangers */
.post .post-content blockquote {
&.block-tip {
border-color: var(--global-tip-block);
background-color: var(--global-tip-block-bg);
p {
color: var(--global-tip-block-text);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--global-tip-block-title);
}
}
&.block-warning {
border-color: var(--global-warning-block);
background-color: var(--global-warning-block-bg);
p {
color: var(--global-warning-block-text);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--global-warning-block-title);
}
}
&.block-danger {
border-color: var(--global-danger-block);
background-color: var(--global-danger-block-bg);
p {
color: var(--global-danger-block-text);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--global-danger-block-title);
}
}
}
A regular blockquote can be used as following:
a post with table of contents on a sidebar
This post shows how to add a table of contents as a sidebar.
Adding a Table of Contents
To add a table of contents to a post as a sidebar, simply add
toc:
sidebar: left
to the front matter of the post. The table of contents will be automatically generated from the headings in the post. If you wish to display the sidebar to the right, simply change left to right.
a post with audios
This is an example post with audios. It supports local audio files.
a post with videos
This is an example post with videos. It supports local video files.
It does also support embedding videos from different sources. Here are some examples:
displaying beautiful tables with Bootstrap Tables
Using markdown to display tables is easy.
Simple Example
First, add the following to the post’s front matter
pretty_table: true
Then, the following syntax
| Left aligned | Center aligned | Right aligned |
| :----------- | :------------: | ------------: |
| Left 1 | center 1 | right 1 |
| Left 2 | center 2 | right 2 |
| Left 3 | center 3 | right 3 |
will generate