👩‍💻Cara Install Code Highlight di Next.js dan CMS Sanity dengan SyntaxHighlighter

CMS Sanity sendiri sebenarnya sudah menyediakan media untuk input code, code yang saya maksud adalah code yang merupakan bagian dari artikel, biasa dimanfaatkan untuk menunjukkan baris code tertentu. Tapi saya sendiri merasakan fitur input code bawaan Sanity ini masih sangat kurang efisien, terutama untuk artikel tutorial dan development. Teks nya hitam biasa saja dan tidak ada highlight code.

Oke, jadi disini saya mau sharing cara install code highlight di Next.js dan Sanity agar blog makin terlihat ciamik.

Install Library Code input

npm install @sanity/code-input

Tambahkan plugin ke sanity.config.ts

Setelah menginstall sanity/code-input, selanjutnya tambahkan plugin tersebut di sanity.config.ts

import {codeInput} from '@sanity/code-input'
export default defineConfig({
  // ...
  plugins: [codeInput()],
})

Edit Schema Post

Masuk ke folder schemas, dan edit file post.ts

Sebelumnya kita sudah memiliki objek yang berisi detail "content", tugas kita adalah menambahkan field baru

Objek lama

defineField({
      name: 'content',
      title: 'Content',
      type: 'array',
      of: [
        {
          type: 'block',
        },
       ],
    }),

Objek baru

Salin Code

defineField({
      name: 'content',
      title: 'Content',
      type: 'array',
      of: [
        {
          type: 'block',
        },
        {
          type: 'code',
          name: 'code',
          title: 'Code Block',
        },
      ],
    }),

Diatas, saya menambahkan type:code, name dan title nya.

Edit Komponen PostBody

Dalam project ini, komponen PostBody.tsx digunakan untuk menampilkan post atau artikel, maka komponen ini yang selanjutnya di edit.

oh iya, untuk menampilkan highlight code pada frontend react, kita bisa menggunakan library react-syntax-highlighter.

npm i react-syntax-highlighter

Setelah itu kita lanjut ke komponen PostBody.tsx dan buat constanta serializers.

import SyntaxHighlighter from 'react-syntax-highlighter'

  const serializers = {
    types: {
      code: ({ value }: any) => (
        <div className="my-2" key={value.key}>
          <SyntaxHighlighter language={value.language}>
            {value.code}
          </SyntaxHighlighter>
        </div>
      ),
    },
  }

Pada fungsi return, saya panggil const serializers kedalam komponen Portabletext:

<PortableText value={content} components={serializers} />

Hasil akhir

/**
 * This component uses Portable Text to render a post body.
 *
 * You can learn more about Portable Text on:
 * https://www.sanity.io/docs/block-content
 * https://github.com/portabletext/react-portabletext
 * https://portabletext.org/
 *
 */
import { PortableText } from '@portabletext/react'

import styles from './PostBody.module.css'
import SyntaxHighlighter from 'react-syntax-highlighter'

export default function PostBody({ content }) {
  const serializers = {
    types: {
      code: ({ value }: any) => (
        <div className="my-2" key={value.key}>
          <SyntaxHighlighter language={value.language}>
            {value.code}
          </SyntaxHighlighter>
        </div>
      ),
    },
  }

  return (
    <div className={`mx-auto max-w-2xl ${styles.portableText}`}>
      <PortableText value={content} components={serializers} />
    </div>
  )
}

Yang dilakukan pertama adalah membuat constanta baru yang mendefinisikan sebuah objek dengan nama "serializers" yang memiliki properti "types". Properti "types" ini berisi sebuah objek lain yang memiliki properti "code". Properti "code" tersebut merupakan sebuah fungsi yang menerima satu parameter dengan nama "value".

Lalu pada fungsi return, dimasukkan ke dalam komponen <PortableText dengan properti components yang mengacu pada objek “serializers”.

Oke demikian cara mudah install code highlight atau code input di Next.js dan CMS Sanity, semoga membantu.

Preview

Referensi dari sepuh:

https://note.leoxyz.com/post/rendering-code-blocks-in-sanity-and-next-js

https://dev.to/hosenur/implementing-code-input-highlighting-in-next-js-sanity-blog-40he