SiG FSTM

We are SiG FSTM a small community from KUIS. This website will be the place where we share all of our activities!

About Other Community SiG Members

Belajar Menggunakan markdown

Written by zahiruddinRushdi on 5 May 2018

Assalamualaikum dan hai semua, disini saya akan mengajar anda bagaimana cara untuk menggunakan Markdown secara mudah dan apa yang perlu kita tahu jika ingin menggunakan Markdown.

Apakah Markdown?


Markdown adalah markup language yang mudah dan ringan.

Apakah kegunaan Markdown?


Digunakan:

  1. Dalam fail README di Github dan lain-lain.
  2. Dalam artikel blog seperti laman web SIG ini.
  3. Lain-lain lagi.

Sintaksis(Syntax) Markdown


  1. Heading
  2. Emphasis
  3. Strikethrough
  4. Blockqoute
  5. Comment
  6. List
  7. Link
  8. Table
  9. Horizontal Rule
  10. Inline HTML
  11. Code dan Syntax Highlighting
  12. Line Break

Heading

Heading Markdown dan HTML adalah sama iaitu mempunyai 6 jenis Heading.Dalam Markdown heading dimulakan dengan simbol hash (#) dan seterusnya nama heading seperti gambar dibawah:

heading

Emphasis

Emphasis adalah seperti italic dan bold.

Dalam Markdown, italic menggunakan simbol asterisks (*) atau underscore (_) seperti gambar dibawah:

italic

Selain itu, bold menggunakan 2x simbol asterisks (**) atau 2x underscore (__) seperti gambar dibawah:

bold

dan jika anda mahu menggunakan simbol * dan _ tanpa membuat teks anda menjadi italic atau bold, anda boleh menambah simbol backslash \ sebelum simbol * atau _ seperti gambar dibawah:

normal

Strikethrough

Strikethrough adalah teks yang mempunyai garis di tengah seperti perkataan ini.

Kita boleh membuat teks strikethrough dengan menggunakan 2x simbol tilde (~~) seperti gambar dibawah:

strikethrough

Blockqoute

Blockqoute digunakan untuk memberi penekanan kepada sesuatu ayat yang penting.

Kita boleh membuat blockqoute dengan mengunakan simbol angel bracket (>) seperti gambar dibawah:

blockqoute

Comment

Comment adalah ayat atau teks yang tidak akan dipaparkan dalam fail yang sudah diproses (execute).

Ada pelbagai cara untuk menulis comment, tetapi saya menggunakan comment gaya HTML kerana ianya mudah untuk ditulis berbanding dengan gaya yang lain.

Sebagai contoh, seperti gambar dibawah:

comment

List

List boleh dibahagikan kepada dua iaitu unordered list dan ordered list.

Unordered list adalah list yang tidak mempunyai urutan huruf atau nombor iaitu seperti dibawah:

Orderded list pula adalah list yang mengikut urutan huruf atau nombor iaitu seperti dibawah:

  1. list
  2. list
  3. list

Anda boleh membuat unordered list dengan menggunakan simbol asterisks (*) dan manakala untuk ordered list anda perlu menggunakan huruf 1 dan titik@noktah seperti gambar dibawah:

list

Link digunakan untuk memaut sesuatu URL atau fail kedalam fail Markdown.

Kita boleh memautkan URL atau fail kedalam fail Markdown dengan menggunakan sintaksis ini:

[nama output](URL @ fail)

atau seperti gambar dibawah:

link

Jika anda ingin menambah gambar anda boleh menggunakan sintaksis ini:

![nama gambar](link_gambar)

atau seperti gambar dibawah:

gambar

Table

Table atau jadual selalunya digunakan untuk mengisi atau pengurusan data-data yang penting.

Kita boleh membuat table dengan gabungan simbol pipe ( ) dan hyphens (-) seperti gambar dibawah:

table

Horizontal Rule

Horizontal Rule adalah garis seperti dibahagian bawah ini:


Horizontal Rule menggunakan 3x atau lebih simbol hyphens (-), asterisks(*) seperti gambar dibawah:

horizontal

Inline HTML

Anda juga boleh menggunakan sintaksis HTML di dalam Markdown tanpa sebarang masalah seperti dibawah:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
    </tr>
</table>

Output:

Header 1 Header 2 Header 3
Data 1 Data 2 Data 3

Code dan Syntax Highlighting

Kita boleh membuat code block di Markdown tanpa Syntax Highlighting tetapi kebanyakkan renderer seperti Github dan lain-lain menyokong code block dengan Syntax Highlighting.Terdapat berdozen bahasa pengaturcaraan(Programming) yang disokong oleh renderer yang menggunakan highlight.js.

Anda menulis code block dengan menggunakan 3x back-tick (`) seperti dibawah:

```javascript

code disini

```

atau seperti gambar dibawah:

code

Line Breaks

Line Breaks atau dalam HTML <br> adalah berfungsi untuk membawa teks atau ayat ke baris yang baharu.

Anda hanya perlu meninggal satu ruang kosong seperti membuat perenggan dalam Bahasa Melayu untuk membuat Line Breaks seperti gambar dibawah:

line_breaks

Kesimpulan


Kesimpulannya, Markdown adalah senang untuk dipelajari oleh semua orang walaupun tidak mempunyai latar belakang IT.Anda boleh mendapatkan maklumat lanjut mengenai Markdown di sini Markdown Cheatsheet.


Author: Zahiruddin Rushdi