Slik legger du til kodeblokker i React-appen din

I webutvikling er visning av kodeblokker med riktig formatering og fremheving et vanlig krav. Kodeblokker er et allsidig verktøy som kan brukes til en rekke formål, inkludert å vise kode og forbedre brukerengasjementet.

Installere biblioteket

Først, lage en React-app og installer reagere-kode-blokker bibliotek. Dette biblioteket brukes til å vise kodeblokker i appen din. Du kan installere dette biblioteket ved å bruke npm, pakkebehandleren for Node.js. Åpne terminalen og naviger til prosjektkatalogen. Kjør deretter følgende kommando:

npm installer react-code-blocks

Dette vil installere react-code-blocks-biblioteket i prosjektet ditt.

Legge til kodeblokken til prosjektet ditt

Når du har installert react-code-blocks-biblioteket, er du klar til å komme i gang. Først importerer du Kodeblokk komponent fra react-code-blocks-biblioteket i appen din. Du kan gjøre dette ved å legge til følgende kode i filen din:

import { CodeBlock } fra"reager-kode-blokker";

Deretter bruker du CodeBlock-komponenten i appen din ved å legge til følgende kode:

 tekst='console.log("Hei, verden!");'
 språk='javascript'
 showLineNumbers={ekte}
 theme={yourTheme}
/>

I koden ovenfor sender du flere rekvisitter til CodeBlock-komponenten. Her er en liste over alle tilgjengelige rekvisitter:

• tekst (obligatorisk): Koden som skal vises i kodeblokken.
• språk (påkrevd): Programmeringsspråket til koden. Dette brukes til syntaksutheving av kodeblokken.
• showLineNumbers: En boolsk verdi som indikerer om linjenummer skal vises i kodeblokken eller ikke. Den er som standard falsk.
• tema:Temaet som skal brukes for kodeblokken. Dette kan være et innebygd tema eller et tilpasset temaobjekt. Den er som standard GitHub.
• startlinjenummer: Linjenummeret å begynne å telle fra. Den er som standard 1.
• kodeblokk: Et objekt som inneholder alternativer for kodeblokken. Dette kan inkludere linjenumre (en boolsk verdi som indikerer om linjenummer skal vises eller ikke) og wrapLines (en boolsk verdi som indikerer om linjer skal brytes eller ikke).
• ved trykk: En funksjon å ringe når kodeblokken klikkes.

Her er et eksempel på hvordan du bruker alle disse rekvisittene:

import { CodeBlock } fra"reager-kode-blokker";
funksjonMin komponent() {
konst handleClick = () => {
konsoll.Logg("Kodeblokk klikket");
 };
komme tilbake (
 tekst='const greeting = "Hei, verden!"; console.log (hilsen);'
 språk='javascript'
 showLineNumbers={ekte}
 tema="atom-en-mørk"
 starterLineNumber={10}
 codeBlock={{ linjenumre: falsk, wrapLines: ekte }}
 onClick={handleClick}
 />
 );
}

I koden ovenfor bruker du atom-en-mørk tema, starter linjenumrene på 10, deaktiverer linjenumrene, aktiverer linjebryting og legger ved en klikkbehandler.

Ved å bruke disse rekvisittene kan du tilpasse utseendet og oppførselen til kodeblokkene dine for å passe dine behov.

Legge til temaer i kodeblokkene dine

React-code-blocks-biblioteket tilbyr en rekke innebygde temaer som kan brukes til å tilpasse utseendet til kodeblokkene dine. For å bruke et innebygd tema, trenger du bare å spesifisere navnet på temaet i tema rekvisitt. For eksempel å bruke atom-en-mørk tema, vil du bruke følgende kode:

 tekst='console.log("Hei, verden!");'
 språk='javascript'
 showLineNumbers={ekte}
 tema="atom-en-mørk"
/>

I tillegg til de innebygde temaene, kan du også lage egendefinerte temaer ved å definere et JavaScript-objekt som spesifiserer fargene som skal brukes for ulike deler av kodeblokken. Her er et eksempel på hvordan et egendefinert temaobjekt kan se ut:

konst myCustomTheme = {
 linjeNumberFarge: "#ccc",
 linjeNumberBgFarge: "#222",
 bakgrunnsfarge: "#222",
 tekstfarge: "#ccc",
 understrengFarge: "#00ff00",
 nøkkelordfarge: "#0077ff",
 attributtFarge: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 navnFarge: "#f8f8f8",
 innebygd farge: "#0077ff",
 bokstavelig farge: "#ffaa00",
 bulletColor: "#ffaa00",
 kodefarge: "#ccc",
 tilleggsfarge: "#00ff00",
 regexpFarge: "#f8f8f8",
 symbolFarge: "#ffaa00",
 variabelFarge: "#ffaa00",
 malVariableColor: "#ffaa00",
 linkFarge: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 selectorPseudoColor: "#aa00ff",
 typeFarge: "#0077ff",
 strengfarge: "#00ff00",
 selectorIdColor: "#ffaa00",
 sitatFarge: "#f8f8f8",
 templateTagColor: "#ccc",
 slettingsfarge: "#ff0000",
 tittelfarge: "#0077ff",
 seksjon Farge: "#0077ff",
 kommentarFarge: "#777",
 metaKeywordColor: "#f8f8f8",
 metafarge: "#aa00ff",
 funksjonFarge: "#0077ff",
 nummerFarge: "#ffaa00",
};

For å bruke et tilpasset tema, vil du sende temaobjektet som temarekvisitten til CodeBlock-komponenten:

 tekst='console.log("Hei, verden!");'
 språk='javascript'
 showLineNumbers={ekte}
 theme={myCustomTheme}
/>

Nedenfor er utgangen:

Ved å bruke innebygde og tilpassede temaer kan du tilpasse utseendet til kodeblokkene dine for å passe dine behov og den generelle utformingen av appen din.

Legger til CopyBlock til prosjektet ditt

Hvis du vil legge til kopifunksjonaliteten til kodeblokkene dine, kan du bruke CopyBlock komponent levert av react-code-blocks-biblioteket. For å bruke denne komponenten, må du installere reager-kopi-til-utklippstavle bibliotek også. Slik legger du til CopyBlock-komponenten i prosjektet ditt:

Installer reager-kopi-til-utklippstavle bibliotek:

npm installer react-copy-to-clipboard

Importer de nødvendige komponentene og bibliotekene:

import { CopyBlock } fra'reager-kode-blokker';
import { FaCopy } fra'react-ikoner/fa';
import kopiere fra'kopiere til utklippstavle';

Bruk CopyBlock-komponenten i koden din:

konst kode = 'console.log("Hei, verden!");';
konst språk = 'javascript';
 tekst={kode}
 språk={språk}
 showLineNumbers={ekte}
 wrapLines={ekte}
 tema='dracula'
 kodeblokk
 icon={}
 onCopy={() => kopi (kode)}
/>

Nedenfor er utgangen:

Ved å legge til CopyBlock-komponenten til prosjektet ditt, kan du enkelt la brukere kopiere koden fra kodeblokkene til utklippstavlen.

Alternative metoder for å legge til kodeblokker

Selv om bruk av react-code-blocks-biblioteket er den enkleste måten å legge til kodeblokker i React-appen din, er det også noen alternative metoder du kan bruke:

1. Legger til syntaksutheving manuelt: Hvis du ikke vil bruke et bibliotek, kan du manuelt legge til syntaksutheving i koden din bruker Tailwind CSS eller vanlig CSS. Dette innebærer å legge til CSS-klasser til kodeelementene dine for å bruke de riktige stilene. Selv om denne metoden gir deg mer kontroll over stilene, kan det være tidkrevende å sette opp og vedlikeholde.
2. Bruker andre biblioteker: Det er flere andre biblioteker tilgjengelig som gir syntaksutheving for kode, for eksempel reager-syntaks-highlighter, prisme-reager-renderer, og highlight.js. Disse bibliotekene har forskjellige funksjoner og stiler, så du kan velge en som passer dine behov.

Mens react-code-blocks-biblioteket er et godt valg for de fleste applikasjoner, kan disse alternative metodene være nyttige i visse situasjoner. Til syvende og sist vil metoden du velger avhenge av dine spesifikke behov og preferanser.

Forbedre brukerengasjementet med kodeblokker

Ved å bruke kodeblokker for å forklare kode, gi interaktive kodeeksempler og lage visuelt tiltalende design, kan du forbedre brukernes opplevelse og holde dem engasjert med nettstedet ditt eller applikasjon. I tillegg, ved å bruke funksjoner som CopyBlock og tilpassede temaer, kan du gjøre React-appen enda mer funksjonell og attraktiv.