Style guide for writing posts on my blog

A paragraph looks like this — dolor amet cray stumptown fingerstache neutra food truck seitan poke cardigan waistcoat VHS snackwave celiac hella. Godard seitan shoreditch flexitarian next level trust fund man braid vegan listicle keytar bitters. Disrupt cray fashion axe unicorn lomo shaman poke glossier keffiyeh snackwave austin tattooed seitan hexagon lo-fi. Lumbersexual irony vaporware, butcher shaman.

君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，君莫停。 与君歌一曲，请君为我侧耳听。 钟鼓馔玉不足贵，但愿长醉不复醒。 古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘， 呼儿将出换美酒，与尔同销万古愁。

Table of Contents (ToC)

- TOC
{:toc}

or

1. TOC
{:toc}

• Style guide for writing posts on my blog
  • Table of Contents (ToC)
  • Headings by default:
• H1 For example
  • H2 For example
    • H3 For example
      • H4 For example
        • H5 For example
          • H6 For example
  • Lists
    • Ordered list example:
    • Unordered list example:
    • Table
  • Quotes
    • A quote looks like this:
  • Custom Blocks
  • Syntax Highlighter
  • Footnotes
  • Inline Highlights
  • Images
  • Youtube Embed
  • Vimeo Embed

Headings by default:

H1 For example

H2 For example

H3 For example

H4 For example

H5 For example

H6 For example

## Heading first level
### Heading second level
#### Heading third level

Lists

Ordered list example:

1. Poutine drinking vinegar bitters.
2. Coloring book distillery fanny pack.
3. Venmo biodiesel gentrify enamel pin meditation.
4. Jean shorts shaman listicle pickled portland.
5. Salvia mumblecore brunch iPhone migas.

1. Order list item 1
2. Order list item 1

Unordered list example:

• Bitters semiotics vice thundercats synth.
• Literally cred narwhal bitters wayfarers.
• Kale chips chartreuse paleo tbh street art marfa.
• Mlkshk polaroid sriracha brooklyn.
• Pug you probably haven’t heard of them air plant man bun.

* Unordered list item 1
* Unordered list item 2

Table

Quotes

A quote looks like this:

The longer I live, the more I realize that I am never wrong about anything, and that all the pains I have so humbly taken to verify my notions have only wasted my time!

George Bernard Shaw

> The longer I live, the more I realize that I am never wrong about anything, and that all the pains I have so humbly taken to verify my notions have only wasted my time!
>
> <cite>George Bernard Shaw</cite>

Custom Blocks

I also added Vuepress-style custom blocks for my own needs:

<div class="custom-block tip">
<p class="custom-block-title">TIP</p>
This is a tip.
</div>

<div class="custom-block warning">
<p class="custom-block-title">WARNING</p>
This is a warning.
</div>

<div class="custom-block danger">
<p class="custom-block-title">DANGER</p>
This is a danger.
</div>

Syntax Highlighter

  $('.top').click(function () {
    $('html, body').stop().animate({ scrollTop: 0 }, 'slow', 'swing');
  });
  $(window).scroll(function () {
    if ($(this).scrollTop() > $(window).height()) {
      $('.top').addClass("top-active");
    } else {
      $('.top').removeClass("top-active");
    };
  });

Footnotes

Here’s a simple footnote,¹ and here’s a longer one.²

Inline Highlights

Here are available inline highlights:

I’m Blue , I’m Yellow , I’m Purple , I’m Green !

Images

Gallery / Unsplash

  <div class="gallery-box">
    <div class="gallery">
      <img src="/images/metadata/501.jpg">
      <img src="/images/metadata/901.jpg">
      <img src="/images/metadata/509.jpg">
      <img src="/images/metadata/511.jpg">
      <img src="/images/metadata/520.jpg">
      <img src="/images/metadata/516.jpg">
      <img src="/images/metadata/517.jpg">
      <img src="/images/metadata/519.jpg">
      <img src="/images/metadata/521.jpg">
    </div>
    <em>Gallery / <a href="https://unsplash.com/" target="_blank">Unsplash</a></em>
  </div>

Minimalism

  ![](/images/metadata/140.jpg)
  *Minimalism*

Youtube Embed

  <iframe src="https://www.youtube.com/embed/Hd1_EXhr_fg" frameborder="0" allowfullscreen></iframe>

Vimeo Embed

  <iframe src="https://player.vimeo.com/video/107654760" width="640" height="360" frameborder="0" allowfullscreen></iframe>