En av nyckelfunktionerna i en programmeringsblogg är kodblock. Du behöver inte formatera dem med en syntaxmarkör, men det gör att dina bloggar ser mycket snyggare ut om du gör det. Det kan också förbättra din kods läsbarhet.

Den här artikeln kommer att visa dig hur du använder react-syntax-highlighter för att markera kodblock i React. Du kommer att skapa en kodblockskomponent som kan markera kod som skickas till den med hjälp av syntaxen för det angivna språket.

Syntaxmarkering Med react-syntax-highlighter

React syntax highlighter låter dig markera kod med hjälp av React. olikt andra syntax highlighters, react-syntax-highlighter förlitar sig inte på ComponentDidUpdate eller ComponentDidMount för att infoga den markerade koden i DOM med dangerouslySetInnerHTML.

Det tillvägagångssättet är farligt eftersom det utsätter en applikation för skriptattacker över webbplatser.

Istället använder den ett syntaxträd för att bygga den virtuella DOM och uppdaterar den endast med ändringar.

Komponenten använder PrismJS och Highlight.js i bakgrunden. Du kan välja att använda antingen för att markera din kod. Den är väldigt enkel att använda eftersom den ger en out-of-the-box styling.

instagram viewer

Komponenten react-syntax-highlighter accepterar koden, språket och stilen som rekvisita. Komponenten accepterar även andra anpassningsalternativ. Du hittar dem i dokumentation för reager syntax highlighter.

Använder komponenten react-syntax-highlighter

För att börja använda react syntax highlighter i React, installera den via npm.

npm Installera reagera-syntax-markör --spara

Skapa en ny komponent som heter CodeBlock.js i din React-applikation och importera reagera-syntax-markör:

importera SyntaxHighlighter från 'reagera-syntax-highlighter';
importera { docco } från 'react-syntax-highlighter/dist/esm/styles/hljs';
konst CodeBlock = ({codestring}) => {
lämna tillbaka (
<SyntaxHighlighter language="javascript" stil={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

SyntaxHighlighter-komponenten accepterar språket och stilen som ska användas. Den tar också kodsträngen som sitt innehåll.

Du kan rendera ovanstående komponent enligt följande:

konst App = () => {
konst codeString = `
konst Kvadrat = (n) => lämna tillbaka n * n
 `
lämna tillbaka(
<CodeBlock codestring={codeString}/>
 )
}

Det är viktigt att notera att användning av react-syntax-highlighter kan öka din byggstorlek, så om du behöver kan du importera den lätta builden. Den lätta konstruktionen har dock inte standardstilar.

Du måste också importera och registrera de språk du vill använda registerspråk funktion som exporteras från den lätta builden.

importera { Ljus som SyntaxHighlighter } från 'reagera-syntax-highlighter';
importera js från 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Den här komponenten använder Highlight.js för att markera koden.

För att använda PrismJS istället, importera det från react-syntax-highlighter-paketet så här:

importera { Prisma som SyntaxHighlighter } från "reagera-syntax-highlighter";
importera { vscDarkPlus } från "react-syntax-highlighter/dist/esm/styles/prism";

För prismaljusbygget, importera PrismLight och registrera språket du använder.

importera { PrismLight som SyntaxHighlighter } från 'reagera-syntax-highlighter';
importera jsx från 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
importera prisma från 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Att använda prisma är fördelaktigt, särskilt när man markerar jsx eftersom react-syntax-highlighter inte stöder det fullt ut.

Lägga till radnummer i kodblocket

Nu när du vet hur du markerar ett kodblock kan du börja lägga till extra funktioner som radnummer.

Med react-syntax-highlighter behöver du bara klara showLineNumbers till SyntaxHighlighter-komponenten och ställ in den på sant.

<SyntaxHighlighter language="javascript" style={docco} showLineNumbers="Sann">
 {codeString}
</SyntaxHighlighter>

Komponenten kommer nu att visa radnummer bredvid din kod.

Använda anpassade stilar i din komponent

Även om react-syntax-highlighter ger styling, kan du behöva anpassa dina kodblock ibland.

För detta låter paketet dig skicka inline CSS-stilar till customStyle-rekvisiten som visas nedan:

<SyntaxHighlighter language="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5 px", bakgrundsfärg: "#001E3C"}} >
 {kodsträng}
</SyntaxHighlighter>

Det markerade kodblocket kommer att ha en anpassad ramradie och bakgrundsfärg i det här exemplet.

Vikten av syntaxmarkering

Du kan använda react-syntax-highlighter-paketet för att markera kod i React. Du kan använda den lätta versionen för att minska byggstorleken och anpassa kodblock med dina egna stilar.

Att markera kodavsnitt gör att din kod ser bra ut, förbättrar dess läsbarhet och gör den mer lättillgänglig för läsarna.