Sintaks sederhana Markdown menjadikannya alternatif yang sangat baik untuk HTML. Bahasa selalu mendukung penyematan HTML, tetapi sekarang Anda dapat pergi ke arah lain dan menyematkan Penurunan Harga di HTML.

Menggunakan perpustakaan sederhana, Anda dapat meng-host Markdown tertanam di halaman web Anda dan mengubahnya menjadi HTML yang tepat dengan cepat.

Apa yang Dilakukan md-block?

Proses Anda saat ini mungkin melibatkan pembuatan file penurunan harga dengan tangan, kemudian mengubahnya menjadi HTML. Ini adalah cara kerja aplikasi CMS modern. Atau Anda dapat menggunakan kerangka kerja seperti Sudut untuk membuat penurunan harga menjadi halaman.

Pustaka md-block tidak sepenuhnya merupakan alternatif; sebagai gantinya, ini memenuhi kasus penggunaan yang sedikit berbeda. Ini mengubah penurunan harga sebaris menjadi HTML yang setara. Anda dapat menyematkan Penurunan Harga di file HTML Anda dan merendernya di klien, pada waktu permintaan.

Inilah yang mungkin terlihat seperti:

<html>
<kepala>...</head>





instagram viewer

<tubuh>
<md-blok>
# Menuju
Beberapa penurunan harga *tertanam* yang dapat dikonversi oleh `md-block` untuk Anda!
</md-block>
</body>
</html>

Sebaiknya ratakan kiri kode penurunan harga yang disematkan, tanpa lekukan awal. Ini karena spasi di depan dapat menjadi signifikan dalam Penurunan harga, tidak seperti HTML.

Pustaka memperkenalkan elemen HTML kustomnya sendiri, md-blok. Meskipun elemen ini bukan bagian dari standar HTML, ini adalah teknik yang valid. Standar Komponen Web (MDN) menyertakan API yang disebut Elemen Kustom. API ini mendukung pendaftaran dinamis elemen kustom menggunakan JavaScript.

Sebelum memuat pustaka md-block, halaman ini akan dirender dengan cara yang sudah dikenal:

Tentu saja, Anda dapat menata elemen md-block sehingga terlihat lebih seperti di editor teks. Dengan spasi putih yang telah diformat sebelumnya dan font monospace, setidaknya sedikit lebih mudah untuk dibaca:

<gaya>md-block { spasi-putih: pra; font-family: monospace; }</style>

Anda mungkin menginginkan hasil seperti ini jika Anda menulis tutorial tentang Penurunan Harga. Ini memungkinkan Anda untuk menjelaskan sintaks Markdown sambil membiarkan Anda mengedit sampel Markdown Anda dengan mudah:

Tapi trik pesta md-block adalah mengubah penurunan harga itu menjadi HTML final.

Bahkan dengan gaya browser default, konten sekarang ditampilkan seperti HTML biasa Anda, meskipun Anda mengirimkannya ke browser sebagai Penurunan harga:

Cara Menggunakan md-block

Setelah Anda menambahkan perpustakaan md-block ke halaman Anda, Anda dapat menulis penurunan harga di md-blok elemen. Pustaka kemudian akan memformat Penurunan Harga Anda secara otomatis, dan Anda dapat melanjutkan penyematan Penurunan Harga sesuai kebutuhan.

Namun, ada beberapa variasi pada proses ini.

Sumber Script dari Jarak Jauh atau Instal Sendiri

Cara termudah untuk memulai adalah dengan merujuk perpustakaan dari situs web md-block resmi:

<jenis skrip ="modul" src="https://md-block.verou.me/md-block.js"></script>

Ini mungkin bukan pendekatan yang paling efisien, tapi ini pasti yang tercepat. Cukup tambahkan kode ini ke Anda kepala dan halaman Anda akan secara otomatis merender apa pun dalam elemen md-block ke HTML:

Anda tentu saja dapat mengunduh file JavaScript itu dan menyimpannya di situs Anda sendiri. Atau Anda dapat menginstalnya melalui npm:

npm Install md-memblokir

Blok Penurunan Harga vs. Penurunan harga sebaris

Elemen default, dinamai menurut perpustakaan itu sendiri, adalah md-blok. Tetapi Anda juga dapat menggunakan md-span elemen untuk penurunan harga sebaris, seperti teks di tengah kalimat:

Kasus penggunaan untuk penurunan harga sebaris mungkin kurang umum, tetapi Anda tetap dapat menggunakannya:

<p>Sebuah paragraf HTML yang berisi <md-span>*miring*</md-span> teks.</p>

Bagaimana Sintaks Sorot Blok Kode Markdown Dengan Prism

Prisma adalah penyorot sintaks yang dibuat bersama oleh Lea Verou, pencipta md-block. Anda dapat menggunakannya untuk menyorot blok kode yang telah diformat sebelumnya di halaman web, termasuk yang dihasilkan oleh md-block.

Jadi, dengan HTML ini:

<html>
<tubuh>
<md-blok>
```javascript
fungsikotak(nomor) {
kembali nomor * nomor;
}
```
</md-block>
<skrip src="prisma.js"></script>
</body>
</html>

Anda akan melihat kode yang diformat dengan baik dengan penyorotan yang sadar secara sintaksis:

Pilihan Anda Untuk Menulis Online Baru Meningkat

Bagaimana Anda menggunakan md-block terserah Anda, tetapi ada banyak potensi untuk solusi inventif menggunakannya. Anda dapat menggunakannya untuk menjalankan CMS yang sangat ringan bagi penulis yang percaya diri menggunakan Markdown, tetapi bukan HTML.

Penurunan harga adalah bahasa yang sempurna untuk khalayak umum. Adopsinya oleh alat seperti Slack kemungkinan besar akan meningkatkan penggunaan lebih jauh.