כיצד להוסיף בלוקי קוד באפליקציית React שלך

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

התקנת הספרייה

ראשון, ליצור אפליקציית React ולהתקין את מגיבים-קוד-בלוקים סִפְרִיָה. ספרייה זו משמשת להצגת בלוקי קוד באפליקציה שלך. אתה יכול להתקין ספרייה זו באמצעות npm, מנהל החבילות של Node.js. פתח את המסוף שלך ונווט אל ספריית הפרויקט שלך. לאחר מכן הפעל את הפקודה הבאה:

npm להתקין בלוקים של react-code

פעולה זו תתקין את ספריית react-code-blocks בפרויקט שלך.

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

לאחר שהתקנת את ספריית react-code-blocks, אתה מוכן להתחיל. ראשית, ייבא את CodeBlock רכיב מספריית react-code-blocks באפליקציה שלך. אתה יכול לעשות זאת על ידי הוספת הקוד הבא לקובץ שלך:

יְבוּא { CodeBlock } מ"תגובה-קוד-בלוקים";

לאחר מכן, השתמש ברכיב CodeBlock באפליקציה שלך על ידי הוספת הקוד הבא:

 טקסט='console.log("שלום, עולם!");'
 שפה='Javascript'
 showLineNumbers={נָכוֹן}
 theme={yourTheme}
/>

בקוד לעיל, אתה מעביר מספר אביזרים לרכיב CodeBlock. להלן רשימה של כל האביזרים הזמינים:

• טקסט (חובה): הקוד שיוצג בבלוק הקוד.
• שפה (חובה): שפת התכנות של הקוד. זה משמש עבור הדגשת תחביר של בלוק הקוד.
• showLineNumbers:ערך בוליאני המציין אם להציג מספרי שורות בבלוק הקוד או לא. ברירת המחדל היא שקר.
• נושא: ערכת הנושא לשימוש עבור בלוק הקוד. זה יכול להיות ערכת נושא מובנית או אובייקט ערכת נושא מותאם אישית. ברירת המחדל היא GitHub.
• StartLineNumber: מספר השורה שממנו מתחילים לספור. ברירת המחדל היא 1.
• codeBlock: אובייקט המכיל אפשרויות עבור בלוק הקוד. זה יכול לכלול מספרי שורות (בוליאני המציין אם להציג מספרי שורות או לא) ו WrapLines (בוליאני המציין אם לעטוף קווים או לא).
• בלחיצה: פונקציה להתקשר בעת לחיצה על בלוק הקוד.

הנה דוגמה כיצד להשתמש בכל האביזרים הללו:

יְבוּא { CodeBlock } מ"תגובה-קוד-בלוקים";
פוּנקצִיָהMyComponent() {
const handleClick = () => {
לְנַחֵם.עֵץ("לחצו על חסימת קוד");
 };
לַחֲזוֹר (
 טקסט='const greeting = "שלום, עולם!"; console.log (ברכה);'
 שפה='Javascript'
 showLineNumbers={נָכוֹן}
 נושא='אטום-אחד-חושך'
 startingLineNumber={10}
 codeBlock={{ מספרי שורות: שֶׁקֶר, WrapLines: נָכוֹן }}
 onClick={handleClick}
 />
 );
}

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

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

הוספת ערכות נושא בבלוק הקוד שלך

ספריית react-code-blocks מספקת מגוון ערכות נושא מובנות בהן ניתן להשתמש כדי להתאים אישית את המראה של בלוקי הקוד שלך. כדי להשתמש בעיצוב מובנה, אתה פשוט צריך לציין את שם העיצוב ב- נושא לִתְמוֹך. לדוגמה, כדי להשתמש ב- אטום-אחד-חושך נושא, תשתמש בקוד הבא:

 טקסט='console.log("שלום, עולם!");'
 שפה='Javascript'
 showLineNumbers={נָכוֹן}
 נושא='אטום-אחד-חושך'
/>

בנוסף לערכות הנושא המובנות, ניתן גם ליצור ערכות נושא מותאמות אישית על ידי הגדרת אובייקט JavaScript המציין את הצבעים לשימוש עבור חלקים שונים של בלוק הקוד. להלן דוגמה כיצד עשוי להיראות אובייקט ערכת נושא מותאם אישית:

const myCustomTheme = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 צבע רקע: "#222",
 צבע טקסט: "#ccc",
 צבע משנה: "#00ff00",
 מילת מפתח צבע: "#0077ff",
 attributeColor: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 שם צבע: "#f8f8f8",
 בנוי צבע: "#0077ff",
 צבע מילולי: "#ffaa00",
 bulletColor: "#ffaa00",
 צבע קוד: "#ccc",
 תוספת צבע: "#00ff00",
 צבע regexp: "#f8f8f8",
 צבע סמל: "#ffaa00",
 משתנה צבע: "#ffaa00",
 templateVariableColor: "#ffaa00",
 צבע קישור: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 selectorPseudoColor: "#aa00ff",
 סוג צבע: "#0077ff",
 מחרוזת צבע: "#00ff00",
 selectorIdColor: "#ffaa00",
 ציטוט צבע: "#f8f8f8",
 templateTagColor: "#ccc",
 מחיקה צבע: "#ff0000",
 צבע כותרת: "#0077ff",
 סעיף צבע: "#0077ff",
 הערה צבע: "#777",
 metaKeywordColor: "#f8f8f8",
 מטא-צבע: "#aa00ff",
 צבע פונקציה: "#0077ff",
 מספר צבע: "#ffaa00",
};

כדי להשתמש בערכת נושא מותאמת אישית, תעביר את אובייקט ערכת הנושא כאביזר ערכת הנושא של רכיב CodeBlock:

 טקסט='console.log("שלום, עולם!");'
 שפה='Javascript'
 showLineNumbers={נָכוֹן}
 theme={myCustomTheme}
/>

להלן הפלט:

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

הוספת CopyBlock לפרויקט שלך

אם אתה רוצה להוסיף את פונקציונליות ההעתקה לבלוק הקוד שלך, אתה יכול להשתמש ב- CopyBlock רכיב מסופק על ידי ספריית react-code-blocks. כדי להשתמש ברכיב זה, תצטרך להתקין את להגיב-העתק ללוח גם ספרייה. כך מוסיפים את רכיב CopyBlock לפרויקט שלך:

התקן את להגיב-העתק ללוח סִפְרִיָה:

npm להתקין react-copy-to-clipboard

ייבא את הרכיבים והספריות הדרושים:

יְבוּא { CopyBlock } מ'תגובה-קוד-בלוקים';
יְבוּא { FaCopy } מ'react-icons/fa';
יְבוּא עותק מ'העתק ללוח';

השתמש ברכיב CopyBlock בקוד שלך:

const קוד = 'console.log("שלום, עולם!");';
const שפה = 'Javascript';
 text={קוד}
 language={language}
 showLineNumbers={נָכוֹן}
 wrapLines={נָכוֹן}
 נושא='דרקולה'
 codeBlock
 icon={}
 onCopy={() => העתק (קוד)}
/>

להלן הפלט:

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

שיטות חלופיות להוספת בלוקי קוד

בעוד ששימוש בספריית react-code-blocks הוא הדרך הפשוטה ביותר להוסיף בלוקי קוד לאפליקציית React שלך, יש גם כמה שיטות חלופיות בהן תוכל להשתמש:

1. הוספת הדגשת תחביר באופן ידני: אם אינך רוצה להשתמש בספריה, תוכל להוסיף הדגשת תחביר ידנית לקוד שלך באמצעות Tailwind CSS או CSS רגיל. זה כולל הוספת מחלקות CSS לרכיבי הקוד שלך כדי להחיל את הסגנונות המתאימים. אמנם שיטה זו מעניקה לך שליטה רבה יותר על הסגנונות, אך ההגדרה והתחזוקה של זה עשויה להיות גוזלת זמן.
2. שימוש בספריות אחרות: ישנן מספר ספריות אחרות זמינות המספקות הדגשת תחביר לקוד, כגון מגיב-תחביר-מדגיש, פריזמה-מגיב-מרנדר, ו highlight.js. לספריות אלה יש תכונות וסגנונות שונים, כך שתוכל לבחור אחת שתתאים לצרכים שלך.

בעוד שספריית ה-react-code-blocks היא בחירה מצוינת עבור רוב היישומים, שיטות חלופיות אלו יכולות להיות שימושיות במצבים מסוימים. בסופו של דבר, השיטה שתבחר תהיה תלויה בצרכים וההעדפות הספציפיות שלך.

שפר את מעורבות המשתמש עם בלוקי קוד

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