Jedna od ključnih značajki bloga o programiranju su blokovi koda. Ne morate ih oblikovati pomoću isticanja sintakse, ali će vaši blogovi izgledati puno ljepše ako to učinite. Također može poboljšati čitljivost vašeg koda.

Ovaj članak će vam pokazati kako koristiti react-syntax-highlighter za označavanje blokova koda u Reactu. Stvorit ćete komponentu bloka koda koja može istaknuti kod koji joj je proslijeđen pomoću sintakse navedenog jezika.

Označavanje sintakse s react-syntax-označivačem

Marker react sintakse omogućuje vam da označite kod pomoću Reacta. Za razliku od drugih označivači sintakse, react-syntax-highlighter ne oslanja se na ComponentDidUpdate ili ComponentDidMount za umetanje označenog koda u DOM koristeći opasnoSetInnerHTML.

Taj pristup je opasan jer izlaže aplikaciju cross-site scripting napadi.

Umjesto toga, koristi stablo sintakse za izgradnju virtualnog DOM-a i ažurira ga samo promjenama.

Komponenta koristi PrismJS i Highlight.js u pozadini. Možete odabrati bilo koji od njih da biste istaknuli svoj kod. Vrlo je jednostavan za korištenje jer pruža styling izvan okvira.

instagram viewer

Komponenta react-syntax-highlighter prihvaća kod, jezik i stil kao rekvizite. Komponenta prihvaća i druge mogućnosti prilagodbe. Možete ih pronaći u react dokumentacija za označavanje sintakse.

Korištenje komponente react-syntax-highlighter

Da biste počeli koristiti označivač react sintakse u Reactu, instalirajte ga putem npm-a.

npm instalirati react-syntax marker --uštedjeti

Napravite novu komponentu tzv CodeBlock.js u vašoj React aplikaciji i uvezite react-syntax marker:

uvoz Označivač sintakse iz 'react-syntax-highlighter';
uvoz {docco} iz 'react-syntax-highlighter/dist/esm/styles/hljs';
konst CodeBlock = ({codestring}) => {
povratak (
<SyntaxHighlighter language="javascript" stil={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

Komponenta SyntaxHighlighter prihvaća jezik i stil za korištenje. Također uzima kodni niz kao svoj sadržaj.

Gornju komponentu možete prikazati na sljedeći način:

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

Važno je napomenuti da upotreba react-syntax-highlightera može povećati vašu veličinu međugradnje, pa ako trebate, možete uvesti laganu međugradnju. Lagana konstrukcija, međutim, nema zadane stilove.

Također ćete morati uvesti i registrirati jezike koje želite koristiti registerJezik funkcija izvezena iz svjetlosne građe.

uvoz { Svjetlo kao Marker sintakse } iz 'react-syntax-highlighter';
uvoz js iz 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Ova komponenta koristi Highlight.js za označavanje koda.

Da biste umjesto toga koristili PrismJS, uvezite ga iz paketa react-syntax-highlighter ovako:

uvoz { Prizma kao Marker sintakse } iz "react-syntax-highlighter";
uvoz {vscDarkPlus} iz "react-syntax-highlighter/dist/esm/styles/prism";

Za konstrukciju prizmatike, uvezite PrismLight i registrirajte jezik koji koristite.

uvoz { PrismLight kao Marker sintakse } iz 'react-syntax-highlighter';
uvoz jsx iz 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
uvoz prizma iz 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Korištenje prizme je korisno, posebno kada se označava jsx jer ga react-syntax-highlighter ne podržava u potpunosti.

Dodavanje brojeva redaka u blok koda

Sada kada znate kako istaknuti blok koda, možete početi dodavati dodatne značajke poput brojeva redaka.

S react-syntax-highlighterom trebate samo proći showLineNumbers na komponentu SyntaxHighlighter i postavite je na true.

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

Komponenta će sada prikazati brojeve redaka pored vašeg koda.

Korištenje prilagođenih stilova u vašoj komponenti

Iako react-syntax-highlighter pruža stil, možda ćete ponekad morati prilagoditi blokove koda.

Za to vam paket omogućuje inline prolaz CSS stilovi na customStyle prop kao što je prikazano u nastavku:

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

Označeni blok koda imat će prilagođeni radijus obruba i boju pozadine u ovom primjeru.

Važnost isticanja sintakse

Možete koristiti paket react-syntax-highlighter za označavanje koda u Reactu. Laganu verziju možete koristiti za smanjenje veličine izrade i prilagođavanje blokova koda pomoću vlastitih stilova.

Isticanje isječaka koda čini da vaš kod izgleda dobro, poboljšava njegovu čitljivost i čini ga pristupačnijim čitateljima.