Haluatko näyttää koodilohkot React-sovelluksessasi? Noudata tätä opasta integroidaksesi syntaksilla korostetut koodilohkot sovellukseesi.

Verkkokehityksessä koodilohkojen näyttäminen asianmukaisella muotoilulla ja korostuksella on yleinen vaatimus. Koodilohkot ovat monipuolinen työkalu, jota voidaan käyttää moniin tarkoituksiin, kuten koodin näyttämiseen ja käyttäjien sitoutumisen parantamiseen.

Kirjaston asentaminen

Ensimmäinen, luo React-sovellus ja asenna React-code-locks kirjasto. Tätä kirjastoa käytetään koodilohkojen näyttämiseen sovelluksessasi. Voit asentaa tämän kirjaston käyttämällä Node.js: n paketinhallintaohjelmaa npm. Avaa terminaali ja siirry projektihakemistoosi. Suorita sitten seuraava komento:

npm asentaa react-code-blocks

Tämä asentaa react-code-blocks -kirjaston projektiisi.

Koodilohkon lisääminen projektiisi

Kun olet asentanut react-code-blocks -kirjaston, olet valmis aloittamaan. Tuo ensin CodeBlock komponentti sovelluksesi react-code-block-kirjastosta. Voit tehdä tämän lisäämällä seuraavan koodin tiedostoosi:

instagram viewer 
tuonti { CodeBlock } alkaen"react-code-blocks";

Käytä sitten CodeBlock-komponenttia sovelluksessasi lisäämällä seuraava koodi:

 teksti ='console.log("Hei, maailma!");'
 kieli ='javascript'
 showLineNumbers={totta}
 teema={teema}
/>

Yllä olevassa koodissa välität useita rekvisiitta CodeBlock-komponenttiin. Tässä on luettelo kaikista saatavilla olevista rekvisiittauksista:

  • teksti (pakollinen): Koodilohkossa näytettävä koodi.
  • kieli (pakollinen): Koodin ohjelmointikieli. Tätä käytetään koodilohkon syntaksin korostus.
  • showLineNumbers: Boolen arvo, joka osoittaa, näytetäänkö rivinumerot koodilohkossa vai ei. Se on oletuksena false.
  • teema: Koodilohkossa käytettävä teema. Tämä voi olla sisäänrakennettu teema tai mukautettu teemaobjekti. Se on oletuksena GitHub.
  • aloitusLineNumber: rivinumero, josta laskenta aloitetaan. Se on oletuksena 1.
  • koodilohko: Objekti, joka sisältää valintoja koodilohkolle. Tämä voi sisältää rivinumerot (boolen arvo, joka osoittaa, näytetäänkö rivinumerot vai ei) ja wrapLines (looginen arvo, joka ilmaisee rivitetäänkö rivit vai ei).
  • klikkaamalla: Toiminto, jota kutsutaan, kun koodilohkoa napsautetaan.

Tässä on esimerkki kaikkien näiden varusteiden käytöstä:

tuonti { CodeBlock } alkaen"react-code-blocks";
toimintoMyComponent() {
konst HandClick = () => {
konsoli.Hirsi("Koodilohko napsautettu");
 };
palata (
 teksti ='const greeting = "Hei, maailma!"; console.log (tervehdys);'
 kieli ='javascript'
 showLineNumbers={totta}
 teema ="atomi-yksi-tumma"
 startLineNumber={10}
 codeBlock={{ rivinumerot: väärä, wrapLines: totta }}
 onClick={handleClick}
 />
 );
}

Yllä olevassa koodissa käytät atomi-yksi-tumma teema, rivinumeroiden aloittaminen 10:stä, rivinumeroiden poistaminen käytöstä, rivien rivityksen ottaminen käyttöön ja napsautuskäsittelijän liittäminen.

Käyttämällä näitä apuvälineitä voit mukauttaa koodilohkojesi ulkoasua ja toimintaa tarpeidesi mukaan.

Teemojen lisääminen koodilohkoihin

React-code-blocks -kirjasto tarjoaa erilaisia ​​sisäänrakennettuja teemoja, joita voidaan käyttää koodilohkojesi ulkoasun mukauttamiseen. Jos haluat käyttää sisäänrakennettua teemaa, sinun on yksinkertaisesti määritettävä teeman nimi teema prop. Esimerkiksi käyttääksesi atomi-yksi-tumma teema, käytä seuraavaa koodia:

 teksti ='console.log("Hei, maailma!");'
 kieli ='javascript'
 showLineNumbers={totta}
 teema ="atomi-yksi-tumma"
/>

Sisäänrakennettujen teemojen lisäksi voit myös luoda mukautettuja teemoja määrittämällä JavaScript-objektin, joka määrittää koodilohkon eri osissa käytettävät värit. Tässä on esimerkki siitä, miltä mukautettu teemaobjekti voi näyttää:

konst myCustomTheme = {
 lineNumberColor: "#ccc",
 riviNumberBgColor: "#222",
 taustaväri: "#222",
 tekstin väri: "#ccc",
 alamerkkijonoväri: "#00ff00",
 avainsanaväri: "#0077ff",
 attribuuttiColor: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 nimi Väri: "#f8f8f8",
 builtInColor: "#0077ff",
 kirjaimellinen väri: "#ffaa00",
 bulletColor: "#ffaa00",
 codeColor: "#ccc",
 lisäväri: "#00ff00",
 regexpColor: "#f8f8f8",
 symboliväri: "#ffaa00",
 variableColor: "#ffaa00",
 templateVariableColor: "#ffaa00",
 linkin väri: "#aa00ff",
 SelectorAttributeColor: "#ffaa00",
 valitsinPseudoväri: "#aa00ff",
 tyyppiVäri: "#0077ff",
 stringColor: "#00ff00",
 selectorIdColor: "#ffaa00",
 quoteColor: "#f8f8f8",
 templateTagColor: "#ccc",
 poistoväri: "#ff0000",
 titleColor: "#0077ff",
 osion väri: "#0077ff",
 kommentti Väri: "#777",
 metaKeywordColor: "#f8f8f8",
 metaColor: "#aa00ff",
 toimintoväri: "#0077ff",
 numeroväri: "#ffaa00",
};

Jos haluat käyttää mukautettua teemaa, sinun on välitettävä teemaobjekti CodeBlock-komponentin teema-ehdotuksena:

 teksti ='console.log("Hei, maailma!");'
 kieli ='javascript'
 showLineNumbers={totta}
 theme={myCustomTheme}
/>

Alla on tulos:

Käyttämällä sisäänrakennettuja ja mukautettuja teemoja voit muokata koodilohkojesi ulkoasua tarpeidesi ja sovelluksesi yleisen suunnittelun mukaan.

CopyBlockin lisääminen projektiisi

Jos haluat lisätä kopiointitoiminnon koodilohkoihisi, voit käyttää CopyBlock React-code-block-kirjaston tarjoama komponentti. Jotta voit käyttää tätä komponenttia, sinun on asennettava reagoi-kopioi-leikepöydälle myös kirjasto. Näin lisäät CopyBlock-komponentin projektiisi:

Asenna reagoi-kopioi-leikepöydälle kirjasto:

npm asentaa react-copy-to-leikepöydälle

Tuo tarvittavat komponentit ja kirjastot:

tuonti { CopyBlock } alkaen'react-code-blocks';
tuonti { FaCopy } alkaen'react-icons/fa';
tuonti kopio alkaen'Kopioi leikepöydälle';

Käytä CopyBlock-komponenttia koodissasi:

konst koodi = 'console.log("Hei, maailma!");';
konst kieli = 'javascript';
 teksti={koodi}
 kieli={kieli}
 showLineNumbers={totta}
 wrapLines={totta}
 teema ="dracula"
 koodilohko
 icon={}
 onCopy={() => kopioi (koodi)}
/>

Alla on tulos:

Lisäämällä CopyBlock-komponentin projektiisi, voit helposti sallia käyttäjien kopioida koodin koodilohkoistasi leikepöydälleen.

Vaihtoehtoiset menetelmät koodilohkojen lisäämiseen

React-code-blocks -kirjaston käyttäminen on yksinkertaisin tapa lisätä koodilohkoja React-sovellukseesi, mutta voit käyttää myös muutamia vaihtoehtoisia menetelmiä:

  1. Syntaksin korostuksen lisääminen manuaalisesti: Jos et halua käyttää kirjastoa, voit lisätä syntaksin korostuksen manuaalisesti koodiisi Tailwind CSS: n avulla tai normaali CSS. Tämä edellyttää CSS-luokkien lisäämistä koodielementteihin sopivien tyylien soveltamiseksi. Vaikka tämä menetelmä antaa sinulle enemmän hallintaa tyyleistä, sen määrittäminen ja ylläpito voi viedä aikaa.
  2. Muiden kirjastojen käyttö: Saatavilla on useita muita kirjastoja, jotka tarjoavat syntaksin korostuksen koodille, kuten react-syntax-highlighter, prisma-react-renderer, ja highlight.js. Näissä kirjastoissa on erilaisia ​​ominaisuuksia ja tyylejä, joten voit valita tarpeisiisi sopivan.

Vaikka react-code-blocks -kirjasto on loistava valinta useimpiin sovelluksiin, nämä vaihtoehtoiset menetelmät voivat olla hyödyllisiä tietyissä tilanteissa. Lopulta valitsemasi menetelmä riippuu erityistarpeistasi ja mieltymyksistäsi.

Paranna käyttäjien sitoutumista koodilohkoilla

Käyttämällä koodilohkoja koodin selittämiseen, interaktiivisten koodausesimerkkien tarjoamiseen ja visuaaliseen luomiseen houkuttelevia malleja, voit parantaa käyttäjien kokemusta ja pitää heidät sitoutuneina verkkosivustoosi tai sovellus. Lisäksi käyttämällä ominaisuuksia, kuten CopyBlock ja mukautettuja teemoja, voit tehdä React-sovelluksestasi entistä toimivamman ja houkuttelevamman.