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 artırabilir.
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ğer sözdizimi vurgulayıcılarından farklı olarak , tepki-sözdizimi vurgulayıcı, vurgulanan kodu DOM’ye tehlikelilySetInnerHTML kullanarak eklemek için ComponentDidUpdate veya ComponentDidMount’a güvenmez.
Bu yaklaşım tehlikelidir çünkü bir uygulamayı siteler arası komut dosyası çalıştırma saldırılarına maruz bırakır .
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.
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. Bunları tepki sözdizimi vurgulayıcı belgelerinde bulabilirsiniz.
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 install react-syntax-highlighter –save
React Uygulamanızda CodeBlock.js adlı yeni bir bileşen oluşturun ve tepki-sözdizimi-vurgulayıcıyı içe aktarın :
import SyntaxHighlighter from ‘react-syntax-highlighter’;
import { docco } from ‘react-syntax-highlighter/dist/esm/styles/hljs’;
const CodeBlock = ({codestring}) => {
return (
<SyntaxHighlighter language=”javascript” style={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 App = () => {
const codeString = `
const Square = (n) => return n * n
`
return(
<CodeBlock codestring={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, light build’den dışa aktarılan registerLanguage işlevini kullanarak istediğiniz dilleri içe aktarmanız ve kaydetmeniz gerekecektir .
import { Light as SyntaxHighlighter } from ‘react-syntax-highlighter’;
import js from ‘react-syntax-highlighter/dist/esm/languages/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:
import { Prism as SyntaxHighlighter } from “react-syntax-highlighter”;
import { vscDarkPlus } from “react-syntax-highlighter/dist/esm/styles/prism”;
Prizma ışık yapısı için PrismLight’ı içe aktarın ve kullandığınız dili kaydedin.
import { PrismLight as SyntaxHighlighter } from ‘react-syntax-highlighter’;
import jsx from ‘react-syntax-highlighter/dist/esm/languages/prism/jsx’;
import prism from ‘react-syntax-highlighter/dist/esm/styles/prism/prism’;
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 showLineNumbers’ı SyntaxHighlighter bileşenine geçirmeniz ve onu true olarak ayarlamanız gerekir.
<SyntaxHighlighter language=”javascript” style={docco} showLineNumbers=”true”>
{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, aşağıda gösterildiği gibi satır içi CSS stillerini customStyle prop’a geçirmenize izin verir:
<SyntaxHighlighter language=”javascript” style={vscDarkPlus} customStyle={{borderRadius: “5px”, backgroundColor: “#001E3C”}} >
{codestring}
</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.