a post with videos, audios, tweets, maths, codes and custom blockquotes
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:
Audios
Tweet
An example of displaying a tweet:
jekyll-twitter-plugin (1.0.0): A Liquid tag plugin for Jekyll that renders Tweets from Twitter API http://t.co/m4EIQPM9h4
— RubyGems (@rubygems) October 5, 2014
Timeline
An example of pulling from a timeline:
Additional Details
For more details on using the plugin visit: jekyll-twitter-plugin
Maths
This theme supports rendering beautiful math in inline and display modes using MathJax 3 engine. You just need to surround your math expression with $$
, like $$ E = mc^2 $$
. If you leave it inside a paragraph, it will produce an inline expression, just like \(E = mc^2\).
To use display mode, again surround your expression with $$
and place it as a separate paragraph. Here is an example:
You can also use \begin{equation}...\end{equation}
instead of $$
for display mode math. MathJax will automatically number equations:
\begin{equation} \label{eq:cauchy-schwarz} \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \end{equation}
and by adding \label{...}
inside the equation environment, we can now refer to the equation using \eqref
.
Note that MathJax 3 is a major re-write of MathJax that brought a significant improvement to the loading and rendering speed, which is now on par with KaTeX.
Codes
This theme implements a built-in Jekyll feature, the use of Rouge, for syntax highlighting. It supports more than 100 languages. This example is in C++. All you have to do is wrap your code in markdown code tags:
```c++
code code code
```
int main(int argc, char const \*argv[])
{
string myString;
cout << "input a string: ";
getline(cin, myString);
int length = myString.length();
char charArray = new char * [length];
charArray = myString;
for(int i = 0; i < length; ++i){
cout << charArray[i] << " ";
}
return 0;
}
For displaying code in a list item, you have to be aware of the indentation, as stated in this Stackoverflow answer. You must indent your code by (3 * bullet_indent_level) spaces. This is because kramdown (the markdown engine used by Jekyll) indentation for the code block in lists is determined by the column number of the first non-space character after the list item marker. For example:
1. We can put fenced code blocks inside nested bullets, too.
1. Like this:
```c
printf("Hello, World!");
```
2. The key is to indent your fenced block in the same line as the first character of the line.
Which displays:
- We can put fenced code blocks inside nested bullets, too.
- Like this:
printf("Hello, World!");
- The key is to indent your fenced block in the same line as the first character of the line.
- Like this:
By default, it does not display line numbers. If you want to display line numbers for every code block, you can set kramdown.syntax_highlighter_opts.block.line_numbers
to true in your _config.yml
file.
If you want to display line numbers for a specific code block, all you have to do is wrap your code in a liquid tag:
{% highlight c++ linenos %}
code code code
{% endhighlight %}
The keyword linenos
triggers display of line numbers. Produces something like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
int main(int argc, char const \*argv[])
{
string myString;
cout << "input a string: ";
getline(cin, myString);
int length = myString.length();
char charArray = new char * [length];
charArray = myString;
for(int i = 0; i < length; ++i){
cout << charArray[i] << " ";
}
return 0;
}
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:
> 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
Enjoy Reading This Article?
Here are some more articles you might like to read next: