Next.js Projelerinde Highlight.js Kullanımı: Kodları Parlatmanın Yolu

Merhaba! Kodlarınızın sadece çalışmasını değil, aynı zamanda göz kamaştırmasını istiyorsanız doğru yerdesiniz. Bugün, Next.js projelerinizde Highlight.js kullanarak kodları nasıl parlak bir şekilde göstereceğinizi öğreneceksiniz. Hazırsanız başlayalım!

1. Highlight.js Kütüphanesini Ekleyelim

Öncelikle projeye Highlight.js'yi ekliyoruz. Bunun için aşağıdaki komutlardan birini kullanabilirsiniz:

# npm kullananlar için
npm install highlight.js

# yarn kullananlar için
yarn add highlight.js

Bu kadar basit! Şimdi, Highlight.js ile kodları renklendirme zamanı.

2. Stilleri Ekleyelim

Kodların güzel görünmesi için Highlight.js'nin sunduğu hazır stilleri projeye dahil etmemiz gerekiyor. Ben koyu temaları sevdiğim için github-dark temasını tercih ettim. İsterseniz farklı bir tema da seçebilirsiniz.

Projenizin styles klasörüne gidin ve aşağıdaki stilleri ekleyin:

@import "highlight.js/styles/github.css";
@import "highlight.js/styles/github-dark.css";

Eğer CSS kullanıyorsanız, scss yerine doğrudan .css dosyasını import edebilirsiniz. Bu stiller, kod bloklarınıza estetik bir görünüm kazandıracak.

3. Dilleri Tanımlayalım

Highlight.js'nin hangi dilleri renklendireceğini belirtmemiz gerekiyor. Örneğin, JavaScript kullanıyorsanız şu şekilde tanımlama yapabilirsiniz:

import hljs from "highlight.js";
import javascript from "highlight.js/lib/languages/javascript";

hljs.registerLanguage("javascript", javascript);

Bu kod, JavaScript kod bloklarının Highlight.js tarafından işlenmesini sağlar. İhtiyacınıza göre farklı dilleri de ekleyebilirsiniz.

4. Kodları Renklendirme

Şimdi geldik en önemli adıma: Highlight.js'yi kod bloklarında etkinleştirme. Bunun için useEffect hook'u ile Highlight.js'yi başlatıyoruz. İşte örnek bir bileşen:

import { useEffect } from "react";
import hljs from "highlight.js";

const CodeBlock = ({ code }) => {
  useEffect(() => {
    hljs.initHighlighting();
  }, []);

  return (
    <pre>
      <code>{code}</code>
    </pre>
  );
};

export default CodeBlock;

Bu bileşen, kodlarınızı highlight ile işlenmiş bir şekilde ekranda gösterecektir. Artık kodlarınız sadece mantıklı değil, aynı zamanda şık görünecek!

Bonus: Performansı Artırmak

Eğer çok fazla kod bloğunuz varsa, performansı artırmak için initHighlighting yerine highlightBlock kullanabilirsiniz:

import { useEffect, useRef } from "react";
import hljs from "highlight.js";

const CodeBlock = ({ code }) => {
  const codeRef = useRef(null);

  useEffect(() => {
    hljs.highlightBlock(codeRef.current);
  }, []);

  return (
    <pre>
      <code ref={codeRef}>{code}</code>
    </pre>
  );
};

export default CodeBlock;

Bu yöntem, yalnızca ilgili kod bloğunu renklendirir ve performansı artırır.

İşte bu kadar! Artık Next.js projelerinizde Highlight.js kullanarak kodları göz alıcı bir şekilde gösterebilirsiniz. Kodlarınız sadece çalışmasın, göz doldursun!