Jak dodawać bloki kodu w aplikacji React

Podczas tworzenia stron internetowych często wymaga się wyświetlania bloków kodu z odpowiednim formatowaniem i podświetlaniem. Bloki kodu to wszechstronne narzędzie, którego można używać do różnych celów, w tym do wyświetlania kodu i zwiększania zaangażowania użytkowników.

Instalowanie biblioteki

Pierwszy, stworzyć aplikację React i zainstaluj Reaguj na bloki kodu biblioteka. Ta biblioteka służy do wyświetlania bloków kodu w Twojej aplikacji. Możesz zainstalować tę bibliotekę za pomocą npm, menedżera pakietów dla Node.js. Otwórz terminal i przejdź do katalogu projektu. Następnie uruchom następujące polecenie:

npm zainstaluj bloki kodów reagowania

Spowoduje to zainstalowanie biblioteki React-Code-Blocks w Twoim projekcie.

Dodawanie bloku kodu do Twojego projektu

Po zainstalowaniu biblioteki React-Code-Blocks możesz zacząć. Najpierw zaimportuj plik

CodeBlock komponent z biblioteki React-Code-Blocks w Twojej aplikacji. Możesz to zrobić, dodając następujący kod do swojego pliku:

import { CodeBlock } z„reaguj na bloki kodu”;

Następnie użyj komponentu CodeBlock w swojej aplikacji, dodając następujący kod:

 tekst='console.log("Witaj, świecie!");'
 język=„javascript”
 showLineNumbers={PRAWDA}
 motyw={twój motyw}
/>

W powyższym kodzie przekazujesz kilka rekwizytów do komponentu CodeBlock. Oto lista wszystkich dostępnych rekwizytów:

• tekst (wymagane): Kod do wyświetlenia w bloku kodu.
• język (wymagane): Język programowania kodu. Służy do tego podświetlanie składni bloku kodu.
• pokaż numery linii: Wartość logiczna wskazująca, czy w bloku kodu mają być wyświetlane numery linii, czy nie. Domyślnie jest to fałsz.
• temat:Motyw do użycia w bloku kodu. Może to być wbudowany motyw lub niestandardowy obiekt motywu. Domyślnie jest to GitHub.
• początkowy numer linii: Numer wiersza, od którego ma rozpocząć się odliczanie. Domyślnie jest to 1.
• kodBlok: Obiekt zawierający opcje dla bloku kodu. Może to obejmować Numery linii (wartość logiczna wskazująca, czy wyświetlać numery linii, czy nie) i ZawijajLinie (wartość logiczna wskazująca, czy zawijać linie, czy nie).
• na kliknięcie: Funkcja do wywołania po kliknięciu bloku kodu.

Oto przykład użycia wszystkich tych rekwizytów:

import { CodeBlock } z„reaguj na bloki kodu”;
funkcjonowaćMój komponent() {
konst uchwytKliknij = () => {
konsola.dziennik(„Kliknięto blok kodu”);
 };
powrót (
 tekst='const pozdrowienia = "Witaj, świecie!"; console.log (powitanie);'
 język=„javascript”
 showLineNumbers={PRAWDA}
 temat=„atom-jeden-ciemny”
 początkowy numer linii = {10}
 codeBlock={{ Numery linii: FAŁSZ, ZawijajLinie: PRAWDA }}
 onClick={uchwytKliknij}
 />
 );
}

W powyższym kodzie używasz atom-jeden-ciemny motywu, zaczynając numery linii od 10, wyłączając numery linii, włączając zawijanie linii i dołączając moduł obsługi kliknięć.

Korzystając z tych rekwizytów, możesz dostosować wygląd i zachowanie bloków kodu do swoich potrzeb.

Dodawanie motywów do bloków kodu

Biblioteka React-Code-Blocks zapewnia wiele wbudowanych motywów, których można użyć do dostosowania wyglądu bloków kodu. Aby użyć wbudowanego motywu, wystarczy podać nazwę motywu w pliku temat rekwizyt. Na przykład, aby użyć atom-jeden-ciemny theme, użyjesz następującego kodu:

 tekst='console.log("Witaj, świecie!");'
 język=„javascript”
 showLineNumbers={PRAWDA}
 temat=„atom-jeden-ciemny”
/>

Oprócz wbudowanych motywów można także tworzyć niestandardowe motywy, definiując obiekt JavaScript, który określa kolory używane w różnych częściach bloku kodu. Oto przykład tego, jak może wyglądać niestandardowy obiekt motywu:

konst mój niestandardowy motyw = {
 liniaNumerKolor: "#ccc",
 lineNumberBgKolor: "#222",
 kolor tła: "#222",
 kolor tekstu: "#ccc",
 kolor podłańcucha: „#00ff00”,
 słowo kluczoweKolor: „#0077ff”,
 kolor atrybutu: „#ffaa00”,
 selektorTagKolor: „#0077ff”,
 docTagKolor: „#aa00ff”,
 nazwaKolor: „#f8f8f8”,
 wbudowany kolor: „#0077ff”,
 dosłownyKolor: „#ffaa00”,
 Kolor pocisku: „#ffaa00”,
 kodKolor: "#ccc",
 dodatekKolor: „#00ff00”,
 Wyrażenie regularneKolor: „#f8f8f8”,
 symbolKolor: „#ffaa00”,
 zmiennyKolor: „#ffaa00”,
 szablonZmiennaKolor: „#ffaa00”,
 linkKolor: „#aa00ff”,
 selektorAtrybutKolor: „#ffaa00”,
 selektorPseudokolor: „#aa00ff”,
 typKolor: „#0077ff”,
 ciągKolor: „#00ff00”,
 selektorIdKolor: „#ffaa00”,
 cytatKolor: „#f8f8f8”,
 szablonTagKolor: "#ccc",
 usuwanieKolor: "#ff0000",
 tytułKolor: „#0077ff”,
 przekrójKolor: „#0077ff”,
 komentarzKolor: "#777",
 metakolor słowa kluczowego: „#f8f8f8”,
 metakolor: „#aa00ff”,
 funkcjaKolor: „#0077ff”,
 liczbaKolor: „#ffaa00”,
};

Aby użyć niestandardowego motywu, należy przekazać obiekt motywu jako właściwość motywu komponentu CodeBlock:

 tekst='console.log("Witaj, świecie!");'
 język=„javascript”
 showLineNumbers={PRAWDA}
 motyw={myCustomTheme}
/>

Poniżej znajduje się wyjście:

Korzystając z wbudowanych i niestandardowych motywów, możesz dostosować wygląd bloków kodu do swoich potrzeb i ogólnego projektu aplikacji.

Dodawanie CopyBlock do Twojego projektu

Jeśli chcesz dodać funkcję kopiowania do swoich bloków kodu, możesz użyć metody KopiujBlok komponent dostarczony przez bibliotekę react-code-blocks. Aby użyć tego komponentu, musisz zainstalować kopiuj-reaguj-do-schowka biblioteka również. Oto jak dodać komponent CopyBlock do swojego projektu:

Zainstaluj kopiuj-reaguj-do-schowka biblioteka:

npm install reaguj na kopię do schowka

Zaimportuj niezbędne komponenty i biblioteki:

import { Blokada Kopiowania } z„reaguj na bloki kodu”;
import { FaCopy } z„reaguj-ikony/fa”;
import Kopiuj z'skopiuj do schowka';

Użyj komponentu CopyBlock w swoim kodzie:

konst kod = 'console.log("Witaj, świecie!");';
konst język = „javascript”;
 tekst={kod}
 język={język}
 showLineNumbers={PRAWDA}
 wrapLines={PRAWDA}
 temat=„drakula”
 kodBlok
 ikona={}
 onCopy={() => kopiuj (kod)}
/>

Poniżej znajduje się wyjście:

Dodając komponent CopyBlock do swojego projektu, możesz łatwo umożliwić użytkownikom kopiowanie kodu z bloków kodu do ich schowka.

Alternatywne metody dodawania bloków kodu

Chociaż korzystanie z biblioteki react-code-blocks jest najprostszym sposobem dodawania bloków kodu do aplikacji React, istnieje również kilka alternatywnych metod, których możesz użyć:

1. Ręczne dodawanie podświetlania składni: Jeśli nie chcesz korzystać z biblioteki, możesz ręcznie dodać podświetlanie składni do swojego kodu przy użyciu CSS Tailwind lub zwykły CSS. Obejmuje to dodawanie klas CSS do elementów kodu w celu zastosowania odpowiednich stylów. Chociaż ta metoda zapewnia większą kontrolę nad stylami, konfiguracja i konserwacja może być czasochłonna.
2. Korzystanie z innych bibliotek: Dostępnych jest kilka innych bibliotek, które zapewniają podświetlanie składni kodu, na przykład Zareaguj-zakreślacz-składni, Prism-react-renderer, I zaznacz.js. Te biblioteki mają różne funkcje i style, więc możesz wybrać taką, która odpowiada Twoim potrzebom.

Podczas gdy biblioteka React-Code-Blocks jest doskonałym wyborem dla większości aplikacji, te alternatywne metody mogą być przydatne w pewnych sytuacjach. Ostatecznie wybrana metoda będzie zależała od Twoich konkretnych potrzeb i preferencji.

Zwiększ zaangażowanie użytkowników dzięki blokom kodu

Używając bloków kodu do wyjaśniania kodu, udostępniania interaktywnych przykładów kodowania i tworzenia wizualnego atrakcyjne projekty, możesz poprawić wrażenia użytkowników i utrzymać ich zainteresowanie Twoją witryną lub aplikacja. Dodatkowo, korzystając z funkcji takich jak CopyBlock i niestandardowych motywów, możesz uczynić swoją aplikację React jeszcze bardziej funkcjonalną i atrakcyjną.