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:
> This is a regular blockquote
> and it can be used as usual
This is a regular blockquote and it can be used as usual
These custom styles can be used by adding the specific class to the blockquote, as follows:
> ##### TIP
>
> A tip can be used when you want to give advice
> related to a certain content.
{: .block-tip }
TIP
A tip can be used when you want to give advice related to a certain content.
> ##### WARNING
>
> This is a warning, and thus should
> be used when you want to warn the user
{: .block-warning }
WARNING
This is a warning, and thus should be used when you want to warn the user
> ##### DANGER
>
> This is a danger zone, and thus should
> be used carefully
{: .block-danger }
]]>DANGER
This is a danger zone, and thus should be used carefully
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
.
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. Pinterest DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade cold-pressed meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. Pinterest DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade cold-pressed meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.
If you want to learn more about how to customize the table of contents of your sidebar, you can check the bootstrap-toc documentation. Notice that you can even customize the text of the heading that will be displayed on the sidebar.
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. Pinterest DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade cold-pressed meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. Pinterest DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade cold-pressed meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.
]]>It does also support embedding videos from different sources. Here are some examples:
| Left aligned | Center aligned | Right aligned |
| :----------- | :------------: | ------------: |
| Left 1 | center 1 | right 1 |
| Left 2 | center 2 | right 2 |
| Left 3 | center 3 | right 3 |
That will generate:
Left aligned | Center aligned | Right aligned |
---|---|---|
Left 1 | center 1 | right 1 |
Left 2 | center 2 | right 2 |
Left 3 | center 3 | right 3 |
It is also possible to use HTML to display tables. For example, the following HTML code will display a table with Bootstrap Table, loaded from a JSON file:
<table
id="table"
data-toggle="table"
data-url="{{ '/assets/json/table_data.json' | relative_url }}">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
ID | Item Name | Item Price |
---|
By using Bootstrap Table it is possible to create pretty complex tables, with pagination, search, and more. For example, the following HTML code will display a table, loaded from a JSON file, with pagination, search, checkboxes, and header/content alignment. For more information, check the documentation.
<table
data-click-to-select="true"
data-height="460"
data-pagination="true"
data-search="true"
data-toggle="table"
data-url="{{ '/assets/json/table_data.json' | relative_url }}">
<thead>
<tr>
<th data-checkbox="true"></th>
<th data-field="id" data-halign="left" data-align="center" data-sortable="true">ID</th>
<th data-field="name" data-halign="center" data-align="right" data-sortable="true">Item Name</th>
<th data-field="price" data-halign="right" data-align="left" data-sortable="true">Item Price</th>
</tr>
</thead>
</table>
ID | Item Name | Item Price |
---|
To add a table of contents to a post, simply add
toc:
beginning: true
to the front matter of the post. The table of contents will be automatically generated from the headings in the post.
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. Pinterest DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade cold-pressed meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. Pinterest DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade cold-pressed meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.
If you want to learn more about how to customize the table of contents, you can check the jekyll-toc repository.
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. Pinterest DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade cold-pressed meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. Pinterest DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade cold-pressed meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.
]]>Note: different diagram-generation packages require external dependencies to be installed on your machine. Also, be mindful of that because of diagram generation the fist time you build your Jekyll website after adding new diagrams will be SLOW. For any other details, please refer to jekyll-diagrams README.
Install mermaid using node.js
package manager npm
by running the following command:
npm install -g mermaid.cli
The diagram below was generated by the following code:
{% mermaid %}
sequenceDiagram
participant John
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
{% endmermaid %}