Sådan tilføjer du kodeblokke i din React-app

I webudvikling er visning af kodeblokke med korrekt formatering og fremhævning et almindeligt krav. Kodeblokke er et alsidigt værktøj, der kan bruges til en række forskellige formål, herunder at vise kode og forbedre brugerengagementet.

Installation af biblioteket

Først, oprette en React-app og installer reagere-kode-blokke bibliotek. Dette bibliotek bruges til at vise kodeblokke i din app. Du kan installere dette bibliotek ved hjælp af npm, pakkehåndteringen for Node.js. Åbn din terminal og naviger til dit projektbibliotek. Kør derefter følgende kommando:

npm installer react-code-blokke

Dette vil installere react-code-blocks-biblioteket i dit projekt.

Tilføjelse af kodeblokken til dit projekt

Når du har installeret react-code-blocks-biblioteket, er du klar til at komme i gang. Først skal du importere Kodeblok komponent fra react-code-blocks-biblioteket i din app. Du kan gøre dette ved at tilføje følgende kode til din fil:

importere { CodeBlock } fra"reager-kode-blokke";

Brug derefter CodeBlock-komponenten i din app ved at tilføje følgende kode:

 tekst='console.log("Hej verden!");'
 sprog='javascript'
 showLineNumbers={rigtigt}
 tema={dittema}
/>

I ovenstående kode sender du flere rekvisitter til CodeBlock-komponenten. Her er en liste over alle tilgængelige rekvisitter:

• tekst (påkrævet): Koden, der skal vises i kodeblokken.
• sprog (påkrævet): Kodens programmeringssprog. Dette bruges til syntaksfremhævning af kodeblokken.
• showLineNumbers: En boolesk værdi, der angiver, om linjenumre skal vises i kodeblokken eller ej. Den er som standard falsk.
• tema:Temaet, der skal bruges til kodeblokken. Dette kan være et indbygget tema eller et brugerdefineret temaobjekt. Det er standard til GitHub.
• startlinjenummer: Linjenummeret, der skal begynde at tælle fra. Den er som standard 1.
• kodeblok: Et objekt, der indeholder muligheder for kodeblokken. Dette kan bl.a linjenumre (en boolesk værdi, der angiver, om linjenumre skal vises eller ej) og wrapLines (en boolesk værdi, der angiver, om linjer skal ombrydes eller ej).
• påKlik: En funktion til at kalde, når kodeblokken klikkes.

Her er et eksempel på, hvordan du bruger alle disse rekvisitter:

importere { CodeBlock } fra"reager-kode-blokke";
fungereMyComponent() {
konst handleClick = () => {
konsol.log("Kodeblok klikket");
 };
Vend tilbage (
 tekst='const greeting = "Hej verden!"; console.log (hilsen);'
 sprog='javascript'
 showLineNumbers={rigtigt}
 tema='atom-en-mørke'
 startLineNumber={10}
 kodeblok={{ linjenumre: falsk, wrapLines: rigtigt }}
 onClick={handleClick}
 />
 );
}

I ovenstående kode bruger du atom-en-mørk tema, start linjenumrene ved 10, deaktivering af linjenumre, aktivering af linjeombrydning og vedhæftning af en klikhåndtering.

Ved at bruge disse rekvisitter kan du tilpasse udseendet og adfærden af ​​dine kodeblokke, så de passer til dine behov.

Tilføjelse af temaer i dine kodeblokke

React-code-blocks-biblioteket tilbyder en række indbyggede temaer, der kan bruges til at tilpasse udseendet af dine kodeblokke. For at bruge et indbygget tema skal du blot angive navnet på temaet i tema rekvisit. For eksempel at bruge atom-en-mørk tema, ville du bruge følgende kode:

 tekst='console.log("Hej verden!");'
 sprog='javascript'
 showLineNumbers={rigtigt}
 tema='atom-en-mørke'
/>

Ud over de indbyggede temaer kan du også oprette brugerdefinerede temaer ved at definere et JavaScript-objekt, der angiver farverne, der skal bruges til forskellige dele af kodeblokken. Her er et eksempel på, hvordan et brugerdefineret temaobjekt kan se ud:

konst mit brugerdefinerede tema = {
 linjeNumberFarve: "#ccc",
 linjeNumberBgFarve: "#222",
 baggrundsfarve: "#222",
 tekstfarve: "#ccc",
 understrengFarve: "#00ff00",
 søgeordsfarve: "#0077ff",
 attributFarve: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 navn Farve: "#f8f8f8",
 indbygget farve: "#0077ff",
 bogstavelig farve: "#ffaa00",
 bulletColor: "#ffaa00",
 kodefarve: "#ccc",
 tilføjelse Farve: "#00ff00",
 regexpFarve: "#f8f8f8",
 symbolFarve: "#ffaa00",
 variabelFarve: "#ffaa00",
 templateVariableColor: "#ffaa00",
 linkfarve: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 selectorPseudoColor: "#aa00ff",
 typeFarve: "#0077ff",
 strengfarve: "#00ff00",
 selectorIdColor: "#ffaa00",
 citat Farve: "#f8f8f8",
 templateTagColor: "#ccc",
 sletningsfarve: "#ff0000",
 titelfarve: "#0077ff",
 sektion Farve: "#0077ff",
 kommentarFarve: "#777",
 metaKeywordColor: "#f8f8f8",
 metafarve: "#aa00ff",
 funktion Farve: "#0077ff",
 nummerFarve: "#ffaa00",
};

Hvis du vil bruge et brugerdefineret tema, skal du videregive temaobjektet som temaet for CodeBlock-komponenten:

 tekst='console.log("Hej verden!");'
 sprog='javascript'
 showLineNumbers={rigtigt}
 theme={myCustomTheme}
/>

Nedenfor er output:

Ved at bruge indbyggede og brugerdefinerede temaer kan du tilpasse udseendet af dine kodeblokke, så de passer til dine behov og det overordnede design af din app.

Tilføjelse af CopyBlock til dit projekt

Hvis du vil tilføje kopifunktionaliteten til dine kodeblokke, kan du bruge CopyBlock komponent leveret af react-code-blocks-biblioteket. For at bruge denne komponent skal du installere reagere-kopi-til-udklipsholder også biblioteket. Sådan tilføjer du CopyBlock-komponenten til dit projekt:

Installer reagere-kopi-til-udklipsholder bibliotek:

npm installer react-copy-to-clipboard

Importer de nødvendige komponenter og biblioteker:

importere { CopyBlock } fra'reager-kode-blokke';
importere { FaCopy } fra'reaktionsikoner/fa';
importere kopi fra'Kopier til udklipsholder';

Brug CopyBlock-komponenten i din kode:

konst kode = 'console.log("Hej verden!");';
konst sprog = 'javascript';
 tekst={kode}
 sprog={sprog}
 showLineNumbers={rigtigt}
 wrapLines={rigtigt}
 tema='dracula'
 kodeblok
 icon={}
 onCopy={() => kopi (kode)}
/>

Nedenfor er output:

Ved at tilføje CopyBlock-komponenten til dit projekt, kan du nemt tillade brugere at kopiere koden fra dine kodeblokke til deres udklipsholder.

Alternative metoder til at tilføje kodeblokke

Mens brug af react-code-blocks-biblioteket er den mest ligetil måde at tilføje kodeblokke til din React-app, er der også et par alternative metoder, du kan bruge:

1. Manuel tilføjelse af syntaksfremhævning: Hvis du ikke ønsker at bruge et bibliotek, kan du manuelt tilføje syntaksfremhævning til din kode ved hjælp af Tailwind CSS eller normal CSS. Dette involverer tilføjelse af CSS-klasser til dine kodeelementer for at anvende de passende stilarter. Selvom denne metode giver dig mere kontrol over stilene, kan det være tidskrævende at konfigurere og vedligeholde.
2. Brug af andre biblioteker: Der er flere andre tilgængelige biblioteker, der giver syntaksfremhævning for kode, som f.eks reagere-syntaks-fremhæver, prisme-reager-renderer, og highlight.js. Disse biblioteker har forskellige funktioner og stilarter, så du kan vælge et, der passer til dine behov.

Mens react-code-blocks-biblioteket er et godt valg til de fleste applikationer, kan disse alternative metoder være nyttige i visse situationer. I sidste ende vil den metode, du vælger, afhænge af dine specifikke behov og præferencer.

Forbedre brugerengagementet med kodeblokke

Ved at bruge kodeblokke til at forklare kode, levere interaktive kodningseksempler og skabe visuelt tiltalende design, kan du forbedre dine brugeres oplevelse og holde dem engageret i dit websted eller Ansøgning. Derudover kan du ved at bruge funktioner som CopyBlock og brugerdefinerede temaer gøre din React-app endnu mere funktionel og attraktiv.