menggunakan rehype pretty code untuk syntax highlighting code di markdown file

syarif th

czanc

31 Juli 2024

learn++ markdown

dengan menggunakan package rehype pretty code kita bisa menghighlight text code di file markdown kita ketika di tampilkan di browser

rehype-pretty-code adalah sebuah plugin yang dibuat oleh shiki, syntax highlighter untuk block kode di markdown atau mdx file. yang bekerja di server saat build time (menghindari runtime syntax hightlighting) dan juga bekerja di client untuk highlighting secara dinamis

Editor-Grade Highlighting

kita dapat menggunakan syntax highlighting milik kode editor VS Code yang dimana populer dengan banyaknya ekosistem tema warnanya.

Line Numbers and Line Highlighting

kita dapat meng-highlight baris kode untuk menekankan perhatian pembaca padanya

  • {4} ini berfungsi untuk memberikan highlight pada baris ke 4
  • showLineNumbers berfungsi untuk menampilkan nomor baris pada blok kode
```js {4} showLineNumbers
import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
}
```

syntax di atas akan tampil seperti di bawah ini

import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
}

Word Highlighting

kita juga bisa meng-highlight pada satu kata untuk menonjolkan kata tersebut di antara yang lainnya

  • /floatingStyles/ kita dapat meng-highlight kata dengan tanda / / dan meletakan kata yang ingin di highlight di antara tanda garis miring tersebut
```js /floatingStyles/
import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
}
```

syntax di atas akan meng-hightlight kata floatingStyles seperti di bawah ini

import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
}

ANSI Highlighting

kita juga dapat meng-highlight ANSI

```ansi
  vite v5.0.0 dev server running at:
 
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
 
  ready in 125ms.
 
8:38:02 PM [vite] hmr update /src/App.jsx
```
 
Inline ANSI: `> Local: http://localhost:3000/{:ansi}`
 
---

hasil dari syntax di atas akan tampak seperti di bawah ini

  vite v5.0.0 dev server running at:
 
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
 
  ready in 125ms.
 
8:38:02 PM [vite] hmr update /src/App.jsx

Inline ANSI: > Local: http://localhost:3000/

Kitchen Sink Meta Strings

kita dapat mengkombinasikan key dari rehype pretty code plugins seperti di bawah ini

  • showLineNumbers untuk menampilkan nomor baris
  • {2-4} untuk meng-highlight baris 2 sampai baris ke 4
  • title="isEven.js" untuk memberikan judul atau nama file misal untuk blok kode terkait
  • /console/ untuk meng-highlight kata console di blok kode terkati
  • caption="I am caption" untuk memberikan caption di bawah blok kode
```js showLineNumbers {2-4} title="isEven.js" /console/ caption="Im a caption"
function isEven(number) {
  if (number === 1) {
    return false;
  } else if (number === 2) {
    return true;
  } else if (number === 3) {
    return false;
  } else if (number === 4) {
    return true;
  } else if (number === 5) {
    return false;
  } else {
    return "Number is not between 1 and 5.";
  }
}
 
// Example usage:
console.log(isEven(3)); // Should return false
console.log(isEven(4)); // Should return true
console.log(isEven(10)); // Should return "Number is not between 1 and 5."
```

syntax di atas akan tampil seperti di bawah ini

isEven.js
function isEven(number) {
  if (number === 1) {
    return false;
  } else if (number === 2) {
    return true;
  } else if (number === 3) {
    return false;
  } else if (number === 4) {
    return true;
  } else if (number === 5) {
    return false;
  } else {
    return "Number is not between 1 and 5.";
  }
}
 
// Example usage:
console.log(isEven(3)); // Should return false
console.log(isEven(4)); // Should return true
console.log(isEven(11)); // Should return "Number is not between 1 and 5."
Im a caption