erwinweb

Blog seputar IT, Tutorial, Perjalanan dan Kegiatan

Menggunakan Prism.js di Next.js
Menggunakan Prism.js di Next.js

Diposting tanggal

Prism.js adalah salah satu syntax highlighter populer yang banyak digunakan di website ternama seperti smashingmagazine, css-tricks, sitepoint dsb, untuk menampilkan “styled code boxes” seperti dibawah ini

<html>
<body>
  <div>
    <h1>Hello</h2>
    <h2>I'm some styled syntax!</h2>
  </div>
</body>
</html>

Untuk pemasangan pada website “tradisional” caranya cukup mudah hanya tinggal download filenya atau bisa menggunakan CDN lalu sertakan file css dan js maka prismjs akan bekerja secara otomatis.

<html>
<head>
  <link href="https://unpkg.com/prismjs/themes/prism.css" rel="stylesheet" />
</head>
<body>
  <pre><code class="language-html">&lt;html&gt;
&lt;body&gt;
  &lt;div&gt;
    &lt;h1&gt;Hello&lt;/h2&gt;
    &lt;h2&gt;I'm some styled syntax!&lt;/h2&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
  <script src="https://unpkg.com/prismjs/prism.js"></script>
</body>
</html>

Tapi untuk pemasangan di Framework Next.js berbeda karena konsep Next.js akan memuat halaman awal sekali saja, maka ketika berpindah ke halaman lainnya syntax highlighter tidak akan bekerja.

Untuk mengatasi hal itu, salah satu caranya adalah menjalankan prismjs secara manual disetiap halaman yang dibuka.

Berikut tutorial sederhana membuat halaman Home & Detail dengan Next.js yang nantinya di halaman Detail akan menampilkan artikel yang menggandung kode untuk dipakai syntax highlighter.

Buka terminal lalu ketik command berikut

mkdir next-prism && cd next-prism
npm init -y && npm install next react react-dom prismjs

Command tsb akan membuat folder next-prism sekaligus memasang depedensi yang diperlukan

Edit file package.json dan sesuaikan npm-script seperti berikut

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

Sehingga kode akhir file package.json kurang lebih seperti berikut

{
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^11.0.1",
    "prismjs": "^1.24.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

Selanjutnya buat folder pages dan buat 2 file di dalam folder tsb yaitu file index.js dan detail.js

Isi kode dibawah untuk file index.js

import Link from 'next/link'

function Home() {
  return (
    <>
      <h1>Hai, selamat datang.</h1>
      <p>Artikel terbaru:</p>
      <ul>
        <li><Link href="/detail"><a>Belajar HTML</a></Link></li>
      </ul>
    </>
  )
}
export default Home

Dan kode dibawah untuk file detail.js

import { useEffect } from 'react'
import Link from 'next/link'

import 'prismjs/themes/prism-tomorrow.css'
import prism from 'prismjs'
prism.manual = true

function Detail() {
  useEffect(() => {
    prism.highlightAll()
  }, [])
  return (
    <>
      <h1>Belajar HTML</h1>
      <p>HTML adalah bahasa markup standar untuk halaman Web.</p>
      <p>Dengan HTML Anda dapat membuat Website Anda sendiri.</p>
      <p>HTML mudah dipelajari - Berikut contoh syntax HTML</p>
      <pre><code className="language-html">{`<!DOCTYPE html>
<html>
<title>Belajar HTML</title>
<body>
  <h1>Ini adalah heading</h1>
  <p>Ini adalah paragraph.</p>
</body>
</html>`}</code></pre>
      <p>Bersambung...</p>
      <Link href="/"><a>Kembali ke home</a></Link>
    </>
  )
}
export default Detail

Perhatikan isi file detail.js. Untuk menjalankan fungsi ketika DOM siap, kita menggunakan React hook “useEffect“. Kita hanya ingin menjalankan highlightAll() sekali ketika DOM komponen sudah siap, jadi kita menambahkan array kosong [] sebagai parameter kedua ke hook useEffect(), yang sama dengan metode componentDidMount() dalam komponen class React.

Selesai, tinggal jalankan command npm run dev untuk melihat hasilnya

next.js prism.js

Tips

Tutorial diatas hanya akan menjalankan syntax highlighter pada halaman /detail saja. Untuk bisa menjalankannya disetiap halaman maka kita harus import file css di pages/_app.js dan import file js di components/layout.js

// pages/_app.js
import '../styles/global.css'
import 'prismjs/themes/prism-tomorrow.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// components/layout.js
import prism from 'prismjs'
prism.manual = true

function Layout(props) {
  useEffect(() => {
    prism.highlightAll()
  }, [])

  // ...
}

Silahkan baca lebih lanjut tentang _app.js disini dan tentang layout.js disini.

Terimakasih, semoga bermanfaat 🙂