# Markdown for This Blog Common markdown format for Gitbook, gatsby-starter-bee, and VNote. ## 1. h2 Heading ***markdown*** ```md # h1 Heading ## h2 Heading ### h3 Heading #### h4 Heading ##### h5 Heading ###### h6 Heading ``` ***display*** ### h3 Heading #### h4 Heading **h5 Heading** **h6 Heading** ## 2. Paragraphs ***markdown*** ```md 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*** ```md This is the first line. And this is the second line.
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*** ```md **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**\ \&#xNAN;*This is italic text*\ \&#xNAN;*This is italic text*\ This text is ***really important*** ## 5. Blockquotes ***markdown*** ```md > 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*** ```md + 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*** ```md 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*** 1. Item 1 2. 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 4. Any number for item 4 ### 6.3. Offset in Oredered List * didn't work in Gitbook ***markdown*** ```md 57. will started with offset 57 1. so it will be 58 2. this is 59 ``` ***display*** 1. will started with offset 57 2. so it will be 58 3. this is 59 ## 7. Elements in Lists ***markdown*** ```md * 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*** ```md 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: Test 6. So okay for now ``` ***display*** 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 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: ``` Test ``` 6. So okay for now ## 8. Code ***markdown*** ```md This is inline `code`. ``` ***display*** This is inline `code`. ***markdown*** ```md // add four spaces before for code like this ``` ***display*** ``` // add four spaces before for code like this ``` ***markdown*** ```md HTML code with four spaces ``` ***display*** ``` HTML code with four spaces ``` ## 9. Links ***markdown*** ```md This is [link](https://example.com/) This is [link with title](https://example.com/ "title text!") https://example.com/ 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](https://example.com/)\ This is [link with title](https://example.com/)\ \ \ 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]\( great page) ### 9.1. Email Linkify * didn't work in Gatsby and Gitbook ***markdown*** ```md fake@example.com didn't work in Gatsby and Gitbook is okay ``` **display** didn't work in Gatsby and Gitbook\ 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]: [2]: https://en.wikipedia.org/wiki/Indonesia#Etymology "Etymology of Indonesia" [3]: https://en.wikipedia.org/wiki/Indonesia#History 'History of Indonesia' [hh]: "Hobbit lifestyles" ``` ***display*** I know [Indonesia](https://en.wikipedia.org/wiki/Indonesia)\ I also know [etymology of Indonesia](https://en.wikipedia.org/wiki/Indonesia#Etymology)\ I knew [History of Indonesia](https://en.wikipedia.org/wiki/Indonesia#History)\ It doesn't have [hobbit-hole](https://en.wikipedia.org/wiki/Hobbit#Lifestyle). ## 11. Images ***markdown*** ```md ![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*** ![Wikipedia with Optional Text](https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png)\ ![Wikipedia with Alt Text, reference style](https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png) ## 12. Escaping Characters ***markdown*** ```md \* 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*** ```md This word is italic. This word is bold. This word 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*** ```md 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. ``` ***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*** ```md ___ --- *** but only didn't work for Gitbook ``` ***display*** *** *** *** ## 15. Heading ID * didn't work for Gatsby ***markdown*** ```md ### My Great Heading {#heading-ids} Link to [Heading IDs](#heading-ids) ``` ***display*** ### My Great Heading Link to [Heading IDs](#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." ``` ```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 ``` ## 17. Tables ***markdown*** ```md | 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](https://www.example.com/) | **Title** | `Here's this is` | | Paragraph | Text | And more | ## 18. Text Formatting ### 18.1. Strikethrough ***markdown*** ```md ~~strikethrough~~ ``` ***display*** ~~strikethrough~~ ### 18.2. Highlighting and Underline * didn't work in Gitbook and Gatsby ```md ==highlight, fail in Gitbook and Gatsby== _underline, fail in Gitbook and Gatsby_ ``` ***display*** \==highlight, fail in Gitbook and Gatsby==\ \&#xNAN;*underline, fail in Gitbook and Gatsby* ## 19. Task Lists (Checkbox, Tick Mark) ***markdown*** ```md - [x] Write the press release - [ ] Update the website - [ ] Contact the media ``` ***display*** * [x] Write the press release * [ ] Update the website * [ ] Contact the media ## 20. Emojies ### 20.1. Copy Pasted Emojies ***markdown*** ```md 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*** ```md Shortcode emoji examples :grinning: :smiley: :smile: :grin: :laughing: :joy: ``` ***display*** Shortcode emoji examples :grinning: :smiley: :smile: :grin: :laughing: :joy: ## 21. Typographic Replacements, Superscript, Subscript * dind't work in Gatsby and Gitbook ***markdown*** ```md 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 H~~2~~O ## 22. HTML Entities and Character Codes ***markdown*** ```md © & ¨ ™ ¡ £ & < > ¥ € ® ± ¶ § ¦ ¯ « · x² y³ ¾ ¼ × ÷ » | 18ºC " ' ``` **display** © & ¨ ™ ¡ £\ & < > ¥ € ® ± ¶ § ¦ ¯ « ·\ x² y³ ¾ ¼ × ÷ » |\ 18ºC " ' *** ## 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*** ```html
Click this List ▶

  • irosyadi: https://irosyadi.netlify.app
  • irosyadi: https://irosyadi.gitbook.io
  • irosyadi: https://irosyadi.github.io

``` ***display***
Click this List ▶ * irosyadi: * irosyadi: * irosyadi:
### 24.2. Summary ***markdown*** ```html
Clik this Term ▶

Term is explanation of something

``` ***display***
Clik this Term ▶ Term is explanation of something
### 24.3. Definition ***markdown*** ```html
First Term
This is the definition of the first term.
Second Term
This is one definition of the second term.
This is another definition of the second term.
``` ***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*** ```html The HTML specification is maintained by the W3C. ``` ***display*** The HTML specification is maintained by the W3C. ## 26. Admonition Styles ### 26.1. Admonition with CSS * CSS delivered from: * didn't work in Gitbook ***markdown*** ```html
🎯 SUCCESS!
Success text.
📌 INFO
Info text.
⚠️ WARNING!
Warning text.
⛔ DANGER!
Success text.
``` ***display*** **🎯 SUCCESS!**\ Success text.**📌 INFO**\ Info text.**⚠️ WARNING!**\ Warning text.**⛔ DANGER!**\ Success text. ### 26.2. Admonition with Quote * worked in everywhere ***markdown*** ```md > **⚠️ WARNING!** > > This is a warning for you... ``` ***display*** > **⚠️ WARNING!** > > > This is a warning for you... ### 26.3. Admonition with Table * worked in everywhere \*\*\* markdown\*\*\* ```md | **⚠️ WARNING!** | | :--------------------------- | | This is a warning for you... | ``` ***display*** | **⚠️ WARNING!** | | ---------------------------- | | This is a warning for you... | ## 27. Footnote * didn't work in Gitbook ***markdown*** ```md 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. 1. Here's another one.