Menulis Buku dengan Markdown

Kemarin saya menulis buku dengan Markdown. Menulis buku dengan markdown bagi saya lebih mudah dibanding menggunakan Word Processor.

Kemudian untuk mengkonversinya menjadi dokumen yang siap dibaca (PDF) saya menggunakan pendekatan HTML based, bukan Latex. Pendekatan menggunakan Latex menurutku lebih rumit baik dari segi instalasi dan penggunaannya.

Kelebihan menulis dokumen menggunakan Markdown menurut saya…

Pertama tentang konsistensi. Markdown mmepunyai konsistensi penulisan. Konsistensi penggunaan heading dalam struktur tulisan.

Kedua, sintaknya bersih. kalau kita melihat struktur di markdown maka itu adalah struktur dokumen. Kalau di word processor, banyak style yang melekat pada text, sehingga penampakan tulisan terlihat terstruktur padahal aslinya banyak yang terlihat terstruktur karena inline style.

Ketiga, perubahan stylenya sangat mudah. Sebenarnya di word processor juga bisa, hanya saja menggunakan word processor mudah tergoda untuk melakukan intervensi pada text menggunakan inline style.

Keempat fleksibel, karena format markdown mudah untuk dikonversi ke format lain seperti PDF, HTML, dan gambar.

Extension markdown di VSCode

Saya memanfaatkan 2 Extension untuk menulis Markdown

1. Markdown All In One: Utility khusus untuk keperluan-keperluan mardown termasuk untuk konversi ke PDF atau HTML
2. Markdown Preview Github Styling : untuk menampilkan preview Markdown pada VSCode.

Print ke PDF dan HTML

Di “Markdown All in” sudah ada fasilitas untuk konversi ke PDF dan HTML. Tapi nampaknya fasilitas ini hanya memanfaatkan fitur save pdf pada Chrome Engine.

Jika saya export ke html, saya buka dan saya save as PDF dari browser hasilnya sama.

Pengalaman-Pengalaman

Pengalaman yang saya maksud adalah pengalaman save PDF dari web browser.

1. Pagebreak

Untuk membuat pagebreak kita perlu menyisipkan skrip ini

<div style="page-break-before: always;" />

2. Pengaturan Halaman dan mengubah Tulisan Header Footer

Jika kita mencetak dari halaman web via chrome, biasanya header footernya tidak sesuai keinginan. Kita bisa mensetup agar sesuai keinginan dengan menambahkan CSS pada halaman HTML konversi dari Markdown.

@page {
  size: A4;
  margin: 20mm;
  
  @top-left {
    content: "SQL for Business Analyst 2025";
  }
  
  @bottom-right {
    content: "Page " counter(page);
  }
}

3. Menggabungkan Markdown 

Penggabungan makdown bisa saya lakukan sengan Python

4. Penggabungan PDF 

Penggabungan PDF saya  lakukan dengan Python, namun sayangnya daftar isinya yang bisa di klik jadi tidak bisa bekerja dengan baik. masih saya cari solusinya.

Ok segitu dulu sebagai pengingat nanti kalau ada update akan sampaikan di postingan ini.

5. Penambahan Cover

Untuk penambahan cover saya membuat cover denagn canva. lalu saya menambahkan CSS berikut:

@page {
  size: A4;
  margin: 20mm;
  
  @top-left {
    content: "SQL for Business Analyst 2025";
  }
  
  @bottom-right {
    content: "Page " counter(page);
  }
}

  @page :first { 
    size: A4;
    margin: 0 !important;
    padding: 0 !important;
   
    
    /* Nonaktifkan SEMUA header/footer */
    @top-left { content: "" !important; }
    @top-center { content: "" !important; }
    @top-right { content: "" !important; }
    @bottom-left { content: "" !important; }
    @bottom-center { content: "" !important; }
    @bottom-right { content: "" !important; }
  }

.cover {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 210mm !important;
    height: 297mm !important;
    overflow: hidden;
    
    /* Untuk gambar cover */
    
    img {
      position: absolute;
      top: -0.25mm !important;  /* Kompensasi jika perlu */
      left: -0.25mm !important;	 
      width: calc(100% + 2mm) !important;
      height: calc(100% + 2mm) !important;
      object-fit: cover;
    }
    
  }

Lalu pada bagian gambar tambahkan

<div class="cover">
<img src="gambar/cover.jpg" alt="alt" style="width:100%;height:100%;object-fit:cover;">
</div>

Memang di browser covernya terlihat tidak bagus, namun kalau disimpan menjadi PDF tampilan covernya sudah cukup sempurna.

6. Mengescape halaman dari Daftar Isi

Gunakan perindah berikut

<!-- omit in toc -->

7. Membuat Daftar Isi Otomatis

Tekan “Ctrl + Shift + P”
kemudian pilih Markdown All in One : Create Table of Contents

Maka secara otomatis akan tergenerasi daftar isi sesuai dengan Table of Content.

Oke segitu dulu, kalau ada yang baru nanti akan kita tambahkan 🙂