Bir programlama blogunun en önemli özelliklerinden biri kod bloklarıdır. Bunları bir sözdizimi vurgulayıcı kullanarak biçimlendirmeniz gerekmez, ancak yaparsanız bloglarınızın çok daha güzel görünmesini sağlar. Ayrıca kodunuzun okunabilirliğini de iyileştirebilir.

Bu makale, React'te kod bloklarını vurgulamak için tepki-sözdizimi-vurgulayıcıyı nasıl kullanacağınızı gösterecektir. Sağlanan dilin sözdizimini kullanarak kendisine iletilen kodu vurgulayabilen bir kod bloğu bileşeni oluşturacaksınız.

Sözdizimi Vurgulama tepki-sözdizimi vurgulayıcı ile

Reaksiyon sözdizimi vurgulayıcı, React'i kullanarak kodu vurgulamanıza olanak tanır. diğerlerinden farklı olarak sözdizimi vurgulayıcıları, tepki-sözdizimi-vurgulayıcı, vurgulanan kodu DOM'a tehlikelilySetInnerHTML kullanarak eklemek için ComponentDidUpdate veya ComponentDidMount'a güvenmez.

Bu yaklaşım tehlikelidir çünkü bir uygulamayı siteler arası komut dosyası saldırıları.

Bunun yerine, sanal DOM'yi oluşturmak için bir sözdizimi ağacı kullanır ve onu yalnızca değişikliklerle günceller.

instagram viewer

Bileşen, arka planda PrismJS ve Highlight.js kullanır. Kodunuzu vurgulamak için ikisinden birini kullanmayı seçebilirsiniz. Kullanıma hazır bir stil sağladığı için kullanımı çok kolaydır.

tepki-sözdizimi-vurgulayıcı bileşeni, kod, dil ve stili sahne malzemesi olarak kabul eder. Bileşen, diğer özelleştirme seçeneklerini de kabul eder. Onları şurada bulabilirsiniz: tepki sözdizimi vurgulayıcı belgeleri.

tepki-sözdizimi-vurgulayıcı Bileşenini kullanma

React'te tepki sözdizimi vurgulayıcıyı kullanmaya başlamak için npm aracılığıyla kurun.

npm Yüklemek tepki-sözdizimi-vurgulayıcı --kaydetmek

adlı yeni bir bileşen oluşturun. CodeBlock.js React Uygulamanızda ve içe aktarın tepki-sözdizimi-vurgulayıcı:

içe aktarmak SözdizimiVurgulayıcı itibaren 'tepki-sözdizimi vurgulayıcı';
içe aktarmak { belge } itibaren 'tepki-sözdizimi vurgulayıcı/dist/esm/styles/hljs';
const CodeBlock = ({codestring}) => {
dönüş (
<SözdizimiVurgulayıcı dili="javascript" stil={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

SyntaxHighlighter bileşeni, kullanılacak dili ve stili kabul eder. Ayrıca içeriği olarak kod dizesini alır.

Yukarıdaki bileşeni aşağıdaki gibi oluşturabilirsiniz:

const Uygulama = () => {
const kodDizesi = `
const Kare = (n) => dönüş n * n
 `
dönüş(
<CodeBlock kod dizisi={codeString}/>
 )
}

Reaksiyon-sözdizimi-vurgulayıcı kullanmanın yapı boyutunuzu artırabileceğini unutmamak önemlidir, bu nedenle gerekirse hafif yapıyı içe aktarabilirsiniz. Ancak hafif yapının varsayılan stilleri yoktur.

Ayrıca, kullanmak istediğiniz dilleri içe aktarmanız ve kaydetmeniz gerekecektir. registerDil hafif yapıdan dışa aktarılan işlev.

içe aktarmak { Işık olarak Sözdizimi Vurgulayıcı } itibaren 'tepki-sözdizimi vurgulayıcı';
içe aktarmak js itibaren 'tepki-sözdizimi vurgulayıcı/dist/esm/diller/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Bu bileşen, kodu vurgulamak için Highlight.js kullanır.

Bunun yerine PrismJS'yi kullanmak için, bunu tepki-sözdizimi vurgulayıcı paketinden şu şekilde içe aktarın:

içe aktarmak { prizma olarak Sözdizimi Vurgulayıcı } itibaren "tepki-sözdizimi vurgulayıcı";
içe aktarmak { vscDarkPlus } itibaren "tepki-sözdizimi-vurgulayıcı/dist/esm/stiller/prizma";

Prizma ışık yapısı için PrismLight'ı içe aktarın ve kullandığınız dili kaydedin.

içe aktarmak { PrizmaIşık olarak Sözdizimi Vurgulayıcı } itibaren 'tepki-sözdizimi vurgulayıcı';
içe aktarmak jsx itibaren 'tepki-sözdizimi vurgulayıcı/dist/esm/diller/prizma/jsx';
içe aktarmak prizma itibaren 'tepki-sözdizimi-vurgulayıcı/dist/esm/stiller/prizma/prizma';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Prizma kullanmak, özellikle jsx'i vurgularken faydalıdır çünkü tepki-sözdizimi vurgulayıcı bunu tam olarak desteklemez.

Kod Bloğuna Satır Numaraları Ekleme

Artık bir kod bloğunu nasıl vurgulayacağınızı bildiğinize göre, satır numaraları gibi ekstra özellikler eklemeye başlayabilirsiniz.

tepki-sözdizimi-vurgulayıcı ile yalnızca geçmeniz gerekir showLineNumbers SyntaxHighlighter bileşenine ve onu true olarak ayarlayın.

<SözdizimiVurgulayıcı dili="javascript" style={docco} showLineNumbers="doğru">
 {codeString}
</SyntaxHighlighter>

Bileşen şimdi kodunuzun yanında satır numaralarını gösterecektir.

Bileşeninizde Özel Stilleri Kullanma

tepki-sözdizimi-vurgulayıcı stil sağlamanıza rağmen, bazen kod bloklarınızı özelleştirmeniz gerekebilir.

Bunun için paket, satır içi geçiş yapmanızı sağlar. CSS stilleri aşağıda gösterildiği gibi customStyle desteğine:

<SözdizimiVurgulayıcı dili="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5 piksel", arka plan rengi: "#001E3C"}} >
 {kod dizisi}
</SyntaxHighlighter>

Vurgulanan kod bloğu, bu örnekte özel bir kenarlık yarıçapına ve arka plan rengine sahip olacaktır.

Sözdizimi Vurgulamanın Önemi

React'te kodu vurgulamak için tepki-sözdizimi-vurgulayıcı paketini kullanabilirsiniz. Hafif sürümü, yapı boyutunu küçültmek ve kendi stillerinizi kullanarak kod bloklarını özelleştirmek için kullanabilirsiniz.

Kod parçacıklarının vurgulanması, kodunuzun iyi görünmesini sağlar, okunabilirliğini artırır ve okuyucular için daha ulaşılabilir hale getirir.