Jak přidat bloky kódu do aplikace React

Při vývoji webu je běžným požadavkem zobrazování bloků kódu se správným formátováním a zvýrazněním. Bloky kódu jsou všestranný nástroj, který lze použít pro různé účely, včetně zobrazení kódu a zlepšení zapojení uživatelů.

Instalace knihovny

První, vytvořit aplikaci React a nainstalujte reagovat-kód-bloky knihovna. Tato knihovna se používá k zobrazení bloků kódu ve vaší aplikaci. Tuto knihovnu můžete nainstalovat pomocí npm, správce balíčků pro Node.js. Otevřete svůj terminál a přejděte do adresáře projektu. Poté spusťte následující příkaz:

npm install reagovat-code-blocks

Tím se do vašeho projektu nainstaluje knihovna respond-code-blocks.

Přidání bloku kódu do vašeho projektu

Jakmile nainstalujete knihovnu Reag-code-Blocks, jste připraveni začít. Nejprve importujte CodeBlock komponentu z knihovny respond-code-blocks ve vaší aplikaci. Můžete to provést přidáním následujícího kódu do souboru:

import { CodeBlock } z"react-code-blocks";

Poté použijte komponentu CodeBlock ve své aplikaci přidáním následujícího kódu:

 text='console.log("Ahoj světe!");'
 jazyk='javascript'
 showLineNumbers={skutečný}
 theme={yourTheme}
/>

Ve výše uvedeném kódu předáváte komponentě CodeBlock několik rekvizit. Zde je seznam všech dostupných rekvizit:

• text (povinný): Kód, který se má zobrazit v bloku kódu.
• jazyk (vyžadováno): Programovací jazyk kódu. Toto se používá pro zvýraznění syntaxe bloku kódu.
• showLineNumbers:Booleovská hodnota udávající, zda se mají v bloku kódu zobrazit čísla řádků či nikoli. Výchozí hodnota je false.
• téma: Téma, které se má použít pro blok kódu. Může to být vestavěný motiv nebo vlastní objekt motivu. Výchozí je GitHub.
• StartingLineNumber: Číslo řádku, od kterého se má začít počítat. Výchozí je 1.
• codeBlock: Objekt obsahující volby pro blok kódu. To může zahrnovat lineNumbers (logická hodnota označující, zda se mají zobrazit čísla řádků nebo ne) a wrapLines (logická hodnota označující, zda zalamovat řádky nebo ne).
• při kliknutí: Funkce, která se má zavolat po kliknutí na blok kódu.

Zde je příklad použití všech těchto rekvizit:

import { CodeBlock } z"react-code-blocks";
funkceMyComponent() {
konst handleClick = () => {
řídicí panel.log("Kliknutí na blok kódu");
 };
vrátit se (
 text='const pozdrav = "Ahoj světe!"; console.log (pozdrav);'
 jazyk='javascript'
 showLineNumbers={skutečný}
 téma ='atom-jedna-tmavá'
 PočátečníLineNumber={10}
 codeBlock={{ lineNumbers: Nepravdivé, wrapLines: skutečný }}
 onClick={handleClick}
 />
 );
}

Ve výše uvedeném kódu používáte atom-jedna-tmavá téma, začínající čísla řádků na 10, deaktivace čísel řádků, povolení zalamování řádků a připojení ovladače kliknutí.

Pomocí těchto rekvizit můžete přizpůsobit vzhled a chování bloků kódu tak, aby vyhovovaly vašim potřebám.

Přidávání motivů do bloků kódu

Knihovna reagovat-code-blocks poskytuje řadu vestavěných motivů, které lze použít k přizpůsobení vzhledu vašich bloků kódu. Chcete-li použít vestavěný motiv, stačí zadat název motivu v téma podpěra. Chcete-li například použít atom-jedna-tmavá téma, použili byste následující kód:

 text='console.log("Ahoj světe!");'
 jazyk='javascript'
 showLineNumbers={skutečný}
 téma ='atom-jedna-tmavá'
/>

Kromě vestavěných motivů můžete také vytvářet vlastní motivy definováním objektu JavaScript, který určuje barvy, které se mají použít pro různé části bloku kódu. Zde je příklad toho, jak může objekt vlastního motivu vypadat:

konst myCustomTheme = {
 lineNumberColor: "#ccc",
 lineNumberBgColor: "#222",
 barva pozadí: "#222",
 barva textu: "#ccc",
 substringColor: "#00ff00",
 barva klíčového slova: "#0077ff",
 atributColor: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 název Barva: "#f8f8f8",
 builtInColor: "#0077ff",
 literalColor: "#ffaa00",
 barva odrážky: "#ffaa00",
 barva kódu: "#ccc",
 dodatková barva: "#00ff00",
 regexpColor: "#f8f8f8",
 barva symbolu: "#ffaa00",
 variabilní barva: "#ffaa00",
 šablonaVariableColor: "#ffaa00",
 linkColor: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 volič PseudoColor: "#aa00ff",
 typBarva: "#0077ff",
 stringColor: "#00ff00",
 selectorIdColor: "#ffaa00",
 Barva nabídky: "#f8f8f8",
 šablonaTagColor: "#ccc",
 deletionColor: "#ff0000",
 název Barva: "#0077ff",
 barva sekce: "#0077ff",
 barva komentáře: "#777",
 metaKeywordColor: "#f8f8f8",
 metabarva: "#aa00ff",
 barva funkce: "#0077ff",
 čísloBarva: "#ffaa00",
};

Chcete-li použít vlastní motiv, předali byste objekt tématu jako rekvizitu tématu komponenty CodeBlock:

 text='console.log("Ahoj světe!");'
 jazyk='javascript'
 showLineNumbers={skutečný}
 theme={myCustomTheme}
/>

Níže je výstup:

Pomocí vestavěných a vlastních motivů můžete upravit vzhled bloků kódu tak, aby vyhovovaly vašim potřebám a celkovému designu vaší aplikace.

Přidání CopyBlock do vašeho projektu

Pokud chcete do svých bloků kódu přidat funkci kopírování, můžete použít CopyBlock komponenta poskytovaná knihovnou respond-code-blocks. Chcete-li používat tuto komponentu, musíte nainstalovat reagovat-kopírovat-do-schránky knihovna také. Zde je návod, jak přidat komponentu CopyBlock do vašeho projektu:

Nainstalujte reagovat-kopírovat-do-schránky knihovna:

npm install reagovat-copy-to-clipboard

Importujte potřebné komponenty a knihovny:

import { CopyBlock } z'react-code-blocks';
import { FaCopy } z'react-icons/fa';
import kopírovat z'zkopírovat do schránky';

Použijte ve svém kódu komponentu CopyBlock:

konst kód = 'console.log("Ahoj světe!");';
konst jazyk = 'javascript';
 text={code}
 language={language}
 showLineNumbers={skutečný}
 wrapLines={skutečný}
 téma ='Drákula'
 codeBlock
 ikona={}
 onCopy={() => kopírovat (kód)}
/>

Níže je výstup:

Přidáním komponenty CopyBlock do vašeho projektu můžete snadno umožnit uživatelům kopírovat kód z vašich bloků kódu do jejich schránky.

Alternativní metody pro přidání bloků kódu

I když je použití knihovny React-code-blocks nejpřímějším způsobem, jak do aplikace React přidat bloky kódu, existuje také několik alternativních metod, které můžete použít:

1. Ruční přidání zvýraznění syntaxe: Pokud nechcete používat knihovnu, můžete do kódu ručně přidat zvýraznění syntaxe pomocí Tailwind CSS nebo normální CSS. To zahrnuje přidání tříd CSS do prvků kódu, abyste použili příslušné styly. I když vám tato metoda poskytuje větší kontrolu nad styly, její nastavení a údržba může být časově náročná.
2. Použití jiných knihoven: Existuje několik dalších dostupných knihoven, které poskytují zvýraznění syntaxe kódu, jako např reagovat-zvýrazňovač syntaxe, prism-react-renderer, a highlight.js. Tyto knihovny mají různé funkce a styly, takže si můžete vybrat takovou, která vyhovuje vašim potřebám.

I když je knihovna reagovat-kód-bloky skvělou volbou pro většinu aplikací, tyto alternativní metody mohou být v určitých situacích užitečné. V konečném důsledku bude metoda, kterou zvolíte, záviset na vašich konkrétních potřebách a preferencích.

Zlepšete zapojení uživatelů pomocí bloků kódu

Pomocí bloků kódu pro vysvětlení kódu, poskytování interaktivních příkladů kódování a vizuální tvorbu atraktivní design, můžete zlepšit uživatelský dojem a udržet je v kontaktu s vaším webem nebo aplikace. Navíc pomocí funkcí, jako je CopyBlock a vlastní motivy, můžete svou aplikaci React učinit ještě funkčnější a atraktivnější.