Fly high
Jekyll provide flexible ways to write alert information in your markdown blogs. I choose the one contributed by tomjoht, which is the updated. Still, there is an order version, from parpersson, which was probably forked from tomjoht. The key point here is the css style predefined, and how to call them from your markdown files.
I failed to find “bs-callout” stype in my previous css files, after adding “customstyles.css” file downloaded from tomjoht to the head.html. All worked as expected.
1
2
3
<link rel="stylesheet" href="{{ "/css/customstyles.css" | prepend: site.baseurl }}">
Older version
Based on the order version, in order to use these alerts or callouts, put this include at the top of your page, just below your frontmatter, check here:
1
{% include linksref.html %}
Then, you could add note using the syntax:
1
2
{{note}} your note {{end}}
#Here, could change 'note' into 'tip','warning', or 'important'
A summary of this kind of usage:
| alert | code |
|---|---|
| note | {{note}} your note {{end}} |
| tip | {{tip}} your tip {{end}} |
| warning | {{warning}} your warning {{end}} |
| important | {{important}} your important info {{end}} |
Note: My note Test using capture
Tip: your tip
Warning: your warning
Important: your important info
And callouts below:
1
2
{{callout_default}} your **callout_default** content {{end}}
| callout | code |
|---|---|
| callout_default | {{callout_default}} your callout_default content {{end}} |
| callout_primary | {{callout_primary}} your callout_primary content {{end}} |
| callout_success | {{callout_success}} your callout_success content {{end}} |
| callout_primary | {{callout_primary}} your callout_primary content {{end}} |
| callout_warning | {{callout_warning}} your callout_warning content {{end}} |
| callout_info | {{callout_info}} your callout_info content {{end}} |
your callout_default content
your callout_primary content
your callout_success content
your callout_primary content
your callout_warning content
your callout_info content
New version
Alternatively, you could also include note.html where you want it. The new version is based from here:
1
{% include note.html content="Note alalallalala" %}
Note: Note alalallalala
And note with multiple lines using <br/><br/> tags:
Note: This is my note. All the content I type here is treated as a single paragraph.
Now I’m typing on a new line.
Now I’m typing on a new line.
Or if you want to include codes:
This is my note.
def foo(x):
return x+1
code for above:
1
2
3
4
5
6
7
8
9
{{site.data.alerts.note}}
<p>This is my note.</p>
<pre>
def foo(x):<br>
return x+1
</pre>
{{site.data.alerts.end}}
Other alerts:
Tip: tip alalallalala
Warning: warnings alalallalala
Important: important alalallalala
And callouts:
This is my callout. It has a border on the left whose color you define by passing a type parameter. I typically use this style of callout when I have more information that I want to share, often spanning multiple paragraphs.
Callouts with multiple lines:
Important information: This is my callout. It has a border on the left whose color you define by passing a type parameter. I typically use this style of callout when I have more information that I want to share, often spanning multiple paragraphs.
Here I am starting a new paragraph, because I have lots of information to share. You may wonder why I’m using line breaks instead of paragraph tags. This is because Kramdown processes the Markdown here as a span rather than a div (for whatever reason). Be grateful that you can be using Markdown at all inside of HTML. That’s usually not allowed in Markdown syntax, but it’s allowed here.
Here I am starting a new paragraph, because I have lots of information to share. You may wonder why I’m using line breaks instead of paragraph tags. This is because Kramdown processes the Markdown here as a span rather than a div (for whatever reason). Be grateful that you can be using Markdown at all inside of HTML. That’s usually not allowed in Markdown syntax, but it’s allowed here.
1
2
{% include callout.html content="**Important information**: This is my callout. <br/><br/>Here I am starting a new paragraph." type="primary" %}
# type could be danger, default, primary, success, info, and warning.
Callouts summary:
| Property | description |
|---|---|
| content | The content for the callout. |
| type | The style for the callout. Options are danger, default, primary, success, info, and warning. |
This is danger callout.
This is default callout.
This is primary callout.
This is success callout.
This is info callout.
This is warning callout.
Alert test
Note:
This is a note alert.
It can be used to make an aside without disrupting the flow of the main document.
It can be used to make an aside without disrupting the flow of the main document.
Tip:
This is a TIP alert.
It can be used to make an aside without disrupting the flow of the main document.
It can be used to make an aside without disrupting the flow of the main document.
Important:
This is a Important alert.
It can be used to make an aside without disrupting the flow of the main document.
It can be used to make an aside without disrupting the flow of the main document.
Warning:
This is a Warning alert.
It can be used to make an aside without disrupting the flow of the main document.
It can be used to make an aside without disrupting the flow of the main document.
Code for the alert test:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="alert alert-info" role="alert" markdown="span"><i class="fa fa-info-circle"></i> <b>Note:</b>
This is a note alert. <br/><br/>It can be used to make an aside without disrupting the flow of the main document.
</div>
<div class="alert alert-success" role="alert" markdown="span"><i class="fa-check-square-o"></i> <b>Tip:</b>
This is a <b>TIP</b> alert. <br/><br/>It can be used to make an aside without disrupting the flow of the main document.
</div>
<div class="alert alert-warning" role="alert" markdown="span"><i class="fa fa-warning"></i> <b>Important:</b>
This is a Important alert. <br/><br/>It can be used to make an aside without disrupting the flow of the main document.
</div>
<div class="alert alert-danger" role="alert" markdown="span"><i class="fa fa-exclamation-circle"></i> <b>Warning:</b>
This is a Warning alert. <br/><br/>It can be used to make an aside without disrupting the flow of the main document.
</div>
Callout test
This is a callout.
It can be used to make an aside without disrupting the flow of the main document.
It can be used to make an aside without disrupting the flow of the main document.
code for the callout test:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="bs-callout bs-callout-info" markdown="span">
This is a callout. <br/><br/>It can be used to make an aside without disrupting the flow of the main document.
</div>
<!--
Other bs-callout-info include:
"bs-callout bs-callout-danger"
"bs-callout bs-callout-default"
"bs-callout bs-callout-primary"
"bs-callout bs-callout-success"
"bs-callout bs-callout-info">
"bs-callout bs-callout-warning">
-->
