# Special Markdown Case

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

## 6. Lists

### 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

## 9. Links

### 9.1. Email Linkify

* didn't work in Gatsby and Gitbook

_**markdown**_

```md
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](mailto: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](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)

## 13. HTML Code

* very restricted in Gitbook

### 13.1. HTML: Bold, Italic, Strikethrough

_**markdown**_

```md
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.

## 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 <a href="#heading-ids" id="heading-ids"></a>

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
```

## 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;_&#x75;nderline, fail in Gitbook and Gatsby_

## 20. Emojies

### 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
&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**

© & ¨ ™ ¡ £\
& < > ¥ € ® ± ¶ § ¦ ¯ « ·\
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
<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**_

<details>

<summary>Click this List ▶</summary>

* irosyadi:
* irosyadi:
* irosyadi:

</details>

### 24.2. Summary

_**markdown**_

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

_**display**_

<details>

<summary>Clik this Term ▶</summary>

Term is explanation of something

</details>

### 24.3. Definition

_**markdown**_

```html
<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**_

```html
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](https://cdn.jsdelivr.net/gh/irosyadi/irosyadi@master/alert.css)
* didn't work in Gitbook

_**markdown**_

```html
<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.

## 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.
