A programozói blogok egyik legfontosabb jellemzője a kódblokkok. Nem kell formázni őket szintaktikai kiemelővel, de sokkal szebbé teszi a blogjait, ha megteszi. A kód olvashatóságát is javíthatja.

Ez a cikk bemutatja, hogyan használhatja a react-syntax-highlighter kódblokkokat a React programban. Létrehoz egy kódblokk komponenst, amely képes kiemelni a neki átadott kódot a megadott nyelv szintaxisával.

Szintaxis kiemelés React-syntax-highlighterrel

A react szintaxis kiemelő lehetővé teszi a kód kiemelését a React segítségével. Másokkal ellentétben szintaxis kiemelők, a react-syntax-highlighter nem támaszkodik a ComponentDidUpdate vagy a ComponentDidMount programra a kiemelt kód beszúrásához a DOM-ba a veszélyeslySetInnerHTML használatával.

Ez a megközelítés veszélyes, mert kiteszi az alkalmazást webhelyek közötti szkriptelési támadások.

Ehelyett szintaktikai fát használ a virtuális DOM felépítéséhez, és csak módosításokkal frissíti.

Az összetevő PrismJS-t és Highlight.js-t használ a háttérben. Választhat, hogy bármelyiket használja a kód kiemelésére. Használata nagyon egyszerű, mivel azonnali stílust biztosít.

instagram viewer

A react-syntax-highlighter összetevő elfogadja a kódot, a nyelvet és a stílust kellékként. A komponens más testreszabási lehetőségeket is elfogad. Megtalálhatja őket a React szintaxiskiemelő dokumentáció.

A react-syntax-highlighter komponens használata

A React szintaxiskiemelő használatának megkezdéséhez a React alkalmazásban telepítse az npm-en keresztül.

npm telepítés react-syntax-highlighter --megment

Hozzon létre egy új komponenst, melynek neve CodeBlock.js a React alkalmazásban és az importálásban react-syntax-highlighter:

import SyntaxHighlighter tól től 'react-syntax-highlighter';
import { docco } tól től 'react-syntax-highlighter/dist/esm/styles/hljs';
const CodeBlock = ({codestring}) => {
Visszatérés (
<SyntaxHighlighter nyelv="javascript" style={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

A SyntaxHighlighter komponens elfogadja a használandó nyelvet és stílust. Tartalmaként a kódkarakterláncot is veszi.

A fenti komponenst az alábbiak szerint renderelheti:

const App = () => {
const codeString = `
const Négyzet = (n) => Visszatérés n * n
 `
Visszatérés(
<CodeBlock codestring={codeString}/>
 )
}

Fontos megjegyezni, hogy a react-syntax-highlighter használata növelheti a build méretét, így ha szükséges, importálhatja a könnyű összeállítást. A könnyű build azonban nem rendelkezik alapértelmezett stílusokkal.

Ezenkívül importálnia és regisztrálnia kell a kívánt nyelveket a registerLanguage függvény exportálva a könnyű buildből.

import { Könnyű mint Szintaxiskiemelő } tól től 'react-syntax-highlighter';
import js tól től 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Ez az összetevő a Highlight.js fájlt használja a kód kiemelésére.

A PrismJS használatához importálja azt a react-syntax-highlighter csomagból, így:

import { Prizma mint Szintaxiskiemelő } tól től "react-syntax-highlighter";
import { vscDarkPlus } tól től "react-syntax-highlighter/dist/esm/styles/prism";

A Prism Light összeállításhoz importálja a PrismLight-ot, és regisztrálja a használt nyelvet.

import { PrismLight mint Szintaxiskiemelő } tól től 'react-syntax-highlighter';
import jsx tól től 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import prizma tól től 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

A prizma használata előnyös, különösen a jsx kiemelésekor, mert a react-syntax-highlighter nem támogatja teljes mértékben.

Sorszámok hozzáadása a kódblokkhoz

Most, hogy tudja, hogyan kell kiemelni egy kódblokkot, elkezdhet további funkciókat, például sorszámokat hozzáadni.

A react-syntax-highlighterrel csak passzolni kell showLineNumbers a SyntaxHighlighter komponenshez, és állítsa igazra.

<SyntaxHighlighter nyelv="javascript" style={docco} showLineNumbers="igaz">
 {codeString}
</SyntaxHighlighter>

Az összetevő most sorszámokat jelenít meg a kód mellett.

Egyéni stílusok használata a komponensben

Annak ellenére, hogy a react-syntax-highlighter stílust biztosít, előfordulhat, hogy néha testre kell szabnia a kódblokkokat.

Ehhez a csomag lehetővé teszi az inline átadást CSS stílusok a customStyle kellékhez az alábbiak szerint:

<SyntaxHighlighter nyelv="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5 képpont", háttérszín: "#001E3C"}} >
 {codestring}
</SyntaxHighlighter>

Ebben a példában a kiemelt kódblokk egyéni szegélysugárral és háttérszínnel rendelkezik.

A szintaxis kiemelésének jelentősége

A react-syntax-highlighter csomag segítségével kiemelheti a kódot a React programban. A könnyű verzió segítségével csökkentheti az összeállítás méretét, és testreszabhatja a kódblokkokat saját stílusai alapján.

A kódrészletek kiemelése jó megjelenést kölcsönöz a kódnak, javítja az olvashatóságot, és könnyebben megközelíthetővé teszi az olvasók számára.