Menjadi seorang penulis, terutama penulis artikel online, sudah selayaknya kita fokus pada konten yang ingin kita sampaikan kepada pembaca. Namun, kadung asyiknya membuat konten, terkadang kita lupa membuat sebuah tulisan yang enak dibaca secara visual. Apalagi kita harus berurusan dengan formatting html atau command dari editor WYSIWYG yang kita gunakan. Sebagai seorang penggemar (hanya pengguna math display sebenarnya) adalah hal yang wajar menginginkan kecantikan dapat dibawa serta dalam hal online-publishing.
Salah satu solusinya adalah menggunakan Markdown sebuah markup language dengan format syntax yang mudah. Terdapat berbagai macam editor untuk Markdown, namun satu yang menarik adalah StackEdit. Dalam artikel ini akan saya ulas fitur dari Markdown pada StackEdit lengkap dengan contohnya. Berikut daftar konten yang akan kita bahas.
| Daftar Isi | ||
|---|---|---|
| 1. Tag Header | 7. Backslash Escapes | |
| 2. Emphasis | 8. Tautan | |
| 3. Quote | 9. Blok Kode | |
| 4. List | 10. Tabel | |
| 5. Gambar | 11. Ekspresi Matematika LaTeX | |
| 6. Ikon | 12. Diagram |
Tag Header
Sama halnya dengan header di kode html, kita dapat membuat header dengan hirarki tertentu (h1, h2, h3, dst). Di Markdown kita hanya perlu menambahkan tagar # untuk membuatnya. Jumlah tagar yang kita tambahkan akan mempengaruhi hiraki dari header yang kita masukkan. Contoh :
Kode
# Bab 1
## Sub-bab 1.1
### Sub-sub-bab 1.1.1
#### Sub-sub-bab 1.1.1.1
Interpretasi
Bab 1
Sub-bab 1.1
Sub-sub-bab 1.1.1
Sub-sub-bab 1.1.1.1
Emphasis
Kita dapat memberi penekanan pada kata atau kalimat dengan membuat cetak tebal atau cetak miring dengan mengurung teks bersangkutan dengan tanda bintang *.
Kode
*Cetak miring*
**Cetak tebal**
***Cetak miring tebal***
Interpretasi
Cetak miring
Cetak tebal
Cetak miring tebal
Quote
Kita dapat menambahkan blok kuotasi dengan menambahkan tanda lebih dari >.
Kode
>Orang kuat bukanlah yang dapat mengalahkan orang lain, tapi yang dapat mengalahkan hawa nafsunya. Dan di dalam riwayat yang lain : yang dapat mengusai dirinya sewaktu marah" (H.R Bukhari dan Muslim)
Interpretasi
Orang kuat bukanlah yang dapat mengalahkan orang lain, tapi yang dapat mengalahkan hawa nafsunya. Dan di dalam riwayat yang lain : yang dapat mengusai dirinya sewaktu marah” (H.R Bukhari dan Muslim)
List
List terdiri dari list berurutan dan tidak-berurutan. List berurutan berrarti list tersebut ditandai dengan angka atau huruf yang ururt. List tidak berurutan berarti list yang tidak ditandai dengan angka atau huruf.
Contoh 1
Kode
Cara melakuakan pendaftaran di KUA :
1. Pengantar RT-RW dibawa ke Kelurahan setempat untuk mendapatkan Isian Blangko N1, N2, N3 & N4.
2. Datang ke KUA setempat untuk mendapatkan Surat Pengantar/Rekomendasi Nikah (Jika calon Istri beralamat lain daerah/Kecamatan).
3. Jika calon Istri sedaerah/Kecamatan, berkas calon Suami diserahkan ke pihak calon Istri.
Interpretasi
Cara melakukan pendaftaran di KUA :
- Pengantar RT-RW dibawa ke Kelurahan setempat untuk mendapatkan Isian Blangko N1, N2, N3 & N4
- Datang ke KUA setempat untuk mendapatkan Surat Pengantar/Rekomendasi Nikah (Jika calon Istri beralamat lain daerah/Kecamatan).
- Jika calon Istri sedaerah/Kecamatan, berkas calon Suami diserahkan ke pihak calon Istri.
Contoh 2
Kode
Daftar belanja :
- Bayam 1 ikat
- Daging ayam 1kg
- Lada hitam 1kg
Interpretasi
Daftar belanja :
- Bayam 1 ikat
- Daging ayam 1kg
- Lada hitam 1kg
Gambar
Kita juga dapat mencantumkan gambar dengan menuliskan kode seperti berikut
Kode
Interpretasi
Teks di dalam kurung siku ![ ] merupakan alt-text dan tautan di dalam tanda kurung ( ) merupakan alamat dari gambar yang ingin ditampilkan.
Ikon
Untuk memunculkan ikon pada StackEdit, kita perlu menyisipkan sedikit kode html beserta dengan class ikon yang bersangkutan yaitu seperti berikut :
<i class="nama-class"></i>Misalnya saya ingin menampilkan ikon warning seperti ini , maka kita cukup menuliskan :
<i class="icon-attention"></i>Nama class ikon yang tersedia cukup bervariasi. Ikon pada StackEdit memanfaatkan paket font fontello. Berikut adalah daftar nama class yang tersedia pada StackEdit :
| icon-ajust | icon-align-center | icon-align-justify |
| icon-align-left | icon-align-right | icon-ambulance |
| icon-anchor | icon-angle-circled-down | icon-angle-circled-left |
| icon-angle-circled-right | icon-angle-circled-up | icon-angle-double-down |
| icon-angle-double-left | icon-angle-double-right | icon-angle-double-up |
| icon-angle-down | icon-angle-left | icon-angle-right |
| icon-angle-up | icon-archive | icon-asterisk |
| icon-attach | icon-attention | icon-attention-alt |
| icon-attention-circled | icon-award | icon-barcode |
| icon-basket | icon-beaker | icon-beer |
| icon-bell | icon-bell-alt | icon-bitcoin |
| icon-block | icon-bold | icon-book |
| icon-bookmark | icon-bookmark-empty | icon-box |
| icon-briefcase | icon-bug | icon-building |
| icon-bullseye | icon-calendar | icon-calendar-empty |
| icon-camera | icon-camera-alt | icon-cancel |
| icon-cancel-circled | icon-cancel-circled2 | icon-ccw |
| icon-certificate | icon-chart-bar | icon-chat |
| icon-chat-empty | icon-check | icon-check-empty |
| icon-circle | icon-circle-empty | icon-clock |
| icon-cloud | icon-code | icon-coffee |
| icon-cog | icon-cog-alt | icon-collapse |
| icon-collapse-top | icon-columns | icon-comment |
| icon-comment-empty | icon-compass | icon-credit-card |
| icon-crop | icon-cw | icon-desktop |
| icon-direction | icon-doc | icon-doc-text |
| icon-doc-text-inv | icon-docs | icon-dollar |
| icon-down | icon-down-big | icon-down-circled |
| icon-down-circled2 | icon-down-dir | icon-down-hand |
| icon-down-open | icon-download | icon-download-cloud |
| icon-edit | icon-eject | icon-ellipsis |
| icon-ellipsis-vert | icon-eraser | icon-euro |
| icon-exchange | icon-expand | icon-export-alt |
| icon-extinguisher | icon-eye | icon-eye-off |
| icon-fast-bw | icon-fast-fw | icon-female |
| icon-fighter-jet | icon-file | icon-filter |
| icon-fire | icon-flag | icon-flag-checkered |
| icon-flag-empty | icon-flash | icon-flight |
| icon-floppy | icon-folder | icon-folder-empty |
| icon-folder-open | icon-folder-open-empty | icon-font |
| icon-food | icon-fork | icon-forward |
| icon-frown | icon-gamepad | icon-gauge |
| icon-gift | icon-glass | icon-globe |
| icon-h-sigh | icon-hammer | icon-hdd |
| icon-headphones | icon-heart | icon-heart-empty |
| icon-help | icon-help-circled | icon-home |
| icon-hospital | icon-inbox | icon-indent-left |
| icon-indent-right | icon-info | icon-info-circled |
| icon-italic | icon-key | icon-keyboard |
| icon-laptop | icon-layers | icon-leaf |
| icon-left | icon-left-big | icon-left-circled |
| icon-left-dir | icon-left-hand | icon-left-open |
| icon-level-down | icon-level-up | icon-lightbulb |
| icon-link | icon-link-ext | icon-link-ext-alt |
| icon-list | icon-list-alt | icon-list-bullet |
| icon-list-numbered | icon-location | icon-lock |
| icon-lock-open | icon-lock-open-alt | icon-login |
| icon-logout | icon-magic | icon-magnet |
| icon-mail | icon-mail-alt | icon-male |
| icon-medkit | icon-megaphone | icon-meh |
| icon-menu | icon-mic | icon-minus |
| icon-minus-circled | icon-minus-squared | icon-minus-squared-alt |
| icon-minus-squared-small | icon-mobile | icon-money |
| icon-moon | icon-move | icon-music |
| icon-mute | icon-off | icon-ok |
| icon-ok-circled | icon-ok-circled2 | icon-ok-squared |
| icon-paste | icon-pause | icon-pencil |
| icon-pencil-squared | icon-phone | icon-phone-squared |
| icon-picture | icon-pin | icon-play |
| icon-play-circled | icon-play-circled2 | icon-plus |
| icon-plus-circled | icon-plus-squared | icon-plus-squared-small |
| icon-pound | icon-print | icon-provider-blogger |
| icon-provider-bloggerpage | icon-provider-dropbox | icon-provider-gdrive |
| icon-provider-gdrivesec | icon-provider-gdriveter | icon-provider-gist |
| icon-provider-github | icon-provider-gplus | icon-provider-ssh |
| icon-provider-stackedit | icon-provider-tumblr | icon-provider-wordpress |
| icon-puzzle | icon-qrcode | icon-quote-left |
| icon-quote-right | icon-refresh | icon-renminbi |
| icon-reply | icon-reply-all | icon-resize-full |
| icon-resize-full-alt | icon-resize-horizontal | icon-resize-small |
| icon-resize-vertical | icon-retweet | icon-right |
| icon-right-big | icon-right-circled | icon-right-dir |
| icon-right-hand | icon-right-open | icon-road |
| icon-rocket | icon-rss | icon-rss-squared |
| icon-rupee | icon-scissors | icon-search |
| icon-share | icon-shield | icon-shuffle |
| icon-signal | icon-sitemap | icon-smile |
| icon-sort | icon-sort-alt-down | icon-sort-alt-up |
| icon-sort-down | icon-sort-name-down | icon-sort-name-up |
| icon-sort-number-down | icon-sort-number-up | icon-sort-up |
| icon-spinner | icon-star | icon-star-empty |
| icon-star-half | icon-star-half-alt | icon-stethoscope |
| icon-stop | icon-strike | icon-subscript |
| icon-suitcase | icon-sun | icon-superscript |
| icon-table | icon-tablet | icon-tag |
| icon-target | icon-tasks | icon-terminal |
| icon-text-height | icon-text-width | icon-th |
| icon-th-large | icon-th-list | icon-thumbs-down |
| icon-thumbs-down-alt | icon-thumbs-up | icon-thumbs-up-alt |
| icon-ticket | icon-tint | icon-to-end |
| icon-to-end-alt | icon-to-start | icon-to-start-alt |
| icon-trash | icon-truck | icon-umbrella |
| icon-underline | icon-unlink | icon-up |
| icon-up-big | icon-up-circled | icon-up-circled2 |
| icon-up-dir | icon-up-hand | icon-up-open |
| icon-upload | icon-upload-cloud | icon-user |
| icon-user-md | icon-users | icon-video |
| icon-videocam | icon-volume-down | icon-volume-off |
| icon-volume-up | icon-won | icon-wrench |
| icon-yen | icon-zoom-in | icon-zoom-out |
Backslash Escapes
Terkadang kita ingin menuliskan suatu karakter yang merupkan kode yang akan diinterpretasi oleh Markdown. Untuk menghindari karakter terebut diinterpretasi menjadi kode Markdown, kita perlu menambahkan tanda backslash tiap sebelum karakter yang bersangkutan.
\` \! \*Kode di atas akan menghasilkan ` ! * tanpa menginterpretasikan menjadi kode Markdown
Tautan
Kita dapat mencantumkan tautan ke alamat situs lain maupun ke salah satu bagian dari halaman yang sama. Untuk mencantumkan tautan Anda dapat menuliskan
Kode
[Git-hub](http://www.github.com)Interpretasi
Kurung siku [ ]berguna untuk menuliskan teks yang ditampilkan dan kurung ( ) berguna untuk meletakkan alamat tautan yang bersangkutan.
Untuk membuat tautan ke bagian dari halaman yang sama Kita dapat menulis kode :
<a id="tag-tujuan"> tujuan </a>
[Ke tag tujuan](#tag-tujuan)
Saya mencoba meletakkan id di bagian akhir dari halaman ini, sehingga ketika Anda menekan tauatan berikut : tautan ke tujuan , Anda akan di bawa ke bagian Salam hangat, di mana saya mencantumkan id tag-tujuan pada bagian tersebut.
Blok Kode
Menuliskan kode program juga dapat dilakukan dengan menambahkan tiga tanda petik di awal dan akhir kode program.
Kode
```C
#include <stdio.h>
int main (int argc, char ** argv) {
printf("Halo dunia!!");
return 0;
}
```
#include <stdio.h>
int main (int argc, char ** argv) {
printf("Halo dunia!!");
return 0;
}Kita dapat secara spesifik menentukan highlight untuk bahasa tertentu yaitu dengan menambahkan nama bahasa yang digunakan setelah tanda triple backtick. Selain menggunakan triple backtick, kita juga bisa menggunakan single backtick untuk menuliskan kode in-line seperti ini echo "Halo Dunia".
Tips : Anda dapat memilih extension apa yang digunakan untuk me-highlight kode program apakah Prettify atau Highlight.js. Pengaturan dapat dilakukan dengan mengubah setting pada Settings > Markdown Extra.
Tabel
Untuk membuat tabel kita dapat menggunakan syntax Markdown Extra berikut :
Kode
| Barang | Harga |
| -------- | --- |
| Beras | Rp 13.000 |
| Gula | Rp 8.500 |
| Bawang | Rp 5.600 |Interpretasi
Barang Harga Beras Rp 13.000 Gula Rp 8.500 Bawang Rp 5.600
Atau kita dapat membuat tabel dengan kolom yang lebih banyak dan memanfaatkan alignment :
Kode
| Barang | Harga | Jumlah |
| :------- | ----: | :-----: |
| Beras | Rp 13.000 | 10 |
| Gula | Rp 8.500 | 2 |
| Bawang | Rp 5.600 | 1 |Interpretasi
Barang Harga Jumlah Beras Rp 13.000 10 Gula Rp 8.500 2 Bawang Rp 5.600 1
Ekspresi Matematika LaTeX
Kita dapat menulis persamaan matematika dengan mudah menggunakan di Stackedit. Informasi lebih jauh dapat dilihat di http://math.stackexchange.com. Untuk informasi mengenai dapat dilihat di sini. Untuk memastikan persamaan matematika dirender dengan benar, include MathJax ke template html Anda:
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>Berikut adalah contoh penggunaan pada Stackedit :
Contoh 1
Kode
Fungsi *Gamma* memenuhi $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ melalui persamaan integral *Euler*
$$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt $$
Interpretasi
Fungsi Gamma memenuhi melalui persamaan integral Euler
Contoh 2
Kode
Deret tak hingga dari bilangan natural $1 + 2 + 3 + 4 + ...$ merupakan suatu deret yang divergen. Jumlah $n$ deret pertama dari deret tersebut adalah bilangan segitiga
$$ \sum^{n}_{k=1}{\dfrac{n(n+1)}{2}} $$
Teori *Ramanujan Summation* dan regularisasi fungsi *zeta* memberikan nilai $-\frac{1}{12}$ untuk penjumlahan tak hingga, sehingga penjumlahan deret tak hingga dinyatakan dengan persamaan
$$ \sum^{\infty}_{k=1}{\dfrac{n(n+1)}{2}}=-\dfrac{1}{12} $$
Interpretasi
Deret tak hingga dari bilangan natural merupakan suatu deret yang divergen. Jumlah deret pertama dari deret tersebut adalah bilangan segitiga
Teori Ramanujan Summation dan regularisasi fungsi zeta memberikan nilai untuk penjumlahan tak hingga, sehingga penjumlahan deret tak hingga dinyatakan dengan persamaan
Diagram
Kita juga dapat membuat diagram sekuensial seperti ini:
Kode
```sequence
Abati->Ummi: Assalamu'alaikum Ummi..
Note right of Ummi: Ummi menjawab
Ummi->Abati: Wa'alaikumussalam Abati..
```
Dan flowchart seperti ini:
Kode
```flow
st=>start: Mulai
e=>end: Selesai
op=>operation: Proses
cond=>condition: Ya atau Tidak?
st->op->cond
cond(yes)->e
cond(no)->op
````
Koreksi saya bila salah
Salam hangat,
Tirtadwipa Manunggal
tirtadwipa.manunggal@gmail.com
No comments:
Post a Comment