Programmeerimisblogi üks põhifunktsioone on koodiplokid. Te ei pea neid vormindama süntaksi esiletõstja abil, kuid see muudab teie ajaveebid palju ilusamaks. See võib parandada ka teie koodi loetavust.

See artikkel näitab teile, kuidas kasutada React-syntax-highlighterit koodiplokkide esiletõstmiseks rakenduses React. Loote koodiploki komponendi, mis suudab sellele edastatud koodi esitatud keele süntaksi abil esile tõsta.

Süntaksi esiletõstmine React-syntax-highlighteriga

Reacti süntaksi esiletõstja võimaldab teil koodi Reacti abil esile tõsta. Erinevalt teistest süntaksi esiletõstjad, react-syntax-highlighter ei tugine ComponentDidUpdate'ile või ComponentDidMountile esiletõstetud koodi sisestamisel DOM-i, kasutades ohtlikultSetInnerHTML-i.

Selline lähenemine on ohtlik, kuna see paljastab rakenduse saidiülesed skriptirünnakud.

Selle asemel kasutab see virtuaalse DOM-i koostamiseks süntaksipuud ja värskendab seda ainult muudatustega.

Komponent kasutab taustal PrismJS-i ja Highlight.js-i. Saate oma koodi esiletõstmiseks kasutada kumbagi. Seda on väga lihtne kasutada, kuna see annab kohese stiili.

instagram viewer

React-süntaksi esiletõstja komponent aktsepteerib koodi, keelt ja stiili kui rekvisiite. Komponent aktsepteerib ka muid kohandamisvõimalusi. Need leiate jaotisest reageerida süntaksi esiletõstja dokumentatsioon.

React-syntax-highlighter komponendi kasutamine

Reacti süntaksi esiletõstja kasutamise alustamiseks rakenduses React installige see npm kaudu.

npm installida React-syntax-highlighter -- salvestada

Looge uus komponent nimega CodeBlock.js oma Reacti rakenduses ja importida React-syntax-highlighter:

importida Süntaksi esiletõstja alates 'react-syntax-highlighter';
importida {docco} alates 'react-syntax-highlighter/dist/esm/styles/hljs';
konst CodeBlock = ({codestring}) => {
tagasi (
<SyntaxHighlighteri keel="javascript" style={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

Komponent SyntaxHighlighter aktsepteerib kasutatavat keelt ja stiili. Samuti võtab see sisuks koodistringi.

Ülaltoodud komponendi saate renderdada järgmiselt:

konst Rakendus = () => {
konst koodistring = `
konst Ruut = (n) => tagasi n * n
 `
tagasi(
<CodeBlock codestring={codeString}/>
 )
}

Oluline on märkida, et react-syntax-highlighteri kasutamine võib teie järgu suurust suurendada, nii et kui vaja, saate kerge järgu importida. Kergel ehitusel pole aga vaikestiile.

Samuti peate importima ja registreerima soovitud keeled, kasutades registerKeel funktsioon eksporditakse kergest järgust.

importida { Valgus nagu Süntaksi esiletõstja } alates 'react-syntax-highlighter';
importida js alates 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

See komponent kasutab koodi esiletõstmiseks faili Highlight.js.

Selle asemel PrismJS-i kasutamiseks importige see paketist react-syntax-highlighter järgmiselt:

importida { Prisma nagu Süntaksi esiletõstja } alates "react-syntax-highlighter";
importida { vscDarkPlus } alates "react-syntax-highlighter/dist/esm/styles/prism";

Prism light ehituse jaoks importige PrismLight ja registreerige kasutatav keel.

importida { PrismLight nagu Süntaksi esiletõstja } alates 'react-syntax-highlighter';
importida jsx alates 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
importida prisma alates 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Prisma kasutamine on kasulik, eriti jsx esiletõstmisel, kuna react-syntax-highlighter ei toeta seda täielikult.

Reanumbrite lisamine koodiplokki

Nüüd, kui teate, kuidas koodiplokki esile tõsta, võite hakata lisama lisafunktsioone, nagu reanumbrid.

React-syntax-highlighteriga peate ainult läbima showLineNumbers komponendile SyntaxHighlighter ja määrake selle väärtuseks true.

<SyntaxHighlighteri keel="javascript" style={docco} showLineNumbers="tõsi">
 {codeString}
</SyntaxHighlighter>

Komponent näitab nüüd teie koodi kõrval reanumbreid.

Kohandatud stiilide kasutamine oma komponendis

Kuigi react-syntax-highlighter pakub stiili, peate mõnikord oma koodiplokke kohandama.

Selleks võimaldab pakett teil läbida inline CSS-stiilid kohandatud stiili rekvisiidile, nagu allpool näidatud:

<SyntaxHighlighteri keel="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5 pikslit", taustavärv: "#001E3C"}} >
 {codestring}
</SyntaxHighlighter>

Esiletõstetud koodiplokil on selles näites kohandatud äärise raadius ja taustavärv.

Süntaksi esiletõstmise tähtsus

Reactis koodi esiletõstmiseks saate kasutada paketti react-syntax-highlighter. Kerget versiooni saate kasutada järgu suuruse vähendamiseks ja koodiplokkide kohandamiseks oma stiilide abil.

Koodilõikude esiletõstmine muudab teie koodi hea välja, parandab selle loetavust ja muudab selle lugejatele paremini kättesaadavaks.