> For the complete documentation index, see [llms.txt](https://irosyadi.gitbook.io/irosyadi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://irosyadi.gitbook.io/irosyadi/webdev/blog-markdown.md). # 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://irosyadi.gitbook.io/irosyadi/webdev/blog-markdown.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.