כיצד להוסיף הדגשת תחביר לבלוק קוד ב-React

אחת התכונות המרכזיות של בלוג תכנות היא בלוקי קוד. אתה לא צריך לעצב אותם באמצעות סימון תחביר, אבל זה גורם לבלוגים שלך להיראות הרבה יותר נחמדים אם אתה עושה זאת. זה גם יכול לשפר את קריאות הקוד שלך.

מאמר זה יראה לך כיצד להשתמש ב-react-syntax-highlighter כדי להדגיש בלוקי קוד ב-React. אתה תיצור רכיב בלוק קוד המסוגל להדגיש קוד המועבר אליו באמצעות התחביר של השפה שסופקה.

הדגשת תחביר עם סימון-תחביר-react

סימון תחביר react מאפשר לך להדגיש קוד באמצעות React. בניגוד לאחרים מדגיש תחביר, react-syntax-highlighter אינו מסתמך על ComponentDidUpdate או ComponentDidMount כדי להכניס את הקוד המודגש ב-DOM באמצעות dangerouslySetInnerHTML.

גישה זו מסוכנת מכיוון שהיא חושפת אפליקציה ל התקפות סקריפטים בין אתרים.

במקום זאת, הוא משתמש בעץ תחביר כדי לבנות את ה-DOM הווירטואלי ומעדכן אותו רק בשינויים.

הרכיב משתמש ב-PrismJS וב-Highlight.js ברקע. אתה יכול לבחור להשתמש באחד מהם כדי להדגיש את הקוד שלך. זה קל מאוד לשימוש מכיוון שהוא מספק עיצוב מחוץ לקופסה.

הרכיב react-extax-highlighter מקבל את הקוד, השפה והסגנון כאביזרים. הרכיב מקבל גם אפשרויות התאמה אישית אחרות. אתה יכול למצוא אותם ב תיעוד מדגיש תחביר תגובה.

שימוש ברכיב react-syntax-highlighter

כדי להתחיל להשתמש במדגיש תחביר react ב-React, התקן אותו באמצעות npm.

npm להתקין מגיב-תחביר-מדגיש --לשמור

צור רכיב חדש בשם CodeBlock.js ביישום React שלך וייבא מגיב-תחביר-מדגיש:

יְבוּא SyntaxHighlighter מ 'תגובה-תחביר-מדגיש';
יְבוּא { דוקו } מ 'react-syntax-highlighter/dist/esm/styles/hljs';
const CodeBlock = ({codestring}) => {
לַחֲזוֹר (
<SyntaxHighlighter language="javascript" style={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

רכיב SyntaxHighlighter מקבל את השפה והסגנון לשימוש. זה גם לוקח את מחרוזת הקוד כתוכן שלה.

אתה יכול לעבד את הרכיב לעיל באופן הבא:

const אפליקציה = () => {
const codeString = `
const ריבוע = (n) => לַחֲזוֹר n * n
 `
לַחֲזוֹר(
<CodeBlock codestring={codeString}/>
 )
}

חשוב לציין ששימוש ב-react-syntax-highlighter יכול להגדיל את גודל המבנה שלך, כך שאם תצטרך, תוכל לייבא את המבנה הקל. למבנה הקל, לעומת זאת, אין סגנונות ברירת מחדל.

תצטרך גם לייבא ולרשום את השפות הרצויות באמצעות ה registerLanguage פונקציה מיוצאת מהמבנה הקל.

יְבוּא { אור כפי ש SyntaxHighlighter } מ 'תגובה-תחביר-מדגיש';
יְבוּא js מ 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

רכיב זה משתמש ב-Highlight.js כדי להדגיש את הקוד.

כדי להשתמש ב-PrismJS במקום זאת, ייבא אותו מחבילת react-syntax-highlighter כך:

יְבוּא { פריזמה כפי ש SyntaxHighlighter } מ "תגובה-תחביר-מדגיש";
יְבוּא { vscDarkPlus } מ "react-extax-highlighter/dist/esm/styles/prism";

לבניית האור המנסרה, ייבא את PrismLight ורשום את השפה שבה אתה משתמש.

יְבוּא { PrismLight כפי ש SyntaxHighlighter } מ 'תגובה-תחביר-מדגיש';
יְבוּא jsx מ 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
יְבוּא פּרִיזמָה מ 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

שימוש בפריזמה מועיל, במיוחד בהדגשת jsx מכיוון שה-react-syntax-highlighter אינו תומך בו באופן מלא.

הוספת מספרי שורה לבלוק הקוד

עכשיו כשאתה יודע איך להדגיש בלוק קוד, אתה יכול להתחיל להוסיף תכונות נוספות כמו מספרי שורות.

עם מגיב-תחביר-מדגיש, אתה רק צריך לעבור showLineNumbers לרכיב SyntaxHighlighter והגדר אותו כ-true.

<SyntaxHighlighter language="javascript" style={docco} showLineNumbers="נָכוֹן">
 {codeString}
</SyntaxHighlighter>

הרכיב יציג כעת מספרי שורות ליד הקוד שלך.

שימוש בסגנונות מותאמים אישית ברכיב שלך

למרות שה-react-syntax-highlighter מספק סגנון, ייתכן שתצטרך להתאים אישית את בלוקי הקוד שלך לפעמים.

לשם כך, החבילה מאפשרת לך לעבור בשורה סגנונות CSS לאביזר customStyle כפי שמוצג להלן:

<SyntaxHighlighter language="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5 פיקסלים", צבע רקע: "#001E3C"}} >
 {codestring}
</SyntaxHighlighter>

לגוש הקוד המודגש יהיה רדיוס גבול מותאם אישית וצבע רקע בדוגמה זו.

החשיבות של הדגשת תחביר

אתה יכול להשתמש בחבילת react-syntax-highlighter כדי להדגיש קוד ב-React. אתה יכול להשתמש בגרסה הקלה כדי להקטין את גודל המבנה ולהתאים אישית בלוקי קוד באמצעות הסגנונות שלך.

הדגשת קטעי קוד גורמת לקוד שלך להיראות טוב, משפרת את הקריאות שלו והופכת אותו לנגיש יותר לקוראים.