Ena od ključnih značilnosti bloga o programiranju so bloki kode. Ni vam jih treba oblikovati z označevalnikom sintakse, vendar bodo vaši spletni dnevniki videti veliko lepši, če to storite. Prav tako lahko izboljša berljivost kode.

Ta članek vam bo pokazal, kako uporabiti označevalnik react-syntax-highlighter za označevanje blokov kode v Reactu. Ustvarili boste komponento kodnega bloka, ki bo lahko označevala kodo, ki ji je bila posredovana s sintakso podanega jezika.

Označevanje sintakse z označevalcem react-syntax-highlighter

Označevalnik sintakse React vam omogoča, da označite kodo z uporabo React. Za razliko od drugih označevalci sintakse, označevalnik react-syntax-highlighter se ne zanaša na ComponentDidUpdate ali ComponentDidMount za vstavljanje označene kode v DOM z uporabo dangerouslySetInnerHTML.

Ta pristop je nevaren, ker izpostavlja aplikacijo skriptni napadi med spletnimi mesti.

Namesto tega uporablja sintaktično drevo za izdelavo navideznega DOM-a in ga posodablja samo s spremembami.

instagram viewer

Komponenta v ozadju uporablja PrismJS in Highlight.js. Za označevanje svoje kode se lahko odločite za uporabo enega ali drugega. Je zelo enostaven za uporabo, saj zagotavlja takojšen stil.

Komponenta označevalca react-syntax-highlighter sprejme kodo, jezik in slog kot rekvizite. Komponenta sprejema tudi druge možnosti prilagajanja. Najdete jih v React dokumentacija označevalnika sintakse.

Uporaba komponente označevalca react-syntax-highlighter

Če želite začeti uporabljati označevalnik sintakse react v Reactu, ga namestite prek npm.

npm namestite označevalnik-sintakse reakcije --shrani

Ustvarite novo komponento, imenovano CodeBlock.js v vaši aplikaciji React in uvozite označevalnik-sintakse reakcije:

uvoz Označevalnik sintakse od 'react-syntax-označevalnik';
uvoz {docco} od 'react-syntax-highlighter/dist/esm/styles/hljs';
konst CodeBlock = ({codestring}) => {
vrnitev (
<SyntaxHighlighter language="javascript" style={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

Komponenta SyntaxHighlighter sprejme jezik in slog za uporabo. Kot svojo vsebino vzame tudi kodni niz.

Zgornjo komponento lahko upodobite na naslednji način:

konst Aplikacija = () => {
konst codeString = `
konst Kvadrat = (n) => vrnitev n * n
 `
vrnitev(
<CodeBlock codestring={codeString}/>
 )
}

Pomembno je omeniti, da lahko uporaba označevalca react-syntax-highlighter poveča vašo velikost gradnje, tako da lahko, če je potrebno, uvozite svetlobno gradnjo. Lahka zgradba pa nima privzetih slogov.

Prav tako boste morali uvoziti in registrirati jezike, ki jih želite uporabljati registerLanguage funkcija, izvožena iz lahke zgradbe.

uvoz { Svetloba kot Označevalnik sintakse } od 'react-syntax-označevalnik';
uvoz js od 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Ta komponenta uporablja Highlight.js za označevanje kode.

Če želite namesto tega uporabiti PrismJS, ga uvozite iz paketa react-syntax-highlighter, kot je ta:

uvoz { Prizma kot Označevalnik sintakse } od "react-syntax highlighter";
uvoz {vscDarkPlus} od "react-syntax-highlighter/dist/esm/styles/prism";

Za gradnjo prizme svetlobe uvozite PrismLight in registrirajte jezik, ki ga uporabljate.

uvoz { PrismLight kot Označevalnik sintakse } od 'react-syntax-označevalnik';
uvoz jsx od 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
uvoz prizma od 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Uporaba prizme je koristna, zlasti pri označevanju jsx, ker je označevalnik react-syntax-highlighter ne podpira v celoti.

Dodajanje številk vrstic v kodni blok

Zdaj, ko veste, kako označiti blok kode, lahko začnete dodajati dodatne funkcije, kot so številke vrstic.

Z označevalcem react-syntax-highlighter morate samo posredovati showLineNumbers v komponento SyntaxHighlighter in jo nastavite na true.

<SyntaxHighlighter language="javascript" style={docco} showLineNumbers="prav">
 {codeString}
</SyntaxHighlighter>

Komponenta bo zdaj prikazala številke vrstic poleg vaše kode.

Uporaba slogov po meri v vaši komponenti

Čeprav označevalnik react-syntax-highlighter zagotavlja slog, boste morda morali včasih prilagoditi svoje bloke kode.

Za to vam paket omogoča prenos inline slogi CSS na podlago customStyle, kot je prikazano spodaj:

<SyntaxHighlighter language="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5px", Barva ozadja: "#001E3C"}} >
 {codestring}
</SyntaxHighlighter>

Označeni blok kode bo imel v tem primeru polmer obrobe po meri in barvo ozadja.

Pomen označevanja sintakse

Za označevanje kode v Reactu lahko uporabite paket react-syntax-highlighter. Lahko različico lahko uporabite za zmanjšanje velikosti gradnje in prilagajanje blokov kode z uporabo lastnih slogov.

Če označite delčke kode, vaša koda izgleda dobro, izboljša njeno berljivost in postane bolj dostopna bralcem.