אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » ספריות ומודולים » רכיב מעולה בריאקט לתצוגת קוד ב-markdown

רכיב מעולה בריאקט לתצוגת קוד ב-markdown

רן בר-זיק אפריל 5, 2020 10:30 am 2 תגובות

קומפוננטה ריאקטית לתצוגת markdown שעושה חיים מאוד קלים למי שרוצה להשתמש ב-markdown הנוח במסגרת אתר או אפליקציה.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

אם יש משהו שאני ממש ממש אוהב זה את פורמט markdown שכמעט כל מתכנת מכיר. משתמשים בו באמת בכל מקום: מפול ריקווסטים בגיטהאב ועד מסמכי דוקומנטציה שונים. אבל אפשר להשתמש בו גם במערכות CMS וכתחליף למסד נתונים באתרים מסוימים.

בימים אלו אני עובד על אתר תרגול לספר ״ללמוד ג׳אווהסקריפט בעברית״. למי שלא יודע, זו סדרת ספרים ללימוד ג׳אווהסקריפט ומגוון הפלטפורמות שלו. הפרויקט יצא לאור יחד עם הקריה האקדמית אונו ועם חברות מסחריות רבות (Really Good האהובים, Wix, צ׳ג, Outbrain, Honeybook, איירון סורס ועוד) וכ-2500 איש הורידו אותו. במסגרת הפרויקט, אמור לצאת גם אתר תרגול שילווה את הספר. בספר יש תרגילים, אבל בלימוד תכנות – כל המרבה הרי זה משובח ואם אני יכול לספק אתר עם מאות תרגילים נוספים לתרגול עצמי – זה יהיה מעולה.

בחרתי לבנות את אתר התרגילים בריאקט, אבל אז נשאלת השאלה – איפה אאחסן את המידע של התרגילים? כן, אפשר להרים מסד נתונים וכו׳ לאוויר עם API אבל זה נראה קצת overkill, במיוחד כאשר אתר התרגילים ישב באתר של הספר שבו יש את בקרת הכניסה. אני צריך קבצים טקסטואליים שיחזיקו את המידע על התרגילים, שהוא בעצם טקסט הכולל את השאלה ותצוגת קוד של התשובה (שהקוד הזה מוצג למשתמש רק לאחר לחיצה על כפתור ובעתיד תהיה גם דרך להריץ אותו ישירות על הדפדפן). פורמט טקסטואלי שיש בו מידע של טקסט וגם קוד? markdown הוא התשובה. הפורמט הזה מתוכנן להכיל כותרות, להכיל קוד ומידע אחר.

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

איך היא עובדת? מייד לאחר ההתקנה, אפשר להשתמש בה כך:

import ReactMarkdown from 'react-markdown';
<ReactMarkdown>{context.md}</ReactMarkdown>

זה הכל! אבל כמובן שהשימוש הבסיסי לא טוב מספיק. כי מה לעשות, כשאני כותב קוד אני לא רוצה שהוא יוצג כטקסט אפור ומשעמם ב-pre. אני רוצה לצבוע אותו. highlight כפי שנאמר. זו הסיבה שבקומפוננטה יש יכולת להעביר אובייקט שיש בו פירוט של האלמנטים השונים וקומפוננטות נוספות שיטפלו בהן. לצורך העניין, אני אבקש באמצעות ההגדרות האלו שכל אלמנט code יעבור דרך קומפוננטה אחרת שתצבע אותו. איך אני עושה את זה? כך:

<ReactMarkdown renderers={{ code: CodeBlock }}>{context.md}</ReactMarkdown>

קומפוננטת CodeBlock אחראית על הצביעה. איך בדיוק? ככה:

import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

export default function(props) {
  const { language, value } = props;
  return (
    <SyntaxHighlighter language={language} style={docco}>
      {value}
    </SyntaxHighlighter>);
}

כלומר כל קטע ב-markdown שאני מקיף ב:

```js
```

יקבל highlight באמצעות קומפוננטה אחרת שנקראת react-syntax-highlighter. בעתיד אני אוכל להשתמש באותה קומפוננטה על מנת להוסיף יכולות יותר מתקדמות. כך למשל, הגדרתי שאם אני כותב קטע קוד שבמקום js כתוב שם JSANSWER, התצוגה תהיה מעט שונה – בתוך תגית details.

```JSANSWER
```
import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import DetailsBlock from './../DetailsBlock';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import ENUMS from '../../enums/MD_ENUMS';

export default function(props) {
  const { language, value } = props;
  let returnValue;
  if(language === ENUMS.JSANSWER) {
    returnValue = (
    <DetailsBlock>
      {value}
    </DetailsBlock>
    );
  } else {
    returnValue = (
    <SyntaxHighlighter language={language} style={docco}>
      {value}
    </SyntaxHighlighter>);
  }
  return returnValue;
}

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

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
קוד פתוח ריאקט

2 תגובות

  1. משתמש אנונימי (לא מזוהה) הגב אפריל 16, 2020 בשעה 3:30 pm

    bhxhui

  2. משתמש אנונימי (לא מזוהה) הגב אפריל 16, 2020 בשעה 3:31 pm

    ניסיון

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

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

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד