The following contents should be invisible in home/archive page.

The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don’t forget to redefine the style by yourself.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. ~~Deleted text~~ tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet.

List Types

Definition List (dl)

Definition List Title: This is a definition list division.

Ordered List (ol)

List Item 1
List Item 2
List Item 3

Unordered List (ul)

List Item 1
List Item 2
List Item 3

Table

Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

Link

Clicking on the link should open Google in a new tab or window.

Block Quote

This post is used for testing tag plugins. See docs for more info.

Normal blockquote

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Code Block

Inline code block

This is a inline code block: python, print 'helloworld'.

Normal code block

alert('Hello World!');

print "Hello world"

Highlight code block

print "Hello world"

def foo
  puts 'foo'
end


1
2
3

def foo
  puts 'foo'
end

Gist

Image

Math

One of the rewards of switching my website to Jekyll is the ability to support MathJax, which means I can write LaTeX-like equations that get nicely displayed in a web browser, like this one $ \sqrt{\frac{n!}{k!(n-k)!}} $ or this one $ x^2 + y^2 = r^2 $.

What’s MathJax?

If you check MathJax website (www.mathjax.org) you’ll see that it is an open source JavaScript display engine for mathematics that works in all browsers.

How to implement MathJax with Jekyll

I followed the instructions described by Dason Kurkiewicz for using Jekyll and Mathjax.

Here are some important details. I had to modify the Ruby library for Markdown in my _config.yml file. Now I’m using redcarpet so the corresponding line in the configuration file is: markdown: redcarpet

To load the MathJax javascript, I added the following lines in my layout post.html (located in my folder _layouts)

<script type="text/javascript"
    src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

Of course you can choose a different file location in your jekyll layouts.

Note that by default, the tex2jax preprocessor defines the LaTeX math delimiters, which are \$...\$ for in-line math, and \\[...\\] for displayed equations. It also defines the TeX delimiters $$...$$ for displayed equations, but it does not define $...$ as in-line math delimiters. To enable in-line math delimiter with $...$ , please use the following configuration:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
  }
});
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

A Couple of Examples

Here’s a short list of examples. To know more about the details behind MathJax, you can always checked the provided documentation available at https://docs.mathjax.org/en/latest/

Let’s try a first example. Here’s a dummy equation:

\[a^2 + b^2 = c^2\]

How do you write such expression? Very simple: using double dollar signs

$$a^2 + b^2 = c^2$$

To display inline math use \$ ... \$ like this \$ sin(x^2) \$ which gets rendered as $ sin(x^2) $

Here’s another example using type \mathsf

$$ \mathsf{Data = PCs} \times \mathsf{Loadings} $$

which gets displayed as

\[\mathsf{Data = PCs} \times \mathsf{Loadings}\]

Or even better:

\\[ \mathbf{X} = \mathbf{Z} \mathbf{P^\mathsf{T}} \\]

is displayed as

\[ \mathbf{X} = \mathbf{Z} \mathbf{P^\mathsf{T}} \]

If you want to use subscripts like this $ \mathbf{X}_{n,p} $ you need to scape the underscores with a backslash like so \mathbf{X}\_{n,p}:

$$ \mathbf{X}\_{n,p} = \mathbf{A}\_{n,k} \mathbf{B}\_{k,p} $$

will be displayed as

\[ \mathbf{X}_{n,p} = \mathbf{A}_{n,k} \mathbf{B}_{k,p} \]

Emoji

This is an emoji test. lol.

See emoji cheat sheet for more detail : https://www.webpagefx.com/tools/emoji-cheat-sheet/.

:bowtie:

Highlight

This is a highlight test.

Normal block

alert('Hello World!');

print 'helloworld'

Highlight block

alert( 'Hello, world!' );

print 'helloworld'

def foo
  puts 'foo'
end

def foo
  puts 'foo'
end


1
2
3

def foo
  puts 'foo'
end

#include <iostream>

using namespace std;

void foo(int arg1, int arg2)
{

}

int main()
{
  string str;
  foo(1, 2);
  cout << "Hello World" << endl;
  return 0;
}

Misc Stuff - abbr, acronym, sub, sup, etc.

Lorem ^superscript dolor _subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE