Cara mengaktifkan syntax highlight Markdown di Hugo

Tanggal: Sabtu, 26 Desember 2020. 07:02:52 WIB
Penulis: selene
Tags: Hugo

Edit file config
Generate CSS untuk syntax highlight
Menambahkan CSS ke file header.html Hugo
Menggunakan shortcode Syntax Highlight pada Markdown
Mengedit file syntax.css
Penutup
Referensi

Hai!
Selamat pagi teman-teman semua, di post kedua saya ini, saya akan membagikan tutorial cara mengaktifkan syntax highlight Markdown di Hugo.

Gunakan daftar isi diatas untuk memudahkan pencarian tutorial.

Edit file config

Hal pertama yang harus kita lalukan adalan mengedit file config.
Jika teman-teman menggunakan standar YAML, tambahkan konfigurasi berikut ke config.yaml:

pygmentsUseClasses: true

Jika tidak mengaktifkan pygmentsUseClasses hasil syntax highlight nantinya menggunakan in-line CSS dan tidak bisa dikonfigurasi color scheme & stylingnya.
Kita perlu mengaktifkannya agar bisa menggunakan file css syntax.css nantinya, sehingga bisa di styling.

Generate CSS untuk syntax highlight

Jika sudah menambahkan konfigurasi ke dalam file config, maka step selanjutnya adalah meng-generate file CSS untuk syntax highlight.

Hugo menggunakan chroma sebagai syntax highlight, chroma sendiri mempunyai 39 colorscheme bawaan, yaitu:

abap
algol
algol_nu
api
arduino
autumn
base16-snazzy
borland
bw
colorful
dracula
emacs
friendly
fruity
github
igor
lovelace
manni
monokai
monokailight
murphy
native
nord
paraiso-dark
paraiso-light
pastie
perldoc
pygments
rainbow_dash
rrt
solarized-dark
solarized-dark256
solarized-light
swapoff
tango
trac
vim
vs
xcode

Tapi untuk tutorial kita pakai monokai saja.
Jalankan perintah berikut pada terminal:

hugo gen chromastyles --style=monokai > syntax.css

Selanjutnya teman-teman bisa memindahkan / cut file hasil generate tadi ke static folder di Hugo, misal /static/css.

Menambahkan CSS ke file header.html Hugo

Kita sudah meng-generate file CSS syntax.css selanjutnya adalah meng-embed file CSS tadi ke file header.html pada Hugo.

Masuk directory themes jika kalian menggunakan themes.

Buka file layouts/partials/header.html dengan text editor,
lalu tambahkan CSS tadi kebagian <head>:

<link href="/css/syntax.css" type="text/css" rel="stylesheet" media="screen"/>

Lalu simpan file tersebut.

Menggunakan shortcode Syntax Highlight pada Markdown

Selanjutnya teman-teman bisa menggunakan shortcode Hugo berikut pada file Markdown untuk membuat syntax highlight.
Shortcode inilah fitur yang bisa melalukan syntax highlight.

Dibawah ini contoh untuk file HTML:

{{< highlight html>}}
<html lang=en>
<head>
  <meta charset=UTF-8>
  <title>Hello World!</title>
</head>
<body>
  Hello World!
</body>
</html>
{{< / highlight >}}

Akan menghasilkan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>
<body>
  Hello World!
</body>
</html>

Contoh untuk file python:

{{< highlight python >}}
#!/usr/bin/env python3
bil = input('Masukkan bilangan N: ')
try:
    bil = int(bil)
except ValueError:
    exit('Input bukan bilangan bulat')
 
for i in range(bil):
    i += 1
    print('Bilangan ke:', i)
{{< / highlight >}}

Akan menghasilkan:

#!/usr/bin/env python3
bil = input('Masukkan bilangan N: ')
try:
    bil = int(bil)
except ValueError:
    exit('Input bukan bilangan bulat')

for i in range(bil):
    i += 1
    print('Bilangan ke:', i)

Sebenarnya syntax highlight pada Hugo mendukung line number, tapi fitur tersebut akan menyebabkan web menjadi tidak responsive, untuk itu saya tidak menggunakan fitur line number tersebut.

Untuk pilihan highlight lainnya teman-teman bisa menggunakan referensi dibawah.
Save file Markdown, selanjutnya teman-teman bisa mencoba untuk preview.

Mengedit file syntax.css

Langkah ini adalah opsional, tapi sangat saya rekomendasikan untuk dilakukan karena point-nya adalah styling, yaitu mengedit file syntax.css.
Saya merasa stylingnya terlalu plain, maka saya tambahkan override styling berikut agar terlihat rapih & responsive.

Teman-teman bisa edit /css/syntax.css menggukanan text editor.

Sebelum saya edit di line 1:

/* Background */ .chroma { color: #f8f8f2; background-color: #272822 }

Sesudah saya override & tambahkan styling di line 1:

div.highlight > pre { font-family: monospace !important; font-size: 1rem; padding: 15px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; word-break: break-word; }

/* Background */ .chroma { color: #f8f8f2; background-color: #272822; border-radius: 4px; word-wrap: break-word; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }

Simpan file syntax.css, lalu coba preview pada Hugo.
Untuk styling lainnya, teman-teman bebas menambahkan styling apapun.
Bahkan teman-teman bebas merubah colorscheme di syntax.css.

Penutup

Demikian cara mengaktifkan dan menggunakan fitur bawaan syntax highlight pada Hugo, semoga isi post ini bisa bermanfaat buat teman-teman semua.