Πώς να προσθέσετε μπλοκ κώδικα στην εφαρμογή React σας

Στην ανάπτυξη ιστού, η εμφάνιση μπλοκ κώδικα με σωστή μορφοποίηση και επισήμανση είναι μια κοινή απαίτηση. Τα μπλοκ κώδικα είναι ένα ευέλικτο εργαλείο που μπορεί να χρησιμοποιηθεί για διάφορους σκοπούς, συμπεριλαμβανομένης της εμφάνισης κώδικα και της βελτίωσης της αφοσίωσης των χρηστών.

Εγκατάσταση της Βιβλιοθήκης

Πρώτα, δημιουργήστε μια εφαρμογή React και εγκαταστήστε το react-code-blocks βιβλιοθήκη. Αυτή η βιβλιοθήκη χρησιμοποιείται για την εμφάνιση μπλοκ κώδικα στην εφαρμογή σας. Μπορείτε να εγκαταστήσετε αυτήν τη βιβλιοθήκη χρησιμοποιώντας το npm, τον διαχειριστή πακέτων για το Node.js. Ανοίξτε το τερματικό σας και μεταβείτε στον κατάλογο του έργου σας. Στη συνέχεια εκτελέστε την ακόλουθη εντολή:

npm εγκατάσταση react-code-blocks

Αυτό θα εγκαταστήσει τη βιβλιοθήκη react-code-blocks στο έργο σας.

Προσθήκη του μπλοκ κώδικα στο έργο σας

Αφού εγκαταστήσετε τη βιβλιοθήκη react-code-blocks, είστε έτοιμοι να ξεκινήσετε. Πρώτα, εισάγετε το CodeBlock στοιχείο από τη βιβλιοθήκη react-code-blocks στην εφαρμογή σας. Μπορείτε να το κάνετε αυτό προσθέτοντας τον ακόλουθο κώδικα στο αρχείο σας:

εισαγωγή { CodeBlock } από"react-code-blocks";

Στη συνέχεια, χρησιμοποιήστε το στοιχείο CodeBlock στην εφαρμογή σας προσθέτοντας τον ακόλουθο κώδικα:

 κείμενο='console.log("Hello, world!");'
 γλώσσα='javascript'
 showLineNumbers={αληθής}
 theme={το θέμα σας}
/>

Στον παραπάνω κώδικα, μεταβιβάζετε πολλά στηρίγματα στο στοιχείο CodeBlock. Ακολουθεί μια λίστα με όλα τα διαθέσιμα στηρίγματα:

• κείμενο (απαιτείται): Ο κωδικός που θα εμφανιστεί στο μπλοκ κωδικών.
• γλώσσα (απαιτείται): Η γλώσσα προγραμματισμού του κώδικα. Αυτό χρησιμοποιείται για επισήμανση σύνταξης του μπλοκ κώδικα.
• Εμφάνιση Αριθμών Γραμμών: Μια δυαδική τιμή που υποδεικνύει εάν θα εμφανίζονται οι αριθμοί γραμμών στο μπλοκ κώδικα ή όχι. Από προεπιλογή είναι ψευδής.
• θέμα:Το θέμα που θα χρησιμοποιηθεί για το μπλοκ κώδικα. Αυτό μπορεί να είναι ένα ενσωματωμένο θέμα ή ένα προσαρμοσμένο αντικείμενο θέματος. Είναι προεπιλογή στο GitHub.
• startingLineNumber: Ο αριθμός γραμμής από τον οποίο ξεκινά η μέτρηση. Από προεπιλογή είναι 1.
• codeBlock: Ένα αντικείμενο που περιέχει επιλογές για το μπλοκ κώδικα. Αυτό μπορεί να περιλαμβάνει Αριθμοί γραμμών (ένα boolean που υποδεικνύει εάν θα εμφανίζονται αριθμοί γραμμής ή όχι) και wrapLines (ένα boolean που υποδεικνύει αν πρέπει να τυλίξουν γραμμές ή όχι).
• στο κλικ: Μια συνάρτηση για κλήση όταν γίνεται κλικ στο μπλοκ κωδικών.

Ακολουθεί ένα παράδειγμα για το πώς να χρησιμοποιήσετε όλα αυτά τα στηρίγματα:

εισαγωγή { CodeBlock } από"react-code-blocks";
λειτουργίαMyComponent() {
συνθ handleClick = () => {
κονσόλα.κούτσουρο("Έγινε κλικ στο μπλοκ κώδικα");
 };
ΕΠΙΣΤΡΟΦΗ (
 κείμενο='const greeting = "Γεια σου, κόσμο!"; console.log (χαιρετισμός);'
 γλώσσα='javascript'
 showLineNumbers={αληθής}
 θέμα=«άτομο-ένα-σκοτάδι»
 startingLineNumber={10}
 codeBlock={{ Αριθμοί γραμμών: ψευδής, wrapLines: αληθής }}
 onClick={handleClick}
 />
 );
}

Στον παραπάνω κώδικα, χρησιμοποιείτε άτομο-ένα-σκοτεινό θέμα, ξεκινώντας τους αριθμούς γραμμών από το 10, απενεργοποιώντας τους αριθμούς γραμμών, ενεργοποιώντας την αναδίπλωση γραμμής και επισυνάπτοντας ένα πρόγραμμα χειρισμού κλικ.

Χρησιμοποιώντας αυτά τα στηρίγματα, μπορείτε να προσαρμόσετε την εμφάνιση και τη συμπεριφορά των μπλοκ κώδικα ώστε να ταιριάζει στις ανάγκες σας.

Προσθήκη θεμάτων στα μπλοκ κωδικών σας

Η βιβλιοθήκη react-code-blocks παρέχει μια ποικιλία από ενσωματωμένα θέματα που μπορούν να χρησιμοποιηθούν για την προσαρμογή της εμφάνισης των μπλοκ κώδικα. Για να χρησιμοποιήσετε ένα ενσωματωμένο θέμα, πρέπει απλώς να καθορίσετε το όνομα του θέματος στο θέμα στήριγμα. Για παράδειγμα, για να χρησιμοποιήσετε το άτομο-ένα-σκοτεινό θέμα, θα χρησιμοποιούσατε τον ακόλουθο κώδικα:

 κείμενο='console.log("Hello, world!");'
 γλώσσα='javascript'
 showLineNumbers={αληθής}
 θέμα=«άτομο-ένα-σκοτάδι»
/>

Εκτός από τα ενσωματωμένα θέματα, μπορείτε επίσης να δημιουργήσετε προσαρμοσμένα θέματα ορίζοντας ένα αντικείμενο JavaScript που καθορίζει τα χρώματα που θα χρησιμοποιηθούν για διαφορετικά μέρη του μπλοκ κώδικα. Ακολουθεί ένα παράδειγμα για το πώς μπορεί να μοιάζει ένα αντικείμενο προσαρμοσμένου θέματος:

συνθ myCustomTheme = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 χρώμα του φόντου: "#222",
 χρώμα κειμένου: "#ccc",
 substringColor: "#00ff00",
 Χρώμα λέξης-κλειδιού: "#0077ff",
 χαρακτηριστικόΧρώμα: "#ffaa00",
 SelectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 όνομαΧρώμα: "#f8f8f8",
 ενσωματωμένο χρώμα: "#0077ff",
 κυριολεκτικόΧρώμα: "#ffaa00",
 bulletΧρώμα: "#ffaa00",
 κωδικόςΧρώμα: "#ccc",
 προσθήκηΧρώμα: "#00ff00",
 regexpColor: "#f8f8f8",
 σύμβολοΧρώμα: "#ffaa00",
 variableColor: "#ffaa00",
 templateVariableColor: "#ffaa00",
 Χρώμα συνδέσμου: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 SelectorPseudoColor: "#aa00ff",
 τύποςΧρώμα: "#0077ff",
 Χρώμα συμβολοσειράς: "#00ff00",
 SelectorIdColor: "#ffaa00",
 quoteΧρώμα: "#f8f8f8",
 templateTagColor: "#ccc",
 διαγραφήΧρώμα: "#ff0000",
 τίτλος Χρώμα: "#0077ff",
 ενότητα Χρώμα: "#0077ff",
 σχόλιο Χρώμα: "#777",
 metaKeywordColor: "#f8f8f8",
 metaColor: "#aa00ff",
 λειτουργίαΧρώμα: "#0077ff",
 αριθμόςΧρώμα: "#ffaa00",
};

Για να χρησιμοποιήσετε ένα προσαρμοσμένο θέμα, θα μεταβιβάζατε το αντικείμενο θέματος ως υποστηρικτικό θέμα του στοιχείου CodeBlock:

 κείμενο='console.log("Hello, world!");'
 γλώσσα='javascript'
 showLineNumbers={αληθής}
 theme={myCustomTheme}
/>

Παρακάτω είναι η έξοδος:

Χρησιμοποιώντας ενσωματωμένα και προσαρμοσμένα θέματα, μπορείτε να προσαρμόσετε την εμφάνιση των μπλοκ κώδικα ώστε να ταιριάζει στις ανάγκες σας και στη συνολική σχεδίαση της εφαρμογής σας.

Προσθήκη CopyBlock στο έργο σας

Εάν θέλετε να προσθέσετε τη λειτουργία αντιγραφής στα μπλοκ κώδικα, μπορείτε να χρησιμοποιήσετε το CopyBlock στοιχείο που παρέχεται από τη βιβλιοθήκη react-code-blocks. Για να χρησιμοποιήσετε αυτό το στοιχείο, θα χρειαστεί να εγκαταστήσετε το react-copy-to-clipboard βιβλιοθήκη επίσης. Δείτε πώς μπορείτε να προσθέσετε το στοιχείο CopyBlock στο έργο σας:

Εγκαταστήστε το react-copy-to-clipboard βιβλιοθήκη:

npm εγκατάσταση react-copy-to-clipboard

Εισαγάγετε τα απαραίτητα στοιχεία και βιβλιοθήκες:

εισαγωγή { CopyBlock } από'react-code-blocks';
εισαγωγή { FaCopy } από'react-icons/fa';
εισαγωγή αντίγραφο από'Αντιγραφή στο πρόχειρο';

Χρησιμοποιήστε το στοιχείο CopyBlock στον κώδικά σας:

συνθ κωδικός = 'console.log("Hello, world!");';
συνθ γλώσσα = 'javascript';
 text={κωδικός}
 γλώσσα={γλώσσα}
 showLineNumbers={αληθής}
 wrapLines={αληθής}
 θέμα="δρακουλας"
 codeBlock
 εικονίδιο ={}
 onCopy={() => αντιγραφή (κωδικός)}
/>

Παρακάτω είναι η έξοδος:

Προσθέτοντας το στοιχείο CopyBlock στο έργο σας, μπορείτε εύκολα να επιτρέψετε στους χρήστες να αντιγράψουν τον κώδικα από τα μπλοκ κώδικα στο πρόχειρό τους.

Εναλλακτικές μέθοδοι για την προσθήκη μπλοκ κώδικα

Ενώ η χρήση της βιβλιοθήκης react-code-blocks είναι ο πιο απλός τρόπος για να προσθέσετε μπλοκ κώδικα στην εφαρμογή React, υπάρχουν επίσης μερικές εναλλακτικές μέθοδοι που μπορείτε να χρησιμοποιήσετε:

1. Μη αυτόματη προσθήκη επισήμανσης σύνταξης: Εάν δεν θέλετε να χρησιμοποιήσετε μια βιβλιοθήκη, μπορείτε να προσθέσετε μη αυτόματα επισήμανση σύνταξης στον κώδικά σας χρησιμοποιώντας Tailwind CSS ή κανονικό CSS. Αυτό περιλαμβάνει την προσθήκη κλάσεων CSS στα στοιχεία του κώδικα σας για να εφαρμόσετε τα κατάλληλα στυλ. Αν και αυτή η μέθοδος σάς δίνει περισσότερο έλεγχο στα στυλ, μπορεί να είναι χρονοβόρα η ρύθμιση και η συντήρηση.
2. Χρήση άλλων βιβλιοθηκών: Υπάρχουν πολλές άλλες διαθέσιμες βιβλιοθήκες που παρέχουν επισήμανση σύνταξης για κώδικα, όπως π.χ αντιδρώ-σύνταξη-επισήμανση, πρίσμα-αντίδραση-αποδότης, και highlight.js. Αυτές οι βιβλιοθήκες έχουν διαφορετικά χαρακτηριστικά και στυλ, ώστε να μπορείτε να επιλέξετε αυτό που ταιριάζει στις ανάγκες σας.

Ενώ η βιβλιοθήκη react-code-blocks είναι μια εξαιρετική επιλογή για τις περισσότερες εφαρμογές, αυτές οι εναλλακτικές μέθοδοι μπορεί να είναι χρήσιμες σε ορισμένες περιπτώσεις. Τελικά, η μέθοδος που θα επιλέξετε θα εξαρτηθεί από τις συγκεκριμένες ανάγκες και προτιμήσεις σας.

Βελτιώστε την αφοσίωση των χρηστών με μπλοκ κώδικα

Χρησιμοποιώντας μπλοκ κώδικα για την επεξήγηση κώδικα, την παροχή διαδραστικών παραδειγμάτων κωδικοποίησης και τη δημιουργία οπτικά ελκυστικά σχέδια, μπορείτε να βελτιώσετε την εμπειρία των χρηστών σας και να τους κρατήσετε αφοσιωμένους στον ιστότοπό σας ή εφαρμογή. Επιπλέον, χρησιμοποιώντας λειτουργίες όπως το CopyBlock και προσαρμοσμένα θέματα, μπορείτε να κάνετε την εφαρμογή React ακόμα πιο λειτουργική και ελκυστική.