FOSSIL pedoman penulisan markdown

Pedoman penulisan markdown pada FOSSIL. Juga bisa dibaca pada dokumentasi kramdown, diwajibkan membuat file markdown(.md) pada direktori _posts e.g 2020-04-29-judul-artikel.md dan berikut tata cara penulisanya.

Tabel daftar konten

1. TOC
{:toc}

hasilnya :

1. Tabel daftar konten
2. Paragraf
   1. Italic
   2. Bold
   3. Strikethrough
   4. Link
   5. Code
3. Kutipan
4. Fenced Code Block
5. Unordered list
6. Ordered list
7. Nested List
8. Callout
9. Image/GIF
10. Related post
11. Horizontal line
12. Table
13. Latex
14. Footnotes

Paragraf

Ini adalah contoh paragraf cukup dengan menuliskan pada format markdown
tanpa dengan tanda-tanda apapun otomatis menjadi sebuah paragraf.

hasilnya :

Ini adalah contoh paragraf cukup dengan menuliskan pada format markdown tanpa dengan tanda-tanda apapun otomatis menjadi sebuah paragraf.

Italic

Ini adalah contoh paragraf dengan _teks italic_

hasilnya :

Ini adalah contoh paragraf dengan teks italic

Bold

Ini adalah contoh paragraf dengan **bold**

hasilnya :

Ini adalah contoh paragraf dengan bold

Strikethrough

Ini adalah contoh paragraf dengan ~~strikethrough~~

hasilnya :

Ini adalah contoh paragraf dengan strikethrough

Link

Ini adalah contoh paragraf dengan [sebuah link](https://github.com/esemkasa)

hasilnya :

Ini adalah contoh paragraf dengan sebuah link

Code

Ini adalah contoh paragraf dengan `const number = 10`

hasilnya :

Ini adalah contoh paragraf dengan const number = 10

Kutipan

> There are only two hard things in Computer Science: cache invalidation and naming things.
> <small>-- Phil Karlton.</small>

hasilnya :

There are only two hard things in Computer Science: cache invalidation and naming things. – Phil Karlton.

Fenced Code Block

```jsx
const Button = () => {
  const count, setCount = React.useState(0);
  const clickHandle = () => setCount(count + 1);

  return <button onClick={clickHandle}>Press</button>
}
```

hasilnya :

const Button = () => {
  const count, setCount = React.useState(0);
  const clickHandle = () => setCount(count + 1);

  return <button onClick={clickHandle}>Press</button>
}

```diff
-- const number = 10;
++ const number = 20;
```

hasilnya :

-- const number = 10;
++ const number = 20;

Unordered list

- [Ruby](https://www.ruby-lang.org/en/downloads/) programming language
- [Git](https://git-scm.com) (version control)
- [Netlify](https://netlify.com) and [Github](https://github.com) account
- [Bundler](https://bundler.io)

hasilnya :

• Ruby programming language
• Git (version control)
• Netlify and Github account
• Bundler

Ordered list

1. click `new site from git`, then choose `Github`.
1. then choose your repository where is the jekyll sources uploaded.
1. netlify smart enough to configuring, we just need's to click `Deploy site button`.

hasilnya :

1. click new site from git, then choose Github.
2. then choose your repository where is the jekyll sources uploaded.
3. netlify smart enough to configuring, we just need’s to click Deploy site button.

Nested List

- List of item
  - Child of parent item
    - Grandchild
  - I'm Sibling
- Another list item

hasilnya :

• List of item
  • Child of parent item
    • Grandchild
  • I’m Sibling
• Another list item

Callout

Terdapat 4 jenis callout diantaranya adalah default(.card), tips(.card.tips), info(.card.info) dan alert(.card.alert)

Ini adalah card `.default` You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build <https://github.com> the site to see your changes.
{: .card}

hasilnya :

Ini adalah card .default You’ll find this post in your _posts directory. Go ahead and edit it and re-build https://github.com the site to see your changes.

Ini adalah card .tips You’ll find this post in your _posts directory. Go ahead and edit it and re-build https://github.com the site to see your changes.

Ini adalah card .info You’ll find this post in your _posts directory. Go ahead and edit it and re-build https://github.com the site to see your changes.

Ini adalah card .alert You’ll find this post in your _posts directory. Go ahead and edit it and re-build https://github.com the site to see your changes.

Image/GIF

![terminal image](/assets/static/img/terminal_nginx.gif)

hasilnya :

Image/GIF dengan caption/description

<figure>
  <img src="/assets/static/img/terminal_nginx.gif" alt="terminal">
  <figcaption>
    Fig 2. Mengecek status web server NGINX.
  </figcaption>
</figure>

hasilnya :

Fig 1. Mengecek status web server NGINX.

Related post

[Apa itu lisensi MIT?](#link_artikel_disini)
{: .related-post}

hasilnya :

Apa itu lisensi MIT?

Horizontal line

---

hasilnya :

---

Table

|-----------------+------------+-----------------+----------------|
| Default aligned |Left aligned| Center aligned  | Right aligned  |
|-----------------|:-----------|:---------------:|---------------:|
| First body part |Second cell | Third cell      | fourth cell    |
| Second line     |foo         | **strong**      | baz            |
| Third line      |quux        | baz             | bar            |
|-----------------+------------+-----------------+----------------|
| Second body     |            |                 |                |
| 2 line          |            |                 |                |
|=================+============+=================+================|
| Footer row      |            |                 |                |
|-----------------+------------+-----------------+----------------|

hasilnya :

Default aligned	Left aligned	Center aligned	Right aligned
First body part	Second cell	Third cell	fourth cell
Second line	foo	strong	baz
Third line	quux	baz	bar
Second body
2 line
Footer row

Latex

When $$a \ne 0$$, there are two solutions to $$ ax^2 + bx + c = 0 $$ and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

hasilnya :

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\)

Footnotes

Ini sebuah teks.¹. yang mana tidak diketahui artinya.².

1. Bahan tertulis untuk dasar memberikan pelajaran. Kamus Besar Bahasa Indonesia. Diakses pada tanggal 15 Mei 2020. ↩

2. Maksud yang terkandung (dalam perkataan, kalimat). Kamus Besar Bahasa Indonesia. Diakses pada tanggal 20 September 2020. ↩