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

Ένα από τα βασικά χαρακτηριστικά ενός ιστολογίου προγραμματισμού είναι τα μπλοκ κώδικα. Δεν χρειάζεται να τα μορφοποιήσετε χρησιμοποιώντας μια επισήμανση σύνταξης, αλλά κάνει τα ιστολόγιά σας να φαίνονται πολύ πιο όμορφα αν το κάνετε. Μπορεί επίσης να βελτιώσει την αναγνωσιμότητα του κώδικά σας.

Αυτό το άρθρο θα σας δείξει πώς να χρησιμοποιήσετε το react-syntax-highlighter για να επισημάνετε μπλοκ κώδικα στο React. Θα δημιουργήσετε ένα στοιχείο μπλοκ κώδικα ικανό να επισημάνει τον κώδικα που του έχει περάσει χρησιμοποιώντας τη σύνταξη της παρεχόμενης γλώσσας.

Επισήμανση σύνταξης Με το react-syntax-highlighter

Το εργαλείο επισήμανσης σύνταξης react σάς επιτρέπει να επισημάνετε τον κώδικα χρησιμοποιώντας το React. Σε αντίθεση με άλλα επισημάνσεις σύνταξης, το react-syntax-highlighter δεν βασίζεται στο ComponentDidUpdate ή στο ComponentDidMount για την εισαγωγή του επισημασμένου κώδικα στο DOM χρησιμοποιώντας επικίνδυναSetInnerHTML.

Αυτή η προσέγγιση είναι επικίνδυνη επειδή εκθέτει μια εφαρμογή σε επιθέσεις σεναρίων μεταξύ τοποθεσιών.

Αντίθετα, χρησιμοποιεί ένα δέντρο σύνταξης για τη δημιουργία του εικονικού DOM και το ενημερώνει μόνο με αλλαγές.

Το στοιχείο χρησιμοποιεί PrismJS και Highlight.js στο παρασκήνιο. Μπορείτε να επιλέξετε να χρησιμοποιήσετε ένα από τα δύο για να τονίσετε τον κώδικά σας. Είναι πολύ εύκολο στη χρήση, καθώς παρέχει στυλ out-of-the-box.

Το στοιχείο react-syntax-highlighter δέχεται τον κώδικα, τη γλώσσα και το στυλ ως στηρίγματα. Το στοιχείο δέχεται και άλλες επιλογές προσαρμογής. Μπορείτε να τα βρείτε στο Τεκμηρίωση επισήμανσης σύνταξης react.

Χρήση του στοιχείου react-syntax-highlighter

Για να ξεκινήσετε να χρησιμοποιείτε το εργαλείο επισήμανσης σύνταξης react στο React, εγκαταστήστε το μέσω npm.

npm εγκαθιστώ αντιδρώ-σύνταξη-επισήμανση --αποθηκεύσετε

Δημιουργήστε ένα νέο στοιχείο που ονομάζεται CodeBlock.js στην εφαρμογή React και εισαγωγή αντιδρώ-σύνταξη-επισήμανση:

εισαγωγή SyntaxHighlighter από 'react-syntax-highlighter';
εισαγωγή {έγγραφο} από 'react-syntax-highlighter/dist/esm/styles/hljs';
συνθ CodeBlock = ({codestring}) => {
ΕΠΙΣΤΡΟΦΗ (
<SyntaxHighlighter language="javascript" στυλ={έγγραφο}>
 {codeString}
</SyntaxHighlighter>
 );
};

Το στοιχείο SyntaxHighlighter δέχεται τη γλώσσα και το στυλ που θα χρησιμοποιηθεί. Λαμβάνει επίσης τη συμβολοσειρά κώδικα ως περιεχόμενό της.

Μπορείτε να αποδώσετε το παραπάνω στοιχείο ως εξής:

συνθ Εφαρμογή = () => {
συνθ codeString = `
συνθ Τετράγωνο = (n) => ΕΠΙΣΤΡΟΦΗ n * n
 `
ΕΠΙΣΤΡΟΦΗ(
<CodeBlock codestring={codeString}/>
 )
}

Είναι σημαντικό να σημειωθεί ότι η χρήση του react-syntax-highlighter μπορεί να αυξήσει το μέγεθος της κατασκευής σας, επομένως, εάν χρειάζεται, μπορείτε να εισαγάγετε την ελαφριά έκδοση. Η ελαφριά κατασκευή, ωστόσο, δεν έχει προεπιλεγμένα στυλ.

Θα χρειαστεί επίσης να εισαγάγετε και να καταχωρήσετε τις γλώσσες που θέλετε χρησιμοποιώντας το registerΓλώσσα λειτουργία που εξάγεται από την ελαφριά κατασκευή.

εισαγωγή { Φως όπως και SyntaxHighlighter } από 'react-syntax-highlighter';
εισαγωγή js από 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Αυτό το στοιχείο χρησιμοποιεί το Highlight.js για να τονίσει τον κώδικα.

Για να χρησιμοποιήσετε το PrismJS, εισαγάγετε το από το πακέτο react-syntax-highlighter ως εξής:

εισαγωγή { Πρίσμα όπως και SyntaxHighlighter } από "react-syntax-highlighter"?
εισαγωγή { vscDarkPlus } από "react-syntax-highlighter/dist/esm/styles/prism";

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

εισαγωγή { PrismLight όπως και SyntaxHighlighter } από 'react-syntax-highlighter';
εισαγωγή 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 δεν το υποστηρίζει πλήρως.

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

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

Με το react-syntax-highlighter, το μόνο που χρειάζεται είναι να περάσεις Εμφάνιση Αριθμών Γραμμών στο στοιχείο SyntaxHighlighter και ορίστε το σε true.

<SyntaxHighlighter language="javascript" style={docco} showLineNumbers="αληθής">
 {codeString}
</SyntaxHighlighter>

Το στοιχείο θα εμφανίζει τώρα αριθμούς γραμμών δίπλα στον κώδικά σας.

Χρήση προσαρμοσμένων στυλ στο στοιχείο σας

Παρόλο που το react-syntax-highlighter παρέχει στυλ, ίσως χρειαστεί να προσαρμόσετε τα μπλοκ κώδικα μερικές φορές.

Για αυτό, το πακέτο σάς επιτρέπει να περάσετε inline Στυλ CSS στη βάση customStyle όπως φαίνεται παρακάτω:

<SyntaxHighlighter language="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5 εικονοστοιχεία", χρώμα του φόντου: "#001E3C"}} >
 {codestring}
</SyntaxHighlighter>

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

Η σημασία της επισήμανσης σύνταξης

Μπορείτε να χρησιμοποιήσετε το πακέτο react-syntax-highlighter για να επισημάνετε τον κώδικα στο React. Μπορείτε να χρησιμοποιήσετε την ελαφριά έκδοση για να μειώσετε το μέγεθος κατασκευής και να προσαρμόσετε τα μπλοκ κώδικα χρησιμοποιώντας τα δικά σας στυλ.

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