Codeblokken toevoegen in uw React-app

Bij webontwikkeling is het weergeven van codeblokken met de juiste opmaak en markering een algemene vereiste. Codeblokken zijn een veelzijdige tool die voor verschillende doeleinden kan worden gebruikt, waaronder het weergeven van code en het verbeteren van gebruikersbetrokkenheid.

De bibliotheek installeren

Eerst, maak een React-app en installeer de reactie-code-blokken bibliotheek. Deze bibliotheek wordt gebruikt om codeblokken in uw app weer te geven. U kunt deze bibliotheek installeren met behulp van npm, de pakketbeheerder voor Node.js. Open uw terminal en navigeer naar uw projectdirectory. Voer vervolgens de volgende opdracht uit:

npm installeer reactie-codeblokken

Hiermee wordt de bibliotheek met reageren-codeblokken in uw project geïnstalleerd.

Het codeblok toevoegen aan uw project

Zodra je de bibliotheek met reactiecodeblokken hebt geïnstalleerd, ben je klaar om aan de slag te gaan. Importeer eerst de

CodeBlok component uit de react-code-blocks-bibliotheek in uw app. Dit doe je door de volgende code toe te voegen aan je bestand:

importeren { CodeBlok } van"reageer-code-blokken";

Gebruik vervolgens de CodeBlock-component in uw app door de volgende code toe te voegen:

 tekst='console.log("Hallo wereld!");'
 taal='javascript'
 showLineNumbers={WAAR}
 thema={uwThema}
/>

In de bovenstaande code geeft u verschillende rekwisieten door aan de CodeBlock-component. Hier is een lijst met alle beschikbare rekwisieten:

• tekst (verplicht): De code die moet worden weergegeven in het codeblok.
• taal (verplicht): De programmeertaal van de code. Dit wordt gebruikt voor syntaxisaccentuering van het codeblok.
• showLineNumbers:Een Booleaanse waarde die aangeeft of regelnummers in het codeblok moeten worden weergegeven of niet. Het staat standaard op false.
• thema:Het thema dat voor het codeblok moet worden gebruikt. Dit kan een ingebouwd thema zijn of een aangepast thema-object. Het staat standaard op GitHub.
• beginlijnnummer: Het regelnummer om vanaf te tellen. Het staat standaard op 1.
• codeBlok: Een object met opties voor het codeblok. Dit kan omvatten lijn nummers (een Booleaanse waarde die aangeeft of regelnummers moeten worden weergegeven of niet) en wrapLijnen (een Booleaanse waarde die aangeeft of regels moeten worden omwikkeld of niet).
• bij klikken: Een functie die moet worden aangeroepen wanneer op het codeblok wordt geklikt.

Hier is een voorbeeld van het gebruik van al deze rekwisieten:

importeren { CodeBlok } van"reageer-code-blokken";
functieMijnComponent() {
const handleClick = () => {
troosten.log("Codeblok aangeklikt");
 };
opbrengst (
 tekst='const begroeting = "Hallo, wereld!"; console.log (begroeting);'
 taal='javascript'
 showLineNumbers={WAAR}
 thema='atoom-één-donker'
 startingLineNumber={10}
 codeBlock={{ lijn nummers: vals, wrapLijnen: WAAR }}
 onClick={handleClick}
 />
 );
}

In de bovenstaande code gebruikt u atoom-een-donker thema, regelnummers beginnen bij 10, regelnummers uitschakelen, regelomloop inschakelen en een klikhandler toevoegen.

Door deze rekwisieten te gebruiken, kunt u het uiterlijk en gedrag van uw codeblokken aanpassen aan uw behoeften.

Thema's toevoegen aan uw codeblokken

De bibliotheek met reactiecodeblokken biedt een verscheidenheid aan ingebouwde thema's die kunnen worden gebruikt om het uiterlijk van uw codeblokken aan te passen. Om een ​​ingebouwd thema te gebruiken, hoeft u alleen maar de naam van het thema op te geven in de thema prop. Om bijvoorbeeld de atoom-een-donker theme, zou je de volgende code gebruiken:

 tekst='console.log("Hallo wereld!");'
 taal='javascript'
 showLineNumbers={WAAR}
 thema='atoom-één-donker'
/>

Naast de ingebouwde thema's kunt u ook aangepaste thema's maken door een JavaScript-object te definiëren dat de kleuren specificeert die voor verschillende delen van het codeblok moeten worden gebruikt. Hier is een voorbeeld van hoe een aangepast thema-object eruit zou kunnen zien:

const mijnAangepastThema = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 Achtergrond kleur: "#222",
 tekst kleur: "#ccc",
 subtekenreeksKleur: "#00ff00",
 trefwoordKleur: "#0077ff",
 attribuutKleur: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagkleur: "#aa00ff",
 naamKleur: "#f8f8f8",
 ingebouwd in kleur: "#0077ff",
 letterlijke kleur: "#ffaa00",
 bulletKleur: "#ffaa00",
 codeKleur: "#ccc",
 toevoegingKleur: "#00ff00",
 regexpKleur: "#f8f8f8",
 symboolKleur: "#ffaa00",
 variabeleKleur: "#ffaa00",
 sjabloonVariabeleKleur: "#ffaa00",
 link kleur: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 selectorPseudoColor: "#aa00ff",
 typeKleur: "#0077ff",
 tekenreeksKleur: "#00ff00",
 selectorIdColor: "#ffaa00",
 quoteKleur: "#f8f8f8",
 sjabloonTagColor: "#ccc",
 verwijderingKleur: "#ff0000",
 titelKleur: "#0077ff",
 sectieKleur: "#0077ff",
 commentaarKleur: "#777",
 metaKeywordColor: "#f8f8f8",
 metaKleur: "#aa00ff",
 functieKleur: "#0077ff",
 nummerKleur: "#ffaa00",
};

Om een ​​aangepast thema te gebruiken, geeft u het thema-object door als thema-prop van de CodeBlock-component:

 tekst='console.log("Hallo wereld!");'
 taal='javascript'
 showLineNumbers={WAAR}
 thema={myCustomTheme}
/>

Hieronder is de uitvoer:

Door ingebouwde en aangepaste thema's te gebruiken, kunt u het uiterlijk van uw codeblokken aanpassen aan uw behoeften en het algehele ontwerp van uw app.

CopyBlock toevoegen aan uw project

Als u de kopieerfunctionaliteit aan uw codeblokken wilt toevoegen, kunt u de CopyBlock component geleverd door de bibliotheek reageren-code-blokken. Om dit onderdeel te gebruiken, moet u het reageren-kopiëren-naar-klembord ook bibliotheek. Ga als volgt te werk om de CopyBlock-component aan uw project toe te voegen:

Installeer de reageren-kopiëren-naar-klembord bibliotheek:

npm install reageren-kopiëren-naar-klembord

Importeer de benodigde componenten en bibliotheken:

importeren { CopyBlock } van'reageer-code-blokken';
importeren { FaCopy } van'reageer-iconen/fa';
importeren kopiëren van'Kopieer naar klembord';

Gebruik de CopyBlock-component in uw code:

const code= 'console.log("Hallo wereld!");';
const taal = 'javascript';
 tekst={code}
 taal={taal}
 showLineNumbers={WAAR}
 wrapLines={WAAR}
 thema='dracula'
 codeBlok
 icoon={}
 onCopy={() => kopiëren (code)}
/>

Hieronder is de uitvoer:

Door de CopyBlock-component aan uw project toe te voegen, kunt u gebruikers eenvoudig de code van uw codeblokken naar hun klembord laten kopiëren.

Alternatieve methoden om codeblokken toe te voegen

Hoewel het gebruik van de bibliotheek met reactiecodeblokken de eenvoudigste manier is om codeblokken aan uw React-app toe te voegen, zijn er ook enkele alternatieve methoden die u kunt gebruiken:

1. Handmatig syntaxisaccentuering toevoegen: Als u geen bibliotheek wilt gebruiken, kunt u handmatig syntaxisaccentuering aan uw code toevoegen Tailwind-CSS gebruiken of gewone CSS. Dit omvat het toevoegen van CSS-klassen aan uw code-elementen om de juiste stijlen toe te passen. Hoewel deze methode u meer controle geeft over de stijlen, kan het tijdrovend zijn om deze in te stellen en te onderhouden.
2. Andere bibliotheken gebruiken: Er zijn verschillende andere bibliotheken beschikbaar die syntaxisaccentuering voor code bieden, zoals reactie-syntaxis-highlighter, prisma-reageer-renderer, En hoogtepunt.js. Deze bibliotheken hebben verschillende functies en stijlen, dus u kunt er een kiezen die aan uw behoeften voldoet.

Hoewel de bibliotheek met reactiecodeblokken een uitstekende keuze is voor de meeste toepassingen, kunnen deze alternatieve methoden in bepaalde situaties nuttig zijn. Uiteindelijk hangt de methode die u kiest af van uw specifieke behoeften en voorkeuren.

Verbeter gebruikersbetrokkenheid met codeblokken

Door codeblokken te gebruiken om code uit te leggen, interactieve codeervoorbeelden te geven en visueel te creëren aantrekkelijke ontwerpen, kunt u de ervaring van uw gebruikers verbeteren en hen betrokken houden bij uw website of sollicitatie. Bovendien kunt u door functies zoals CopyBlock en aangepaste thema's te gebruiken uw React-app nog functioneler en aantrekkelijker maken.