Typography Elements in One

Let’s start with a informative paragraph. This text is bolded. But not this one! How about italic text? Cool right? Ok, let’s combine them together. Yeah, that’s right! I have code to highlight, so <p>This is my code</p>. What a nice! Good people will hyperlink away, so here we go or http://www.example.com.

This Wall of Text is Right-aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus quam et interdum dignissim. Nulla elementum pulvinar facilisis. Phasellus eget ultricies orci. Aenean ultrices mollis lorem, imperdiet imperdiet nisi. In at nibh elit. Nullam pulvinar tincidunt nisl, et tempus justo maximus sit amet. Integer ac molestie ante. Vestibulum nec lorem efficitur, laoreet tortor id, vestibulum neque. Sed in semper turpis. Maecenas mattis tempor massa. In volutpat ligula ligula, vitae semper nisi maximus a. Cras sit amet efficitur justo. Vestibulum pulvinar feugiat enim sed efficitur.

But Check This Out, This Wall of Text is Centered

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus quam et interdum dignissim. Nulla elementum pulvinar facilisis. Phasellus eget ultricies orci. Aenean ultrices mollis lorem, imperdiet imperdiet nisi. In at nibh elit. Nullam pulvinar tincidunt nisl, et tempus justo maximus sit amet. Integer ac molestie ante. Vestibulum nec lorem efficitur, laoreet tortor id, vestibulum neque. Sed in semper turpis. Maecenas mattis tempor massa. In volutpat ligula ligula, vitae semper nisi maximus a. Cras sit amet efficitur justo. Vestibulum pulvinar feugiat enim sed efficitur.

Finally, This Wall of Text is Justified

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus quam et interdum dignissim. Nulla elementum pulvinar facilisis. Phasellus eget ultricies orci. Aenean ultrices mollis lorem, imperdiet imperdiet nisi. In at nibh elit. Nullam pulvinar tincidunt nisl, et tempus justo maximus sit amet. Integer ac molestie ante. Vestibulum nec lorem efficitur, laoreet tortor id, vestibulum neque. Sed in semper turpis. Maecenas mattis tempor massa. In volutpat ligula ligula, vitae semper nisi maximus a. Cras sit amet efficitur justo. Vestibulum pulvinar feugiat enim sed efficitur.

Headings H1 to H6

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Footnote

Let’s say you have text that you want to refer with a footnote, you can do that too! This is an example for the footnote number one.¹ You can even add more footnotes, with link!²

Blockquote

This theme supports nested blockquotes, like this,

Start by doing what’s necessary; then do what’s possible; and suddenly you are doing the impossible.

– Francis of Assisi

Ok, boomer.

– Someone on the Internet

You’re canceled.

– Someone on Twitter, most probably

List Items

1. First order list item
2. Second item
3. Ordered list can also contains list
   • Like this
   • And this one

• Unordered list can use asterisks
• Or minuses
• Or pluses

Code Blocks, or Block of Codes

case class User(name: String, age: Int)

val users: Seq[User] = Seq(User("Hilman", 24), User("Tamado", 23))

val userList: Seq[String] =
  for (user <- users)
    yield s"${user.name} is ${user.age} years old"

userList.foreach(println)

s = "Python syntax highlighting"

def print_nice(s):
    print(s)

print_nice(s)

No language indicated, so defaulting to HTML.
But let's throw in a <b>tag</b>.

1
2
3
{% highlight html linenos %}
...
{% endhighlight %}

See? The code is now line numbered with linenos.

And with code like this, we can add caption to our codes.

{% capture code_1 %}
...
{% endcapture %}
{% include code.html content=code_1 caption='This is *pagination*' %}

Example:

1
2
3
4
5
6
7
8
<nav class="pagination" role="navigation">
  {% if page.previous %}
    <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
  {% endif %}
  {% if page.next %}
    <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
  {% endif %}
</nav><!-- /.pagination -->

Table

Table 1: With Alignment

Table 2: With Typography Elements

Table 3: Super Long and With Caption

Horizontal Line

The HTML <hr> element is for creating a “thematic break” between paragraph-level elements. In markdown, you can create a <hr> with any of the following:

• ___: three consecutive underscores
• ---: three consecutive dashes
• ***: three consecutive asterisks

renders to:

Media

YouTube Embedded Iframe

Image

Left aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus quam et interdum dignissim. Nulla elementum pulvinar facilisis. Phasellus eget ultricies orci. Aenean ultrices mollis lorem, imperdiet imperdiet nisi. In at nibh elit. Nullam pulvinar tincidunt nisl, et tempus justo maximus sit amet. Integer ac molestie ante. Vestibulum nec lorem efficitur, laoreet tortor id, vestibulum neque. Sed in semper turpis. Maecenas mattis tempor massa. In volutpat ligula ligula, vitae semper nisi maximus a. Cras sit amet efficitur justo. Vestibulum pulvinar feugiat enim sed efficitur.

Right aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus quam et interdum dignissim. Nulla elementum pulvinar facilisis. Phasellus eget ultricies orci. Aenean ultrices mollis lorem, imperdiet imperdiet nisi. In at nibh elit. Nullam pulvinar tincidunt nisl, et tempus justo maximus sit amet. Integer ac molestie ante. Vestibulum nec lorem efficitur, laoreet tortor id, vestibulum neque. Sed in semper turpis. Maecenas mattis tempor massa. In volutpat ligula ligula, vitae semper nisi maximus a. Cras sit amet efficitur justo. Vestibulum pulvinar feugiat enim sed efficitur.

Figure template:

Maps

Soundcloud

Spotify Playlist

That’s it! Happy blogging!