πŸ“ Editing Guideline

This page is the guideline for editing articles on this site. It also serves as a typography test page. Remember that you can always write an article using markdown syntax and some extra snippets below.

Lorem ipsum dolor sit amet, fabulas tibique adversarium eu qui, has graece aeterno detracto ea, ei appareat tacimates invenire eos. No labitur inermis mei. Vel amet tacimates corrumpit ad, qui reque veritus at. Posse officiis reprehendunt vim id, nec in nominavi senserit. Ubique docendi deterruisset mei ea, his agam eirmod lobortis an.

Ex mea lorem iudicabit definiebas, ❀ ex dicam graeci recteque mea. Mel diceret mediocrem et, elitr feugiat vim no. Persius accusata recteque his ea, πŸŽ‰ ea veritus appetere ius. No his exerci alienum.

Heading

H1

H2

H3

H4

H5
H6
# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------

Text styling

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. Scratch this.

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

List

  1. First ordered list item
  2. Another item
    • Unordered sub-list.
  3. Actual numbers don’t matter, just that it’s a number
    1. Ordered sub-list
  4. And another item.

    You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we’ll use three here to also align the raw Markdown).

    To have a line break without a paragraph, you will need to use two trailing spaces. Note that this line is separate, but within the same paragraph. (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

  • Unordered list can use asterisks
  • Or minuses
  • Or pluses
1. First ordered list item
2. Another item
β‹…β‹…* Unordered sub-list. 
1. Actual numbers don't matter, just that it's a number
β‹…β‹…1. Ordered sub-list
4. And another item.

β‹…β‹…β‹…You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

β‹…β‹…β‹…To have a line break without a paragraph, you will need to use two trailing spaces.β‹…β‹…
β‹…β‹…β‹…Note that this line is separate, but within the same paragraph.β‹…β‹…
β‹…β‹…β‹…(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

* Unordered list can use asterisks
- Or minuses
+ Or pluses

Links

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.

[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[I'm a reference-style link][Arbitrary case-insensitive reference text]

[I'm a relative reference to a repository file](../blob/master/LICENSE)

[You can use numbers for reference-style link definitions][1]

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.

[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com

Code highlighting

Inline code has back-ticks around it.

Inline `code` has `back-ticks around` it.
var s = "JavaScript syntax highlighting";
alert(s);

Tables

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Horizontal Rule

Three or more…


Hyphens


Asterisks


Underscores

Three or more...

---

Hyphens

***

Asterisks

___

Underscores

Images

Normal Markdown Image

alt text

![alt text](image-link "Logo Title Text 1")

Centered Image

wut?
<figure class="img-center">
<img class="img-responsive" src="..." alt="wut?">
</figure>

Image with Caption. Add <figcaption> tag.

wut?
This is an image with a caption!

Expanded Image. Use .img-expand class.

wut?

Left Pulled Image. Use .img-left class.

wut?

Lorem ipsum dolor sit amet, fabulas tibique adversarium eu qui, has graece aeterno detracto ea, ei appareat tacimates invenire eos. No labitur inermis mei. Vel amet tacimates corrumpit ad, qui reque veritus at. Posse officiis reprehendunt vim id, nec in nominavi senserit. Ubique docendi deterruisset mei ea, his agam eirmod lobortis an.

Right Pulled Image. Use .img-right class.

wut?

Lorem ipsum dolor sit amet, fabulas tibique adversarium eu qui, has graece aeterno detracto ea, ei appareat tacimates invenire eos. No labitur inermis mei. Vel amet tacimates corrumpit ad, qui reque veritus at. Posse officiis reprehendunt vim id, nec in nominavi senserit. Ubique docendi deterruisset mei ea, his agam eirmod lobortis an.

Blockquotes

This is a normal Markdown Blockquote.

β€” This is a cite

> This is a normal Markdown **Blockquote**.
> 
> β€” <cite>This is a cite</cite>

Beauty Quote

This is a better quote

Source of this quote
<blockquote class="pullquote">
<p>This is a better quote</p>
<cite>Source of this quote</cite>
</blockquote>

Expanded Beauty Quote. Add .pq-expand class.

Lorem ipsum dolor sit amet, fabulas tibique adversarium eu qui, has graece aeterno detracto ea, ei appareat tacimates invenire eos. No labitur inermis mei. Vel amet tacimates corrumpit ad, qui reque veritus at. Posse officiis reprehendunt vim id, nec in nominavi senserit. Ubique docendi deterruisset mei ea, his agam eirmod lobortis an.

This is a better quote

Source of this quote

Ex mea lorem iudicabit definiebas, ex dicam graeci recteque mea. Mel diceret mediocrem et, elitr feugiat vim no. Persius accusata recteque his ea, ea veritus appetere ius. No his exerci alienum.

Left Pulled Beauty Quote. Add .pq-left class.

This is a better quote

Source of this quote

Lorem ipsum dolor sit amet, fabulas tibique adversarium eu qui, has graece aeterno detracto ea, ei appareat tacimates invenire eos. No labitur inermis mei. Vel amet tacimates corrumpit ad, qui reque veritus at. Posse officiis reprehendunt vim id, nec in nominavi senserit. Ubique docendi deterruisset mei ea, his agam eirmod lobortis an.

Right Pulled Beauty Quote. Add .pq-right class.

This is a better quote

Source of this quote

Lorem ipsum dolor sit amet, fabulas tibique adversarium eu qui, has graece aeterno detracto ea, ei appareat tacimates invenire eos. No labitur inermis mei. Vel amet tacimates corrumpit ad, qui reque veritus at. Posse officiis reprehendunt vim id, nec in nominavi senserit. Ubique docendi deterruisset mei ea, his agam eirmod lobortis an.

Embed Video

<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="//www.youtube.com/embed/... frameborder="0" allowfullscreen></iframe>
</div>