Secara default, Hugo nggak mendukung syntax highlighting untuk Pug. Contohnya aja seperti di bawah ini:
doctype html html head title Hello world meta(charset="utf-8") body h1.text-center Hello world Maka, kita akali dengan menggunakan syntax highlighting Javascript:
doctype html html head title Hello world meta(charset="utf-8") body h1.text-center Hello world
Buat kode berikut di /layouts/shortcodes/html.html:
{{ .Inner }} Untuk menggunakannya, contohnya seperti di bawah ini:
{{< html >}} <details> <summary>Spoiler</summary> <p>Halo <strong>Zen</strong></p> </details> {{< /html >}} Hasilnya:
Spoiler Halo Zen
Pastikan dulu blogmu yang Hugo sudah memanggil jQuery di <head></head>.
Lalu, letakkan pug.js di /static/. Pug JS bisa kamu dapatkan di /pug.js.
Letakkan kode berikut ini di /layouts/shortcodes/pug.html:
{{ $acak := index (seq 999 | shuffle) 0 }} <div class="tes-{{ $acak }}"></div> <script src="/pug.js"></script> <script> pug = require("pug") $(".tes-{{ $acak }}").html(pug.compile("{{ .Inner }}")) </script> Untuk menggunakannya, kamu tinggal menggunakan tag {{< pug >}}{{< /pug >}}. Contohnya aja seperti di bawah ini:
