Kódblokkokat szeretne megjeleníteni a React alkalmazásban? Kövesse ezt az útmutatót a szintaxis által kiemelt kódblokkok alkalmazásába való integrálásához.

A webfejlesztésben általános követelmény a kódblokkok megfelelő formázással és kiemeléssel történő megjelenítése. A kódblokkok sokoldalú eszköz, amely számos célra használható, beleértve a kód megjelenítését és a felhasználói elkötelezettség javítását.

A könyvtár telepítése

Első, Hozzon létre egy React alkalmazást és telepítse a reagál-kód-blokkok könyvtár. Ez a könyvtár kódblokkok megjelenítésére szolgál az alkalmazásban. Ezt a könyvtárat az npm, a Node.js csomagkezelője segítségével telepítheti. Nyissa meg a terminált, és keresse meg a projektkönyvtárat. Ezután futtassa a következő parancsot:

npm react-code-blocks telepítése

Ezzel telepíti a react-code-blocks könyvtárat a projektben.

A kódblokk hozzáadása a projekthez

Miután telepítette a react-code-blocks könyvtárat, készen áll a kezdésre. Először importálja a CodeBlock összetevőt az alkalmazás react-code-blocks könyvtárából. Ezt úgy teheti meg, hogy hozzáadja a következő kódot a fájlhoz:

import { CodeBlock } tól től"react-code-blocks";

Ezután használja a CodeBlock összetevőt az alkalmazásban a következő kód hozzáadásával:

 szöveg='console.log("Hello, world!");'
 nyelv ='javascript'
 showLineNumbers={igaz}
 theme={saját téma}
/>

A fenti kódban több kelléket ad át a CodeBlock komponensnek. Itt van az összes elérhető kellék listája:

  • szöveg (kötelező): A kódblokkban megjelenítendő kód.
  • nyelv (kötelező): A kód programozási nyelve. Ezt használják a kódblokk szintaxiskiemelése.
  • showLineNumbers: Logikai érték, amely jelzi, hogy megjelenjenek-e a sorszámok a kódblokkban vagy sem. Alapértelmezés szerint false.
  • téma: A kódblokkhoz használandó téma. Ez lehet beépített téma vagy egyéni témaobjektum. Alapértelmezés szerint a GitHub.
  • kezdősorszám: A sor száma, ahonnan a számolás elkezdődik. Alapértelmezés szerint 1.
  • kódblokk: A kódblokk opcióit tartalmazó objektum. Ez magában foglalhatja sorszámok (egy logikai érték, amely jelzi, hogy megjelenítse-e a sorszámokat vagy sem) és wrapLines (egy logikai érték, amely jelzi, hogy tördeljük-e a sorokat vagy sem).
  • kattintásra: A kódblokkra kattintva meghívható függvény.

Íme egy példa az összes kellék használatára:

import { CodeBlock } tól től"react-code-blocks";
funkcióMyComponent() {
const handleClick = () => {
konzol.log("Kódblokk kattintva");
 };
Visszatérés (
 szöveg='const greeting = "Szia, világ!"; console.log (üdvözlet);'
 nyelv ='javascript'
 showLineNumbers={igaz}
 téma="atom-egy-sötét"
 startLineNumber={10}
 codeBlock={{ sorszámok: hamis, wrapLines: igaz }}
 onClick={handleClick}
 />
 );
}

A fenti kódban Ön azt használja atom-egy-sötét téma, a sorszámok 10-es kezdése, a sorszámok letiltása, a sor tördelésének engedélyezése és a kattintáskezelő csatolása.

Ezekkel a kellékekkel testreszabhatja kódblokkjainak megjelenését és viselkedését az igényeinek megfelelően.

Témák hozzáadása a kódblokkokhoz

A react-code-blocks könyvtár számos beépített témát kínál, amelyek segítségével testreszabhatja a kódblokkok megjelenését. Beépített téma használatához egyszerűen meg kell adnia a téma nevét a téma támaszt. Például a atom-egy-sötét téma, akkor a következő kódot kell használnia:

 szöveg='console.log("Hello, world!");'
 nyelv ='javascript'
 showLineNumbers={igaz}
 téma="atom-egy-sötét"
/>

A beépített témákon kívül egyéni témákat is létrehozhat egy JavaScript objektum definiálásával, amely meghatározza a kódblokk különböző részeihez használandó színeket. Íme egy példa arra, hogyan nézhet ki egy egyéni témaobjektum:

const myCustomTheme = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 háttérszín: "#222",
 szöveg szín: "#ccc",
 részstring színe: "#00ff00",
 kulcsszószín: "#0077ff",
 attribútumColor: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 név Szín: "#f8f8f8",
 builtInColor: "#0077ff",
 literalColor: "#ffaa00",
 bulletColor: "#ffaa00",
 kódszín: "#ccc",
 kiegészítő szín: "#00ff00",
 regexpColor: "#f8f8f8",
 szimbólum színe: "#ffaa00",
 variableColor: "#ffaa00",
 templateVariableColor: "#ffaa00",
 linkszín: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 SelectorPseudoColor: "#aa00ff",
 típusSzín: "#0077ff",
 stringColor: "#00ff00",
 selectorIdColor: "#ffaa00",
 quoteColor: "#f8f8f8",
 templateTagColor: "#ccc",
 törlés színe: "#ff0000",
 titleColor: "#0077ff",
 szakasz Szín: "#0077ff",
 megjegyzés színe: "#777",
 metaKeywordColor: "#f8f8f8",
 metaColor: "#aa00ff",
 Funkció Szín: "#0077ff",
 számszín: "#ffaa00",
};

Egyéni téma használatához a téma objektumot a CodeBlock komponens téma kellékeként adja át:

 szöveg='console.log("Hello, world!");'
 nyelv ='javascript'
 showLineNumbers={igaz}
 theme={myCustomTheme}
/>

Alább látható a kimenet:

A beépített és egyéni témák használatával testreszabhatja kódblokkjainak megjelenését igényeinek és az alkalmazás általános kialakításának megfelelően.

CopyBlock hozzáadása a projekthez

Ha hozzá szeretné adni a másolási funkciót a kódblokkokhoz, használhatja a CopyBlock a react-code-blocks könyvtár által biztosított komponens. Ennek az összetevőnek a használatához telepítenie kell a reagál-másolás-vágólapra könyvtárat is. Így adhatja hozzá a CopyBlock összetevőt a projekthez:

Telepítse a reagál-másolás-vágólapra könyvtár:

npm install react-copy-to-clipboard

Importálja a szükséges összetevőket és könyvtárakat:

import { CopyBlock } tól től'react-code-blocks';
import { FaCopy } tól től"react-icons/fa";
import másolat tól től'másolja a vágólapra';

Használja a CopyBlock összetevőt a kódban:

const kód = 'console.log("Hello, world!");';
const nyelv = 'javascript';
 szöveg={kód}
 nyelv={nyelv}
 showLineNumbers={igaz}
 wrapLines={igaz}
 téma="drakula"
 kódblokk
 ikon={}
 onCopy={() => másolás (kód)}
/>

Alább látható a kimenet:

Ha hozzáadja a CopyBlock összetevőt a projekthez, egyszerűen lehetővé teheti a felhasználók számára, hogy a kódot a kódblokkjaiból a vágólapra másolják.

Alternatív módszerek a kódblokkok hozzáadására

Bár a react-code-blocks könyvtár használata a legegyszerűbb módja annak, hogy kódblokkokat adjon a React alkalmazáshoz, néhány alternatív módszer is használható:

  1. Szintaxiskiemelés manuális hozzáadása: Ha nem szeretne könyvtárat használni, manuálisan is hozzáadhat szintaktikai kiemelést a kódhoz Tailwind CSS használatával vagy normál CSS. Ez magában foglalja a CSS-osztályok hozzáadását a kódelemekhez a megfelelő stílusok alkalmazása érdekében. Noha ezzel a módszerrel jobban szabályozhatja a stílusokat, időigényes lehet a beállítása és karbantartása.
  2. Más könyvtárak használata: Számos más könyvtár is elérhető, amelyek szintaxiskiemelést biztosítanak a kódhoz, mint pl react-syntax-highlighter, prizma-react-renderer, és highlight.js. Ezek a könyvtárak különböző funkciókkal és stílusokkal rendelkeznek, így kiválaszthatja az igényeinek megfelelőt.

Míg a react-code-blocks könyvtár nagyszerű választás a legtöbb alkalmazáshoz, ezek az alternatív módszerek bizonyos helyzetekben hasznosak lehetnek. Végső soron a választott módszer az Ön egyedi igényeitől és preferenciáitól függ.

Javítsa a felhasználói elköteleződést a kódblokkokkal

Kódblokkok használatával a kód magyarázatához, interaktív kódolási példák biztosításához és vizuális létrehozáshoz tetszetős dizájnnal javíthatja felhasználói élményét, és leköti őket a webhelye vagy Alkalmazás. Ezenkívül olyan funkciók használatával, mint a CopyBlock és az egyéni témák, még funkcionálisabbá és vonzóbbá teheti React alkalmazását.