Een van de belangrijkste kenmerken van een programmeerblog zijn codeblokken. Je hoeft ze niet op te maken met een syntaxis-highlighter, maar als je dat wel doet, zien je blogs er een stuk leuker uit. Het kan ook de leesbaarheid van uw code verbeteren.

Dit artikel laat je zien hoe je react-syntax-highlighter gebruikt om codeblokken in React te markeren. U maakt een codeblokcomponent die de code die eraan is doorgegeven, kan markeren met behulp van de syntaxis van de opgegeven taal.

Markering van syntaxis Met react-syntax-highlighter

Met de react syntax highlighter kun je code markeren met React. In tegenstelling tot andere syntaxis markeerstiften, react-syntax-highlighter vertrouwt niet op ComponentDidUpdate of ComponentDidMount om de gemarkeerde code in de DOM in te voegen met behulp van gevaarlijkSetInnerHTML.

Die benadering is gevaarlijk omdat het een toepassing blootstelt aan: cross-site scripting-aanvallen.

In plaats daarvan gebruikt het een syntaxisstructuur om het virtuele DOM te bouwen en werkt het alleen bij met wijzigingen.

De component gebruikt PrismJS en Highlight.js op de achtergrond. U kunt ervoor kiezen om een ​​van beide te gebruiken om uw code te markeren. Het is heel gemakkelijk te gebruiken omdat het een out-of-the-box styling biedt.

De component react-syntax-highlighter accepteert de code, taal en stijl als rekwisieten. De component accepteert ook andere aanpassingsopties. Je vindt ze in de react syntax highlighter documentatie.

De component react-syntax-highlighter gebruiken

Om react syntax highlighter in React te gaan gebruiken, installeer het via npm.

npm installeren reageren-syntaxis-highlighter --opslaan

Maak een nieuwe component met de naam CodeBlock.js in uw React-toepassing en import reageren-syntaxis-highlighter:

importeren SyntaxisMarkeerstift van 'reageren-syntaxis-highlighter';
importeren { docco } van 'react-syntax-highlighter/dist/esm/styles/hljs';
const CodeBlock = ({codestring}) => {
opbrengst (
<SyntaxisHighlighter taal="javascript" stijl={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

De component SyntaxHighlighter accepteert de te gebruiken taal en stijl. Het neemt ook de codestring als inhoud.

U kunt de bovenstaande component als volgt renderen:

const App = () => {
const codeString = `
const Vierkant = (n) => opbrengst n * n
 `
opbrengst(
<CodeBlock codestring={codeString}/>
 )
}

Het is belangrijk op te merken dat het gebruik van react-syntax-highlighter uw bouwgrootte kan vergroten, dus als dat nodig is, kunt u de lichte build importeren. De lichte build heeft echter geen standaardstijlen.

U moet ook de gewenste talen importeren en registreren met behulp van de registerTaal functie geëxporteerd vanuit de lichte build.

importeren { Licht net zo SyntaxisHighlighter } van 'reageren-syntaxis-highlighter';
importeren js van 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxisHighlighter.registerLanguage('javascript', js);

Deze component gebruikt Highlight.js om de code te markeren.

Om in plaats daarvan PrismJS te gebruiken, importeert u het als volgt uit het react-syntax-highlighter-pakket:

importeren { Prisma net zo SyntaxisHighlighter } van "reageer-syntaxis-highlighter";
importeren { vscDarkPlus } van "react-syntax-highlighter/dist/esm/styles/prism";

Voor de opbouw van het prismalicht importeert u PrismLight en registreert u de taal die u gebruikt.

importeren { PrismaLicht net zo SyntaxisHighlighter } van 'reageren-syntaxis-highlighter';
importeren jsx van 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
importeren prisma van 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxisHighlighter.registerLanguage('jsx', jsx);

Het gebruik van prisma is nuttig, vooral bij het markeren van jsx omdat react-syntax-highlighter dit niet volledig ondersteunt.

Regelnummers toevoegen aan het codeblok

Nu je weet hoe je een codeblok moet markeren, kun je beginnen met het toevoegen van extra functies zoals regelnummers.

Met react-syntax-highlighter hoeft u alleen maar te slagen showLineNumbers toe aan de component SyntaxHighlighter en stel deze in op true.

<SyntaxisHighlighter taal="javascript" style={docco} showLineNumbers="WAAR">
 {codeString}
</SyntaxHighlighter>

Het onderdeel toont nu regelnummers naast uw code.

Aangepaste stijlen gebruiken in uw component

Ook al biedt react-syntax-highlighter styling, het kan zijn dat je je codeblokken soms moet aanpassen.

Hiervoor kunt u met het pakket inline passeren CSS-stijlen naar de customStyle prop zoals hieronder getoond:

<SyntaxisHighlighter taal="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5px", Achtergrond kleur: "#001E3C"}} >
 {codestring}
</SyntaxHighlighter>

Het gemarkeerde codeblok heeft in dit voorbeeld een aangepaste randradius en achtergrondkleur.

Het belang van syntaxisaccentuering

U kunt het react-syntax-highlighter-pakket gebruiken om code in React te markeren. U kunt de light-versie gebruiken om de bouwgrootte te verkleinen en codeblokken aan te passen met uw eigen stijlen.

Door codefragmenten te markeren, ziet uw code er goed uit, verbetert de leesbaarheid en is deze toegankelijker voor lezers.