Viena iš pagrindinių programavimo tinklaraščio savybių yra kodų blokai. Nereikia jų formatuoti naudojant sintaksės žymeklį, bet tai padarys jūsų tinklaraščius daug gražiau. Tai taip pat gali pagerinti jūsų kodo skaitomumą.

Šiame straipsnyje bus parodyta, kaip naudoti react-syntax-highlighter kodo blokams paryškinti programoje React. Sukursite kodo bloko komponentą, galintį paryškinti jam perduotą kodą naudodami pateiktos kalbos sintaksę.

Sintaksės paryškinimas Su react-syntax-highlighter

React sintaksės žymeklis leidžia paryškinti kodą naudojant React. Skirtingai nuo kitų sintaksės žymekliai, react-syntax-highlighter nepasikliauja „ComponentDidUpdate“ arba „ComponentDidMount“, kad įterptų paryškintą kodą į DOM, naudodamas pavojingaiSetInnerHTML.

Toks požiūris yra pavojingas, nes jis atskleidžia programą kelių svetainių scenarijų atakos.

Vietoj to, jis naudoja sintaksės medį, kad sukurtų virtualų DOM ir atnaujina jį tik su pakeitimais.

Komponentas fone naudoja PrismJS ir Highlight.js. Galite pasirinkti naudoti bet kurį kodą paryškinti. Jį labai paprasta naudoti, nes jis suteikia originalų stilių.

instagram viewer

React-sintaksės paryškinimo komponentas priima kodą, kalbą ir stilių kaip rekvizitus. Komponentas taip pat priima kitas tinkinimo parinktis. Juos galite rasti react sintaksės paryškinimo dokumentai.

Naudojant react-syntax-highlighter komponentą

Norėdami pradėti naudoti „React“ sintaksės žymeklį „React“, įdiekite jį naudodami npm.

npm diegti react-sintaksė-paryškintuvas --sutaupyti

Sukurkite naują komponentą pavadinimu CodeBlock.js savo „React“ programoje ir importuoti react-sintaksė-paryškintuvas:

importuoti Sintaksės paryškinimo priemonė iš „reaguoti-sintaksė-paryškinimas“;
importuoti {docco} iš 'react-syntax-highlighter/dist/esm/styles/hljs';
konst CodeBlock = ({codestring}) => {
grąžinti (
<SintaksėHighlighter kalba="javascript" style={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

„SyntaxHighlighter“ komponentas priima naudotiną kalbą ir stilių. Jis taip pat turi kodo eilutę.

Aukščiau pateiktą komponentą galite pateikti taip:

konst Programėlė = () => {
konst codeString = `
konst Kvadratas = (n) => grąžinti n * n
 `
grąžinti(
<CodeBlock codestring={codeString}/>
 )
}

Svarbu pažymėti, kad naudojant react-syntax-highlighter gali padidėti versijos dydis, todėl, jei reikia, galite importuoti lengvą versiją. Tačiau lengva konstrukcija neturi numatytųjų stilių.

Taip pat turėsite importuoti ir užregistruoti norimas kalbas naudodami registruotisKalba funkcija eksportuota iš lengvosios versijos.

importuoti { Šviesa kaip Sintaksės paryškinimo priemonė } iš „reaguoti-sintaksė-paryškinimas“;
importuoti js iš „react-syntax-highlighter/dist/esm/languages/hljs/javascript“;
SyntaxHighlighter.registerLanguage('javascript', js);

Šis komponentas kodui paryškinti naudoja Highlight.js.

Norėdami vietoj to naudoti PrismJS, importuokite jį iš react-syntax-highlighter paketo taip:

importuoti { Prizmė kaip Sintaksės paryškinimo priemonė } iš "reaguoti-sintaksė-paryškinimas";
importuoti { vscDarkPlus } iš "react-syntax-highlighter/dist/esm/styles/prism";

Norėdami sukurti prizmę šviesą, importuokite PrismLight ir užregistruokite kalbą, kurią naudojate.

importuoti { PrismLight kaip Sintaksės paryškinimo priemonė } iš „reaguoti-sintaksė-paryškinimas“;
importuoti jsx iš 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
importuoti prizmė iš 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Prizmės naudojimas yra naudingas, ypač paryškinant jsx, nes react-syntax-highlighter jos visiškai nepalaiko.

Eilučių numerių įtraukimas į kodo bloką

Dabar, kai žinote, kaip paryškinti kodo bloką, galite pradėti pridėti papildomų funkcijų, pvz., eilučių numerių.

Naudojant react-sintaksės paryškinimą, tereikia išlaikyti showLineNumbers į komponentą SyntaxHighlighter ir nustatykite jį į true.

<SintaksėHighlighter kalba="javascript" style={docco} showLineNumbers="tiesa">
 {codeString}
</SyntaxHighlighter>

Dabar komponente šalia kodo bus rodomi eilučių numeriai.

Pasirinktinių stilių naudojimas komponente

Nors react-sintaksės paryškinimo priemonė suteikia stilių, kartais gali tekti tinkinti kodo blokus.

Tam paketas leidžia pereiti į eilutę CSS stiliai į customStyle rekvizitą, kaip parodyta toliau:

<SintaksėHighlighter kalba="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5 piks", fono spalva: "#001E3C"}} >
 {codestring}
</SyntaxHighlighter>

Šiame pavyzdyje paryškintas kodo blokas turės pasirinktinį kraštinės spindulį ir fono spalvą.

Sintaksės paryškinimo svarba

Galite naudoti react-syntax-highlighter paketą, kad paryškintumėte kodą React. Galite naudoti supaprastintą versiją, kad sumažintumėte kūrimo dydį ir tinkintumėte kodo blokus naudodami savo stilius.

Paryškinus kodo fragmentus, kodas atrodo gerai, pagerėja jo skaitomumas ir lengviau pasiekiamas skaitytojams.