Yksi ohjelmointiblogin tärkeimmistä ominaisuuksista on koodilohkot. Sinun ei tarvitse muotoilla niitä syntaksin korostustyökalulla, mutta se tekee blogeistasi paljon kauniimpia, jos teet niin. Se voi myös parantaa koodisi luettavuutta.

Tämä artikkeli näyttää, kuinka käyttää react-syntax-highlighteria koodilohkojen korostamiseen Reactissa. Luot koodilohkokomponentin, joka pystyy korostamaan sille lähetetyn koodin käyttämällä toimitetun kielen syntaksia.

Syntaksin korostus React-syntax-highlighterilla

React-syntaksin korostustoiminnon avulla voit korostaa koodia Reactilla. Toisin kuin muut syntaksin korostusmerkit, react-syntax-highlighter ei luota siihen, että ComponentDidUpdate tai ComponentDidMount lisää korostettua koodia DOM: iin vaarallisenSetInnerHTML: n avulla.

Tämä lähestymistapa on vaarallinen, koska se altistaa sovelluksen sivustojen väliset komentosarjahyökkäykset.

Sen sijaan se käyttää syntaksipuuta virtuaalisen DOM: n rakentamiseen ja päivittää sen vain muutoksilla.

Komponentti käyttää taustalla PrismJS: ää ja Highlight.js: ää. Voit käyttää jompaa kumpaa koodin korostamiseen. Se on erittäin helppokäyttöinen, koska se tarjoaa ensiluokkaista muotoilua.

React-syntax-highlighter-komponentti hyväksyy koodin, kielen ja tyylin rekvisiittana. Komponentti hyväksyy myös muut mukautusvaihtoehdot. Löydät ne osoitteesta React syntaksin korostustyökalun dokumentaatio.

React-syntax-highlighter-komponentin käyttäminen

Aloita react-syntaksin korostus Reactissa asentamalla se npm: n kautta.

npm Asentaa react-syntax-highlighter --Tallentaa

Luo uusi komponentti nimeltä CodeBlock.js React-sovelluksessasi ja tuonti react-syntax-highlighter:

tuonti SyntaxHiglighter alkaen 'react-syntax-highlighter';
tuonti { docco } alkaen 'react-syntax-highlighter/dist/esm/styles/hljs';
konst CodeBlock = ({koodijono}) => {
palata (
<SyntaxHighlighter language="javascript" style={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

SyntaxHighlighter-komponentti hyväksyy käytettävän kielen ja tyylin. Se ottaa myös koodimerkkijonon sisällökseen.

Voit hahmontaa yllä olevan komponentin seuraavasti:

konst Sovellus = () => {
konst koodimerkkijono = `
konst Neliö = (n) => palata n * n
 `
palata(
<CodeBlock codestring={codeString}/>
 )
}

On tärkeää huomata, että react-syntax-highlighterin käyttö voi kasvattaa koontikoon, joten voit tarvittaessa tuoda kevyen koontiversion. Kevyellä kokoonpanolla ei kuitenkaan ole oletustyylejä.

Sinun on myös tuotava ja rekisteröitävä haluamasi kielet käyttämällä rekisteröidäKieli toiminto viedään kevyestä versiosta.

tuonti { Kevyt kuten Syntax Highlighter } alkaen 'react-syntax-highlighter';
tuonti js alkaen 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Tämä komponentti käyttää Highlight.js: ää koodin korostamiseen.

Jos haluat käyttää PrismJS: ää, tuo se react-syntax-highlighter-paketista seuraavasti:

tuonti { Prisma kuten Syntax Highlighter } alkaen "react-syntax-highlighter";
tuonti { vscDarkPlus } alkaen "react-syntax-highlighter/dist/esm/styles/prism";

Tuo PrismLight-rakennetta varten PrismLight ja rekisteröi käyttämäsi kieli.

tuonti { PrismLight kuten Syntax Highlighter } alkaen 'react-syntax-highlighter';
tuonti jsx alkaen 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
tuonti prisma alkaen 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Prisman käyttäminen on hyödyllistä, varsinkin kun korostetaan jsx: ää, koska react-syntax-highlighter ei tue sitä täysin.

Rivinumeroiden lisääminen koodilohkoon

Nyt kun osaat korostaa koodilohkon, voit aloittaa lisäominaisuuksien, kuten rivinumeroiden, lisäämisen.

React-syntax-highlighterilla sinun tarvitsee vain läpäistä showLineNumbers SyntaxHighlighter-komponenttiin ja aseta se arvoon tosi.

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

Komponentti näyttää nyt rivinumerot koodisi vieressä.

Mukautettujen tyylien käyttäminen komponentissasi

Vaikka react-syntax-highlighter tarjoaa tyylin, saatat joutua mukauttamaan koodilohkojasi toisinaan.

Tätä varten paketin avulla voit kulkea sisään CSS-tyylejä customStyle-propaan alla olevan kuvan mukaisesti:

<SyntaxHighlighter language="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5px", taustaväri: "#001E3C"}} >
 {koodijono}
</SyntaxHighlighter>

Tässä esimerkissä korostetulla koodilohkolla on mukautettu reunasäde ja taustaväri.

Syntaksin korostamisen merkitys

Voit käyttää react-syntax-highlighter-pakettia korostaaksesi koodia Reactissa. Voit käyttää kevytversiota pienentämään koontikokoa ja mukauttamaan koodilohkoja omilla tyyleilläsi.

Koodinpätkien korostaminen saa koodisi näyttämään hyvältä, parantaa sen luettavuutta ja tekee siitä lukijoiden lähestyttävämmän.