React’te Bir Kod Bloğuna Sözdizimi Vurgulama Nasıl Eklenir?

React içinde bir kod bloğuna sözdizimi vurgulama eklemek için çeşitli araçlar bulunabilir. Bu araçlar arasında en yaygın olanı, açık kaynak kodlu bir JavaScript kütüphanesi olan “prism.js” dir.

Prism.js kullanarak, React içindeki bir kod bloğuna sözdizimi vurgulama eklemek için aşağıdaki adımları izleyebilirsiniz:

Prism.js kütüphanesini projenize ekleyin: Prism.js’yi kullanmak için, ilk olarak kütüphaneyi projenize dahil etmeniz gerekir. Bunun için npm kullanabilirsiniz ve aşağıdaki komutu kullanabilirsiniz:

npm install prismjs

Prism.js stil dosyalarını projenize ekleyin: Prism.js’yi kullanmak için, stil dosyalarını da projenize dahil etmeniz gerekir. Bunun için stil dosyalarını projenizin CSS klasörüne veya başka bir klasöre ekleyebilirsiniz.

Kod bloğunu vurgulamak için pre ve code etiketlerini kullanın: Kod bloğunu vurgulamak için, kod bloğunu React componenti içinde pre ve code etiketleri arasında kullanabilirsiniz. Ayrıca, code etiketine bir class atama yapmanız gerekir, böylece Prism.js hangi dildeki vurgulama yapması gerektiğini anlayabilir.

Örnek olarak, aşağıdaki React componenti içinde JavaScript kod bloğunun vurgulanması gösterilmiştir:

import React from "react";

const CodeBlock = () => {
  return (
    <pre>
      <code className="language-javascript">
        {`
          function helloWorld() {
            console.log("Hello, World!");
          }
        `}
      </code>
    </pre>
  );
};

export default CodeBlock;