Vill du visa kodblock i din React-applikation? Följ den här guiden för att integrera syntaxmarkerade kodblock i din app.

Inom webbutveckling är visning av kodblock med korrekt formatering och markering ett vanligt krav. Kodblock är ett mångsidigt verktyg som kan användas för en mängd olika ändamål, inklusive att visa kod och förbättra användarens engagemang.

Installera biblioteket

Först, skapa en React-app och installera reagera-kod-block bibliotek. Det här biblioteket används för att visa kodblock i din app. Du kan installera det här biblioteket med npm, pakethanteraren för Node.js. Öppna din terminal och navigera till din projektkatalog. Kör sedan följande kommando:

npm installera react-code-blocks

Detta kommer att installera react-code-blocks-biblioteket i ditt projekt.

Lägga till kodblocket till ditt projekt

När du har installerat react-code-blocks-biblioteket är du redo att börja. Importera först CodeBlock komponent från react-code-blocks-biblioteket i din app. Du kan göra detta genom att lägga till följande kod i din fil:

instagram viewer 
importera { CodeBlock } från"reagera-kod-block";

Använd sedan CodeBlock-komponenten i din app genom att lägga till följande kod:

 text='console.log("Hej världen!");'
 språk='javascript'
 showLineNumbers={Sann}
 theme={yourTheme}
/>

I ovanstående kod skickar du flera rekvisita till CodeBlock-komponenten. Här är en lista över alla tillgängliga rekvisita:

  • text (obligatoriskt): Koden som ska visas i kodblocket.
  • språk (obligatoriskt): Kodens programmeringsspråk. Detta används för syntaxmarkering av kodblocket.
  • showLineNumbers:Ett booleskt värde som indikerar om radnummer ska visas i kodblocket eller inte. Den är som standard falsk.
  • tema: Temat som ska användas för kodblocket. Detta kan vara ett inbyggt tema eller ett anpassat temaobjekt. Det är som standard GitHub.
  • startLineNumber: Radnumret att börja räkna från. Den har som standard 1.
  • kodblock: Ett objekt som innehåller alternativ för kodblocket. Detta kan inkludera radnummer (en boolean som indikerar om radnummer ska visas eller inte) och wrapLines (en boolesk indikator som indikerar om linjer ska lindas eller inte).
  • påKlicka: En funktion att anropa när kodblocket klickas.

Här är ett exempel på hur du använder alla dessa rekvisita:

importera { CodeBlock } från"reagera-kod-block";
fungeraMyComponent() {
konst handleClick = () => {
trösta.logga("Kodblock klickade");
 };
lämna tillbaka (
 text='const greeting = "Hej världen!"; console.log (hälsning);'
 språk='javascript'
 showLineNumbers={Sann}
 tema="atom-ett-mörk"
 startLineNumber={10}
 codeBlock={{ radnummer: falsk, wrapLines: Sann }}
 onClick={handleClick}
 />
 );
}

I ovanstående kod använder du atom-ett-mörk tema, startar radnumren vid 10, inaktiverar radnummer, aktiverar radbrytning och bifogar en klickhanterare.

Genom att använda dessa rekvisita kan du anpassa utseendet och beteendet hos dina kodblock för att passa dina behov.

Lägga till teman i dina kodblock

React-code-blocks-biblioteket tillhandahåller en mängd olika inbyggda teman som kan användas för att anpassa utseendet på dina kodblock. För att använda ett inbyggt tema behöver du bara ange namnet på temat i tema stötta. Till exempel att använda atom-ett-mörk tema, skulle du använda följande kod:

 text='console.log("Hej världen!");'
 språk='javascript'
 showLineNumbers={Sann}
 tema="atom-ett-mörk"
/>

Utöver de inbyggda teman kan du också skapa anpassade teman genom att definiera ett JavaScript-objekt som anger färgerna som ska användas för olika delar av kodblocket. Här är ett exempel på hur ett anpassat temaobjekt kan se ut:

konst myCustomTheme = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 bakgrundsfärg: "#222",
 text färg: "#ccc",
 substringColor: "#00ff00",
 nyckelordsfärg: "#0077ff",
 attributColor: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 namn Färg: "#f8f8f8",
 inbyggd färg: "#0077ff",
 bokstavlig Färg: "#ffaa00",
 bulletColor: "#ffaa00",
 kodfärg: "#ccc",
 tilläggsfärg: "#00ff00",
 regexp Färg: "#f8f8f8",
 symbolFärg: "#ffaa00",
 variabelFärg: "#ffaa00",
 mallVariableColor: "#ffaa00",
 länkfärg: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 selectorPseudoColor: "#aa00ff",
 typFärg: "#0077ff",
 stringColor: "#00ff00",
 selectorIdColor: "#ffaa00",
 citat Färg: "#f8f8f8",
 templateTagColor: "#ccc",
 raderingsfärg: "#ff0000",
 titelfärg: "#0077ff",
 avsnitt Färg: "#0077ff",
 kommentar Färg: "#777",
 metaKeywordColor: "#f8f8f8",
 metaColor: "#aa00ff",
 funktionsfärg: "#0077ff",
 nummerFärg: "#ffaa00",
};

Om du vill använda ett anpassat tema skickar du temaobjektet som temastöd för CodeBlock-komponenten:

 text='console.log("Hej världen!");'
 språk='javascript'
 showLineNumbers={Sann}
 theme={myCustomTheme}
/>

Nedan är utgången:

Genom att använda inbyggda och anpassade teman kan du anpassa utseendet på dina kodblock för att passa dina behov och den övergripande designen av din app.

Lägga till CopyBlock till ditt projekt

Om du vill lägga till kopieringsfunktionen till dina kodblock kan du använda CopyBlock komponent som tillhandahålls av react-code-blocks-biblioteket. För att använda den här komponenten måste du installera reagera-kopiera-till-urklipp bibliotek också. Så här lägger du till CopyBlock-komponenten i ditt projekt:

Installera reagera-kopiera-till-urklipp bibliotek:

npm installera react-copy-to-urklipp

Importera nödvändiga komponenter och bibliotek:

importera { CopyBlock } från"reagera-kod-block";
importera { FaCopy } från'reaktionsikoner/fa';
importera kopiera från"kopiera till urklipp";

Använd CopyBlock-komponenten i din kod:

konst kod = 'console.log("Hej världen!");';
konst språk = 'javascript';
 text={kod}
 språk={språk}
 showLineNumbers={Sann}
 wrapLines={Sann}
 tema='dracula'
 kodblock
 icon={}
 onCopy={() => kopia (kod)}
/>

Nedan är utgången:

Genom att lägga till CopyBlock-komponenten i ditt projekt kan du enkelt tillåta användare att kopiera koden från dina kodblock till sitt urklipp.

Alternativa metoder för att lägga till kodblock

Även om användningen av react-code-blocks-biblioteket är det enklaste sättet att lägga till kodblock till din React-app, finns det också några alternativa metoder du kan använda:

  1. Lägger till syntaxmarkering manuellt: Om du inte vill använda ett bibliotek kan du lägga till syntaxmarkering manuellt i din kod använder Tailwind CSS eller vanlig CSS. Detta innebär att lägga till CSS-klasser till dina kodelement för att tillämpa lämpliga stilar. Även om den här metoden ger dig mer kontroll över stilarna, kan det vara tidskrävande att ställa in och underhålla.
  2. Använder andra bibliotek: Det finns flera andra bibliotek tillgängliga som tillhandahåller syntaxmarkering för kod, som t.ex reagera-syntax-markör, prisma-reagera-renderare, och highlight.js. Dessa bibliotek har olika funktioner och stilar, så du kan välja ett som passar dina behov.

Medan react-code-blocks-biblioteket är ett utmärkt val för de flesta applikationer, kan dessa alternativa metoder vara användbara i vissa situationer. I slutändan kommer metoden du väljer att bero på dina specifika behov och preferenser.

Förbättra användarengagemang med kodblock

Genom att använda kodblock för att förklara kod, tillhandahålla interaktiva kodningsexempel och skapa visuellt tilltalande design kan du förbättra dina användares upplevelse och hålla dem engagerade i din webbplats eller Ansökan. Genom att använda funktioner som CopyBlock och anpassade teman kan du dessutom göra din React-app ännu mer funktionell och attraktiv.