Theme Demo

Page to showcase the theme backing this site. Also for testing purpose.

Heading #1

The world’s fastest framework for building websites

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

Heading #2

Nam pretium faucibus ipsum, sit amet tincidunt augue vulputate nec. Donec consectetur sit amet justo vel vehicula. Fusce quis tempor felis. Maecenas viverra pulvinar sodales. Cras a hendrerit libero. Sed imperdiet non mauris luctus facilisis.
Duis at tortor id est lacinia egestas eu eget elit. Mauris dapibus augue ac maximus fermentum. Maecenas consectetur ligula eget egestas rutrum. Mauris tempor pellentesque odio, vel ornare ex rhoncus ac. Donec consectetur pulvinar ante, sed elementum mi consectetur id.
Donec at turpis sit amet mauris tempus congue.

Nulla facilisi. Sed arcu tellus, volutpat et sollicitudin eget, varius in metus. Vestibulum hendrerit eu arcu a maximus. Nam arcu metus, laoreet in ligula pharetra, euismod rutrum urna. Vestibulum vel faucibus dui. Curabitur facilisis vehicula ex. Integer nec ligula convallis, dapibus erat vitae, ultricies quam. Maecenas sit amet massa ultricies, faucibus quam vitae, ultrices turpis.

Heading #3

Nam non pharetra lectus, gravida lacinia eros. Ut eleifend enim pulvinar est luctus posuere non id leo. Vivamus nibh libero, rutrum eu pretium ac, scelerisque ac risus. Fusce aliquam porta elementum. Quisque non nisi at nisl facilisis porttitor iaculis eu sapien. Ut congue lacinia posuere. Proin facilisis metus sed diam commodo tristique.

Heading #4

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…” “There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain…”

Lists

Ordered list

  1. Strong Title immediately followed by text
    Nam non pharetra lectus, gravida lacinia eros. Ut eleifend enim pulvinar est luctus posuere non id leo. Vivamus nibh libero, rutrum eu pretium ac, scelerisque ac risus. Fusce aliquam porta elementum. Quisque non nisi at nisl facilisis porttitor iaculis eu sapien. Ut congue lacinia posuere. Proin

    1. Ordered list #1 with DOM strucure ul>li*2
    2. Ordered list #2 with DOM strucure ul>li*2
  2. Itatic Title followed by lines ipsum quia dolor sit amet, consectetur ipsum dolor sit amet, consectetur ipsum quia dolor

    • Unordered list #1 with each <li> wrapped within a <p> DOM structure: ul>(li>p)*2

    • Unordered list #2 with each <li> wrapped within a <p> DOM structure: ul>(li>p)*2

  3. Ordered list #1

  4. Ordered list #2

Unordered list

  • Strong Title immediately followed by text Nam non pharetra lectus, gravida lacinia eros. Ut eleifend enim pulvinar est luctus posuere non id leo. Vivamus nibh libero, rutrum eu pretium ac, scelerisque ac risus. Fusce aliquam porta elementum. Quisque non nisi at nisl facilisis porttitor iaculis eu sapien. Ut congue lacinia posuere. Proin

    1. Ordered list #1
    2. Ordered list #2
  • Itatic Title followed by lines ipsum quia dolor sit amet, consectetur ipsum dolor sit amet, consectetur ipsum quia dolor

    • Unordered list #1
    • Unordered list #2
  • Unordered list #1

  • Unordered list #2

Code

Inline code <code> embeded in normal text lines.

Swift

Use standard code fence markdown syntax.

import RxSwift
import RxCocoa

let observable = Driver.just(1)
  .flatMap { num -> Driver<Bool> in
    return validate(num)
  }
  .flatMap { num -> Driver<String> in
    return request(num)
  }
  .flatMap { num -> Driver<()> in
    return postValidate(num)
  }

Javascript

Use shortcode highlight, turn on line number with custom start number, and line highlighting.

199$(document).ready(function() {
200  $(window).scroll(function() {
201    $("#TableOfContents a").removeClass("current")
202    currentAnchor().addClass("current")
203  })
204});
205
206function tocItem(anchor) {
207  return $("[href=\"" + anchor + "\"]")
208}
209
210function heading(anchor) {
211  return $("[id=" + anchor.substr(1) + "]")
212}
213

Python

import os, sys
from . import util

def foo():
    for x in range(1, 101):
	start_index_fizz = (x % 3) * 4
	f = "fizz"[start_index_fizz::]
	start_index_buzz = (x % 5) * 4
	b = "buzz"[start_index_buzz::]
	print ((f + b) or x)

Go

// GetTitleFunc returns a func that can be used to transform a string to
// title case.
//
// The supported styles are
//
// - "Go" (strings.Title)
// - "AP" (see https://www.apstylebook.com/)
// - "Chicago" (see http://www.chicagomanualofstyle.org/home.html)
//
// If an unknown or empty style is provided, AP style is what you get.
func GetTitleFunc(style string) func(s string) string {
  switch strings.ToLower(style) {
  case "go":
    return strings.Title
  case "chicago":
    tc := transform.NewTitleConverter(transform.ChicagoStyle)
    return tc.Title
  default:
    tc := transform.NewTitleConverter(transform.APStyle)
    return tc.Title
  }
}

Table

Head Column #1 Head Column #2 Head Column #3
normal text emphasis strong text
inlined code underline text link
strike line Cell Cell
normal text emphasis strong text
inlined code underline text link
strike line Cell Cell

Use markdown to control cell text alignment.

Default aligned Centered Right-aligned
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

Link

I’m an inline-style link

I’m an inline-style link with title

I’m a reference-style link

I’m a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself.

URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

Blockquotes

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Shortcodes

Youtube

Use the youtube shortcode.

Cross reference

Click the URLs to check if the shortcode works.

Embeding

CodePen code

See the Pen BPJdar by Mudox (@mudox) on CodePen.

Compare with locally rendered code box using code fence syntax. Left and rigtht sides are aligned to the local code box.

import os, sys
from . import util

def foo():
    for x in range(1, 101):
	start_index_fizz = (x % 3) * 4
	f = "fizz"[start_index_fizz::]
	start_index_buzz = (x % 5) * 4
	b = "buzz"[start_index_buzz::]
	print ((f + b) or x)

JSFiddle code

Left and rigtht sides are aligned to the local code box.