تکه های کد خود را با مقداری رنگ تقویت کنید و به خوانندگان کمک کنید تا نحو را با این جزء برجسته درک کنند.
یکی از ویژگی های کلیدی یک وبلاگ برنامه نویسی، بلوک های کد است. لازم نیست آنها را با استفاده از برجسته کننده نحو قالب بندی کنید، اما اگر این کار را انجام دهید، وبلاگ های شما را بسیار زیباتر می کند. همچنین می تواند خوانایی کد شما را بهبود بخشد.
این مقاله به شما نشان می دهد که چگونه از react-syntax-highlighter برای برجسته کردن بلوک های کد در React استفاده کنید. شما یک جزء بلوک کد ایجاد خواهید کرد که قادر است کدهای ارسال شده به آن را با استفاده از نحو زبان ارائه شده برجسته کند.
برجسته سازی نحو با react-syntax-highlighter
هایلایتر react syntax به شما امکان می دهد با استفاده از React کد را برجسته کنید. بر خلاف سایر برجسته‌کننده‌های نحوی، برجسته‌کننده react-syntax به ComponentDidUpdate یا ComponentDidMount برای درج کدهایلایت شده در DOM با استفاده از خطرناکlySetInnerHTML متکی نیست.
این رویکرد خطرناک است زیرا یک برنامه کاربردی را در معرض حملات اسکریپت بین سایتی قرار می دهد.
در عوض، از یک درخت نحو برای ساخت DOM مجازی استفاده می کند و آن را فقط با تغییرات به روز می کند.
این کامپوننت از PrismJS و Highlight.js در پس‌زمینه استفاده می‌کند. می توانید برای برجسته کردن کد خود از یکی از آنها استفاده کنید. استفاده از آن بسیار آسان است زیرا یک ظاهر طراحی خارج از جعبه را ارائه می دهد.
مؤلفه react-syntax-highlighter کد، زبان و استایل را به عنوان پروپوزال می پذیرد. کامپوننت سایر گزینه های سفارشی سازی را نیز می پذیرد. می توانید آنها را در مستندات برجسته کننده نحوی react پیدا کنید.
با استفاده از کامپوننت react-syntax-highlighter
برای شروع استفاده از برجسته‌کننده react syntax در React، آن را از طریق npm نصب کنید.
npm install react-syntax-highlighter --save
یک مؤلفه جدید به نام CodeBlock.js در React Application خود ایجاد کنید و react-syntax-highlighter را وارد کنید:
import SyntaxHighlighter from &aposreact-syntax-highlighter'
import { docco } from &aposreact-syntax-highlighter/dist/esm/styles/hljs'
const CodeBlock = ({codestring}) => {
return (
<SyntaxHighlighter language="javascript" style={docco}>
{codeString}
</SyntaxHighlighter>
);
};
مولفه SyntaxHighlighter زبان و سبک مورد استفاده را می پذیرد. همچنین رشته کد را به عنوان محتویات خود می گیرد.
می توانید کامپوننت فوق را به صورت زیر رندر کنید:
const App = () => {
const codeString = `
const Square = (n) => return n * n
`
return(
<CodeBlock codestring={codeString}/>
)
}
توجه به این نکته مهم است که استفاده از react-syntax-highlighter می تواند اندازه ساخت شما را افزایش دهد، بنابراین در صورت نیاز می توانید بیلد سبک را وارد کنید. با این حال، ساخت سبک دارای سبک های پیش فرض نیست.
همچنین باید با استفاده از تابع registerLanguage که از لایت بیلد صادر شده است، زبان های مورد نظر خود را وارد و ثبت کنید.
import { Light as SyntaxHighlighter } from &aposreact-syntax-highlighter'
import js from &aposreact-syntax-highlighter/dist/esm/languages/hljs/javascript'
SyntaxHighlighter.registerLanguage(&aposjavascript&apos, js);
این مؤلفه از Highlight.js برای برجسته کردن کد استفاده می کند.
برای استفاده از PrismJS به جای آن، آن را از بسته react-syntax-highlighter مانند این وارد کنید:
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
برای ساخت نور منشور، PrismLight را وارد کنید و زبان مورد استفاده خود را ثبت کنید.
import { PrismLight as SyntaxHighlighter } from &aposreact-syntax-highlighter'
import jsx from &aposreact-syntax-highlighter/dist/esm/languages/prism/jsx'
import prism from &aposreact-syntax-highlighter/dist/esm/styles/prism/prism'
SyntaxHighlighter.registerLanguage(&aposjsx&apos, jsx);
استفاده از منشور مفید است، به خصوص هنگام برجسته کردن jsx زیرا react-syntax-highlighter به طور کامل از آن پشتیبانی نمی کند.
اضافه کردن شماره خطوط به بلوک کد
اکنون که می دانید چگونه یک بلوک کد را برجسته کنید، می توانید شروع به اضافه کردن ویژگی های اضافی مانند شماره خطوط کنید.
با react-syntax-highlighter، فقط باید showLineNumbers را به مؤلفه SyntaxHighlighter منتقل کنید و آن را روی true تنظیم کنید.
<SyntaxHighlighter language="javascript" style={docco} showLineNumbers="true">
{codeString}
</SyntaxHighlighter>
کامپوننت اکنون شماره خطوط را در کنار کد شما نشان می دهد.
استفاده از سبک های سفارشی در کامپوننت شما
حتی اگر react-syntax-highlighter یک ظاهر طراحی را ارائه می دهد، ممکن است گاهی اوقات لازم باشد بلوک های کد خود را سفارشی کنید.
برای این کار، بسته به شما اجازه می‌دهد تا سبک‌های CSS درون خطی را مانند شکل زیر به customStyle prop منتقل کنید:
<SyntaxHighlighter language="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5px", backgroundColor: "#001E3C"}} >
{codestring}
</SyntaxHighlighter>
بلوک کد برجسته شده یک شعاع حاشیه سفارشی و رنگ پس زمینه در این مثال خواهد داشت.
اهمیت برجسته سازی نحو
می توانید از بسته react-syntax-highlighter برای برجسته کردن کد در React استفاده کنید. می توانید از نسخه سبک برای کاهش اندازه ساخت و سفارشی کردن بلوک های کد با استفاده از سبک های خود استفاده کنید.
برجسته کردن تکه های کد باعث می شود کد شما خوب به نظر برسد، خوانایی آن را بهبود می بخشد و آن را برای خوانندگان قابل دسترس تر می کند.