Markdown for This Blog

Common markdown format for Gitbook, gatsby-starter-bee, and VNote.

1. h2 Heading

markdown

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

display

h3 Heading

h4 Heading

h5 Heading

h6 Heading

2. Paragraphs

markdown

This is the first paragraph.

This is the second paragraph

display

This is the first paragraph.

This is the second paragraph

3 Line Break

markdown

This is the first line.  
And this is the second line.<br>
And finally this is the last line.

display

This is the first line. And this is the second line. And finally this is the last line.

4. Emphasis

markdown

**This is bold text**  
__This is bold text__  
*This is italic text*  
_This is italic text_  
This text is ___really important___

display

This is bold text This is bold text This is italic text This is italic text This text is really important

5. Blockquotes

markdown

> This is the first line of paragraph, followed by blank line
> 
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.
>
> ### with a heading
> 
> - and list
> - list
> - with **bold** and *italic* text

display

This is the first line of paragraph, followed by blank line
Blockquotes can also be nested...

...by using additional greater-than signs right next to each other...

...or with spaces between arrows.
with a heading
and list
list
with bold and italic text

6. Lists

6.1. Unordered

markdown


+ To start a list, there should be an empty line above
+ Create a list by starting a line with `+`, `-`, or `*`
- Changing the sign will add a linespace
+ Add text under an item  
This is a text under an item. Notice that there are two spaces at the end above.
- Sub-lists are made by indenting 2 spaces:
  * Item 2a
  * Item 2b
* Item 3

To end a list, there should be one empty line above.

display

To start a list, there should be an empty line above
Create a list by starting a line with +, -, or *
Changing the sign will add a linespace
Add text under an item This is a text under an item. Notice that there are two spaces at the end above.
Sub-lists are made by indenting 2 spaces:
- Item 2a
- Item 2b
Item 3

To end a list, there should be one empty line above.

6.2. Ordered

markdown

1. Item 1
1. Item 2  
Notice that the sequence number is irrelevant. 
Markdown will change the sequence automatically when renderring. 
Notice that there are two spaces at the end above to make a new text under item.
3. Sub-lists are made by indenting 4 spaces
    1. Item 3a
    2. Item 3b
8. Any number for item 4

display

Item 1
Item 2 Notice that the sequence number is irrelevant. Markdown will change the sequence automatically when renderring. Notice that there are two spaces at the end above to make a new text under item.
Sub-lists are made by indenting 4 spaces
1. Item 3a
2. Item 3b
Any number for item 4

6.3. Offset in Oredered List

didn't work in Gitbook

markdown

57. will started with offset 57
1. so it will be 58
2. this is 59

display

will started with offset 57
so it will be 58
this is 59

7. Elements in Lists

markdown

* To add another element in a list while preserving the continuity of the list...
* indent the element four spaces
     like this
* ...or add blank lines in between

    I need to add another paragraph below the second list item.

* the third list item.

    > A blockquote would look great below the second list item.

* the fourth list item.

display

To add another element in a list while preserving the continuity of the list...
add blank lines in between
I need to add another paragraph below the second list item.
the third list item.
A blockquote would look great below the second list item.
the fourth list item.

markdown

1. This image is inline ![wikquote](https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikiquote-logo.svg/35px-Wikiquote-logo.svg.png).
2. Linux mascot is called Tux.

   ![Tux, the Linux mascot](https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Tux.png/220px-Tux.png)
3. Tux is is really cool.
4. For quote in ordered list, add five spaces.
     > A blockquote would look great below the second list item.
5.  But, for code blocks in the lists, add eight spaces or two tabs:

        <html>
          <head>
            <title>Test</title>
          </head>

6.  So okay for now

display

This image is inline .
Linux mascot is called Tux.
Tux, the Linux mascot
Tux is really cool.
For quote in ordered list, add five spaces.
A blockquote would look great below the second list item.

But, for code blocks in the lists, add eight spaces or two tabs:

 <html>
   <head>
     <title>Test</title>
   </head>

So okay for now

8. Code

markdown

This is inline `code`.

display

This is inline code.

markdown

    // add four spaces before for code
    like this

display

// add four spaces before for code
like this

markdown

    <html>
      <head>
        <title>HTML code with four spaces</title>
      </head>

display

<html>
  <head>
    <title>HTML code with four spaces</title>
  </head>

9. Links

markdown

This is [link](https://example.com/)  
This is [link with title](https://example.com/ "title text!")
https://example.com/  
<https://www.markdownguide.org>  
I love supporting the **[EFF](https://eff.org)**.  
This is the *[Markdown Guide](https://www.markdownguide.org)*.  
See the section on [`code`](#code).  
But  `https://www.example.com`  
but be careful with [%20 link](https://www.example.com/my%20great%20page)  
example [without %20](https://www.example.com/my great page)

display

This is link This is link with title https://example.com/ https://www.markdownguide.org I love supporting the EFF. This is the Markdown Guide. See the section on code. But https://www.example.com but be careful with %20 link example [without %20](https://www.example.com/my great page)

9.1. Email Linkify

didn't work in Gatsby and Gitbook

markdown

fake@example.com didn't work in Gatsby and Gitbook  
<fake@example.com> is okay

display

fake@example.com didn't work in Gatsby and Gitbook fake@example.com is okay

10. Reference-style Links

markdown

I know [Indonesia][1]  
I also know [etymology of Indonesia][2]  
I knew [History of Indonesia][3]  
It doesn't have [hobbit-hole][hh].

[1]: <https://en.wikipedia.org/wiki/Indonesia>
[2]: https://en.wikipedia.org/wiki/Indonesia#Etymology "Etymology of Indonesia"
[3]: https://en.wikipedia.org/wiki/Indonesia#History 'History of Indonesia'
[hh]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"

display

I know Indonesia I also know etymology of Indonesia I knew History of Indonesia It doesn't have hobbit-hole.

11. Images

markdown

![Wikipedia with Optional Text](https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png "Optional Text")  
![Wikipedia with Alt Text, reference style][id1]  

[id1]: https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png "Optional Text"

display

12. Escaping Characters

markdown

\* star  
\\ backslash itself  
\` backtick  
\{ \} curly braces  
\! exclamation mark

display

* star \ backslash itself ` backtick { } curly braces ! exclamation mark

13. HTML Code

very restricted in Gitbook

13.1. HTML: Bold, Italic, Strikethrough

markdown

This <em>word</em> is italic.  
This <strong>word</strong> is bold.  
This <del>word</del> is deleted with strikethorouugh.

display

This word is italic. This word is bold. This ~~word~~ is deleted with strikethorouugh.

13.2. Others HTML Code

didn't work in Gitbook

markdown

<font color=red>red color</font>  
<mark>highlight</mark>  
<ins>underline</ins>  
<small>smaller text</small>  
H<sub>2</sub>O  
x<sup>2</sup>+y<sup>2</sup>=0  
Variable of triangle area: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.

display

red color highlight underline smaller text H2O x2+y2=0 Variable of triangle area: 1/2 x b x h, where b is the base, and h is the vertical height.

14. Horizontal Rules

didn't work in Gitbook

markdown

___

---

***

but only didn't work for Gitbook

display

15. Heading ID

didn't work for Gatsby

markdown

### My Great Heading {#heading-ids}

Link to [Heading IDs](#heading-ids)

display

My Great Heading

Link to Heading IDs

16. Code Fencing and Highlighting

markdown

```
This is a fenced code block.
```
~~~
No language indicated, so no syntax highlighting.
s = "There is no highlighting for this."
~~~

```python
def function():
    #indenting works just fine in the fenced code block
    s = "Python syntax highlighting"
    print s
```

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```

```ruby
require 'redcarpet'
markdown = Redcarpet.new("ruby syntax highlighting")
puts markdown.to_html
```

display

This is a fenced code block.

No language indicated, so no syntax highlighting.
s = "There is no highlighting for this."

def function():
    #indenting works just fine in the fenced code block
    s = "Python syntax highlighting"
    print s

var s = "JavaScript syntax highlighting";
alert(s);

require 'redcarpet'
markdown = Redcarpet.new("ruby syntax highlighting")
puts markdown.to_html

17. Tables

markdown

| Syntax      | Description | Test Text is long    |
| :---        |    :----:   |          ---: |
| [Example](https://www.example.com/)      | **Title**       | `Here's this  is` |
| Paragraph   | Text        | And more   |

display

Syntax

Description

Test Text is long

Example

Title

Here's this is

Paragraph

Text

And more

18. Text Formatting

18.1. Strikethrough

markdown

~~strikethrough~~

display

~~strikethrough~~

18.2. Highlighting and Underline

didn't work in Gitbook and Gatsby

==highlight, fail in Gitbook and Gatsby==  
_underline, fail in Gitbook and Gatsby_

display

==highlight, fail in Gitbook and Gatsby== underline, fail in Gitbook and Gatsby

19. Task Lists (Checkbox, Tick Mark)

markdown

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

display

Write the press release
Update the website
Contact the media

20. Emojies

20.1. Copy Pasted Emojies

markdown

Gone camping! ⛺ Be back soon.  
That is so funny! 😂

display

Gone camping! ⛺ Be back soon. That is so funny! 😂

20.2. Shortcode Emoji

didn't work in Gitbook
in Gatsby and VNote, use Github Emoji Shortcode

markdown

Shortcode emoji examples :grinning: :smiley: :smile: :grin: :laughing: :joy:

display

Shortcode emoji examples 😀 😃 😄 😁 😆 😂

21. Typographic Replacements, Superscript, Subscript

dind't work in Gatsby and Gitbook

markdown

autoreplacement of (c) (C) (r) (R) (tm) (TM) (p) (P) +-  
superscript x^2^ and subscript H~2~O

display

autoreplacement of (c) (C) (r) (R) (tm) (TM) (p) (P) +- superscript x^2^ and subscript H2O

22. HTML Entities and Character Codes

markdown

&copy; &  &uml; &trade; &iexcl; &pound;  
&amp; &lt; &gt; &yen; &euro; &reg; &plusmn; &para; &sect; &brvbar; &macr; &laquo; &middot;  
x&sup2; y&sup3; &frac34; &frac14;  &times;  &divide;   &raquo; &#124;  
18&ordm;C  &quot;  &apos;

display

23. Latex

23.1. Inline Equation

Equation with one dollar sign $ works inline in VNote
Equation with two dollar signs $$ works inline in Jekyll and Gitbook, but not in VNote

markdown

Inline equation with one dollar sign: $E=mc^2$ (worked in VNote and Gatsby).  
Inline equation with two dollar sign: $$E=mc^2$$ (worked in Gatsby, Jekyll and Gitbook).

display

Inline equation with one dollar sign: $E=mc^2$ (worked in VNote and Gatsby). Inline equation with two dollar sign: $E=mc^2$ (worked in Gatsby, Jekyll and Gitbook).

23.2. Newline Equation

markdown

Newline equation with two dollar signs.

$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$

display

Newline equation with two dollar signs.

$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$

24. Specific HTML Code

didn't work in Gitbook

24.1. Drop Down List

markdown

<details>
  <summary>Click this List ▶</summary>
  <p>
    <ul>
      <li>irosyadi: https://irosyadi.netlify.app</li>
      <li>irosyadi: https://irosyadi.gitbook.io</li>
      <li>irosyadi: https://irosyadi.github.io</li>
    </ul>
  </p>
</details>

display

Click this List ▶

irosyadi:
irosyadi:
irosyadi:

24.2. Summary

markdown

<details>
  <summary>Clik this Term ▶</summary>
  <p>Term is explanation of something</p>
</details>

display

Clik this Term ▶

Term is explanation of something

24.3. Definition

markdown

<dl>
<dt>First Term</dt>
<dd>This is the definition of the first term.</dd>
<dt>Second Term</dt>
<dd>This is one definition of the second term. </dd>
<dd>This is another definition of the second term.</dd>
</dl>

display

First TermThis is the definition of the first term.Second TermThis is one definition of the second term.This is another definition of the second term.

24.4. Abbreviation

markdown

The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.

display

The HTML specification is maintained by the W3C.

26. Admonition Styles

26.1. Admonition with CSS

CSS delivered from: https://cdn.jsdelivr.net/gh/irosyadi/irosyadi@master/alert.css
didn't work in Gitbook

markdown

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/irosyadi/irosyadi@master/alert.min.css">

<div class="alert alert-success"><strong>🎯 SUCCESS!</strong> <br> Success text. </div>  
<div class="alert alert-info"><strong>📌 INFO</strong> <br> Info text. </div>  
<div class="alert alert-warning"><strong>⚠️ WARNING!</strong> <br> Warning text. </div>  
<div class="alert alert-danger"><strong>⛔ DANGER!</strong> <br> Success text. </div>

display

🎯 SUCCESS! Success text.📌 INFO Info text.⚠️ WARNING! Warning text.⛔ DANGER! Success text.

26.2. Admonition with Quote

worked in everywhere

markdown

> **⚠️ WARNING!**
> > This is a warning for you...

display

⚠️ WARNING!
This is a warning for you...

26.3. Admonition with Table

worked in everywhere

*** markdown***

| **⚠️ WARNING!**                |
| :--------------------------- |
| This is a warning for you... |

display

⚠️ WARNING!

This is a warning for you...

27. Footnote

didn't work in Gitbook

markdown

Here's a simple footnote,[^1] and here's a longer one,[^bignote], and [^withcode].  

[^1]: This is the first footnote, in Gitbook, there is no new line between.  
[^bignote]: Here's another one.  
[^withcode]: `code` or code in paragraphs

display

Here's a simple footnote, and here's a longer one,, and . But there is problem with Gitbook for footnote.

Here's another one.

PreviousSpecial Markdown Case NextClassless CSS

Last updated 2 years ago

hashtag1. h2 Heading

hashtagh3 Heading

hashtagh4 Heading

hashtag2. Paragraphs

hashtag3 Line Break

hashtag4. Emphasis

hashtag5. Blockquotes

hashtagwith a heading

hashtag6. Lists

hashtag6.1. Unordered

hashtag6.2. Ordered

hashtag6.3. Offset in Oredered List

hashtag7. Elements in Lists

hashtag8. Code

hashtag9. Links

hashtag9.1. Email Linkify

hashtag10. Reference-style Links

hashtag11. Images

hashtag12. Escaping Characters

hashtag13. HTML Code

hashtag13.1. HTML: Bold, Italic, Strikethrough

hashtag13.2. Others HTML Code

hashtag14. Horizontal Rules

hashtag15. Heading ID

hashtagMy Great Heading

hashtag16. Code Fencing and Highlighting

hashtag17. Tables

hashtag18. Text Formatting

hashtag18.1. Strikethrough

hashtag18.2. Highlighting and Underline

hashtag19. Task Lists (Checkbox, Tick Mark)

hashtag20. Emojies

hashtag20.1. Copy Pasted Emojies

hashtag20.2. Shortcode Emoji

hashtag21. Typographic Replacements, Superscript, Subscript

hashtag22. HTML Entities and Character Codes

hashtag23. Latex

hashtag23.1. Inline Equation

hashtag23.2. Newline Equation

hashtag24. Specific HTML Code

hashtag24.1. Drop Down List

hashtag24.2. Summary

hashtag24.3. Definition

hashtag24.4. Abbreviation

hashtag26. Admonition Styles

hashtag26.1. Admonition with CSS

hashtag26.2. Admonition with Quote

hashtag26.3. Admonition with Table

hashtag27. Footnote

1. h2 Heading

h3 Heading

h4 Heading

2. Paragraphs

3 Line Break

4. Emphasis

5. Blockquotes

with a heading

6. Lists

6.1. Unordered

6.2. Ordered

6.3. Offset in Oredered List

7. Elements in Lists

8. Code

9. Links

9.1. Email Linkify

10. Reference-style Links

11. Images

12. Escaping Characters

13. HTML Code

13.1. HTML: Bold, Italic, Strikethrough

13.2. Others HTML Code

14. Horizontal Rules

15. Heading ID

My Great Heading

16. Code Fencing and Highlighting

17. Tables

18. Text Formatting

18.1. Strikethrough

18.2. Highlighting and Underline

19. Task Lists (Checkbox, Tick Mark)

20. Emojies

20.1. Copy Pasted Emojies

20.2. Shortcode Emoji

21. Typographic Replacements, Superscript, Subscript

22. HTML Entities and Character Codes

23. Latex

23.1. Inline Equation

23.2. Newline Equation

24. Specific HTML Code

24.1. Drop Down List

24.2. Summary

24.3. Definition

24.4. Abbreviation

26. Admonition Styles

26.1. Admonition with CSS

26.2. Admonition with Quote

26.3. Admonition with Table

27. Footnote