Menulis Enak dengan Markdown

Beberapa waktu yang lalu saya pernah menyinggung sedikit tentang markdown. Nah, sekarang di sini saya ingin menyajikan sebuah skenario enak untuk menulis dan menampilkan tulisan format markdown kita dalam output HTML.

Pertama, kita siapkan Sublime Text 3. Entahlah, kenapa tiap hari saya tiap menikmati Sublime Text ini. Ringan dan… dan sebagainya…

Oiya, pada tulisan kali ini saya asumsikan kita sudah menginstal PHP ya..

Kedua, download library Parsedown di http://parsedown.org/. Kita cukup menggunakan file Parsedown.php.

Ketiga, untuk meng-highlight sintaks yang kita tampilkan, saya menganjurkan untuk menggunakan Highlight.js di https://highlightjs.org/.

Keempat, sebagai css dokumen markdown kita, saya menggunakan Github Markdown CSS di https://github.com/sindresorhus/github-markdown-css.

Selanjutnya, tinggal kita menyusun sebuah sintaks PHP dengan isi berikut… Jadi deh…!

<?php 

include 'Parsedown.php';
$Parsedown = new Parsedown();
$data = file_get_contents('G:\tulisan_markdon_anda.md');
echo '<script src="highlight/highlight.pack.js"></script>';
echo '<link rel="stylesheet" href="highlight/styles/idea.css">';
echo '<link rel="stylesheet" href="github-markdown.css">
<style>
    .markdown-body {
        min-width: 200px;
        max-width: 790px;
        margin: 0 auto;
        padding: 30px;
    }
</style>
<article class="markdown-body">';


echo $Parsedown->text($data); # prints: <p>Hello <em>Parsedown</em>!</p>
echo '</article>';
echo '<script>hljs.initHighlightingOnLoad();</script>';

 ?>

Selamat mencoba, dan selamat berakhir pekan… Eh, masih hari Selasa… maaf…

Pos ini dipublikasikan di Catatan, Developer dan tag . Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s