Jedną z kluczowych cech bloga programistycznego są bloki kodu. Nie musisz ich formatować za pomocą zakreślacza składni, ale dzięki temu Twoje blogi wyglądają o wiele ładniej, jeśli to zrobisz. Może również poprawić czytelność kodu.

W tym artykule dowiesz się, jak używać react-syntax-highlighter do podświetlania bloków kodu w React. Stworzysz komponent bloku kodu, który będzie mógł podświetlać przekazany do niego kod przy użyciu składni podanego języka.

Podświetlanie składni Z reakcją-syntax-highlighter

Podświetlacz składni w React umożliwia podświetlanie kodu za pomocą Reacta. W przeciwieństwie do innych wyróżnienia składni, React-syntax-highlighter nie polega na ComponentDidUpdate lub ComponentDidMount do wstawiania podświetlonego kodu do DOM za pomocą DangerlySetInnerHTML.

Takie podejście jest niebezpieczne, ponieważ naraża aplikację na: ataki cross-site scripting.

Zamiast tego używa drzewa składni do budowania wirtualnego DOM i aktualizuje go tylko zmianami.

Komponent wykorzystuje w tle PrismJS i Highlight.js. Możesz wybrać, czy chcesz podświetlić swój kod. Jest bardzo łatwy w użyciu, ponieważ zapewnia nieszablonową stylizację.

instagram viewer

Komponent react-syntax-highlighter akceptuje kod, język i styl jako rekwizyty. Komponent akceptuje również inne opcje dostosowywania. Znajdziesz je w React dokumentacja wyróżniania składni.

Korzystanie z komponentu react-syntax-highlighter

Aby zacząć używać podświetlacza składni React w React, zainstaluj go przez npm.

npm zainstalować React-syntax-highlighter --ratować

Utwórz nowy komponent o nazwie CodeBlock.js w aplikacji React i importuj React-syntax-highlighter:

import Podświetlanie składni z „zaznaczanie składni reakcji”;
import {dokument} z 'react-syntax-highlighter/dist/esm/styles/hljs';
stały CodeBlock = ({ciąg kodowy}) => {
zwrócić (
<Język wyróżnienia składni="javascript" styl={docco}>
 {Ciąg kodu}
</SyntaxHighlighter>
 );
};

Składnik SyntaxHighlighter akceptuje używany język i styl. Jako zawartość przyjmuje również ciąg kodu.

Możesz renderować powyższy komponent w następujący sposób:

stały Aplikacja = () => {
stały ciąg kodu = `
stały Kwadrat = (n) => zwrócić n * n
 `
zwrócić(
<Ciąg kodu CodeBlock = {Ciąg kodu}/>
 )
}

Ważne jest, aby pamiętać, że użycie React-syntax-highlighter może zwiększyć rozmiar kompilacji, więc jeśli zajdzie taka potrzeba, możesz zaimportować lekką kompilację. Wersja lekka nie ma jednak domyślnych stylów.

Będziesz także musiał zaimportować i zarejestrować języki, które chcesz za pomocą ZarejestrujJęzyk funkcja wyeksportowana z lekkiej kompilacji.

import { Światło jak Podświetlanie składni } z „zaznaczanie składni reakcji”;
import js z 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SkładniaHighlighter.registerLanguage('javascript', js);

Ten komponent używa Highlight.js do podświetlenia kodu.

Aby zamiast tego użyć PrismJS, zaimportuj go z pakietu react-syntax-highlighter w następujący sposób:

import { Pryzmat jak Podświetlanie składni } z „zaznaczanie składni reakcji”;
import { vscDarkPlus } z „react-syntax-highlighter/dist/esm/styles/prism”;

W przypadku oświetlenia pryzmatu zaimportuj PrismLight i zarejestruj używany język.

import { PryzmatŚwiatło jak Podświetlanie składni } z „zaznaczanie składni reakcji”;
import jsx z 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import pryzmat z 'react-syntax-highlighter/dist/esm/style/prism/prism';
SkładniaHighlighter.registerLanguage('jsx', jsx);

Korzystanie z pryzmatu jest korzystne, szczególnie podczas podświetlania jsx, ponieważ reakcja-syntax-highlighter nie obsługuje go w pełni.

Dodawanie numerów linii do bloku kodu

Teraz, gdy wiesz, jak podświetlić blok kodu, możesz zacząć dodawać dodatkowe funkcje, takie jak numery linii.

Z React-syntax-highlighter wystarczy zdać showLineNumbers do składnika SyntaxHighlighter i ustaw go na true.

<Język wyróżnienia składni="javascript" style={docco} showLineNumbers="PRAWDA">
 {Ciąg kodu}
</SyntaxHighlighter>

Komponent będzie teraz wyświetlał numery wierszy obok kodu.

Używanie stylów niestandardowych w Twoim komponencie

Mimo że reakcja-syntax-highlighter zapewnia stylizację, czasami może być konieczne dostosowanie bloków kodu.

W tym celu pakiet pozwala przejść inline Style CSS do właściwości customStyle, jak pokazano poniżej:

<Język wyróżnienia składni="javascript" style={vscDarkPlus} customStyle={{borderPromień: "5px", kolor tła: "#001E3C"}} >
 {ciąg kodowy}
</SyntaxHighlighter>

W tym przykładzie podświetlony blok kodu będzie miał niestandardowy promień obramowania i kolor tła.

Znaczenie podświetlania składni

Aby podświetlić kod w React, możesz użyć pakietu react-syntax-highlighter. Możesz użyć wersji uproszczonej, aby zmniejszyć rozmiar kompilacji i dostosować bloki kodu przy użyciu własnych stylów.

Wyróżnianie fragmentów kodu sprawia, że ​​kod wygląda dobrze, poprawia jego czytelność i jest bardziej przystępny dla czytelników.