Една от ключовите характеристики на блога за програмиране са кодовите блокове. Не е нужно да ги форматирате с помощта на маркер за синтаксис, но блоговете ви изглеждат много по-хубави, ако го направите. Може също така да подобри четливостта на вашия код.

Тази статия ще ви покаже как да използвате react-syntax-highlighter, за да маркирате кодови блокове в React. Ще създадете компонент на кодов блок, способен да подчертава кода, подаден към него, като използва синтаксиса на предоставения език.

Осветяване на синтаксиса с реактивен синтаксисен маркер

Открояването на синтаксиса на React ви позволява да маркирате код с помощта на React. За разлика от други маркери за синтаксис, react-syntax-highlighter не разчита на ComponentDidUpdate или ComponentDidMount за вмъкване на маркирания код в DOM с помощта на opasnoSetInnerHTML.

Този подход е опасен, защото излага приложението на междусайтови скриптови атаки.

Вместо това той използва синтактично дърво за изграждане на виртуалния DOM и го актуализира само с промени.

instagram viewer

Компонентът използва PrismJS и Highlight.js във фонов режим. Можете да изберете да използвате и двете, за да маркирате кода си. Той е много лесен за използване, тъй като осигурява стил извън кутията.

Компонентът react-syntax-highlighter приема кода, езика и стила като подпори. Компонентът приема и други опции за персонализиране. Можете да ги намерите в документация за открояване на синтаксис на реакция.

Използване на компонента react-syntax-highlighter

За да започнете да използвате маркера за открояване на синтаксиса на React в React, инсталирайте го чрез npm.

npm Инсталирай реагиращ синтаксис-хайлайтър --спести

Създайте нов компонент, наречен CodeBlock.js във вашето приложение React и импортирайте реагиращ синтаксис-хайлайтър:

импортиране SyntaxHighlighter от 'react-syntax-highlighter';
импортиране {docco} от 'react-syntax-highlighter/dist/esm/styles/hljs';
конст CodeBlock = ({codestring}) => {
връщане (
<SyntaxHighlighter language="javascript" стил={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

Компонентът SyntaxHighlighter приема езика и стила за използване. Той също така приема кодовия низ като свое съдържание.

Можете да изобразите горния компонент, както следва:

конст Приложение = () => {
конст codeString = `
конст Квадрат = (n) => връщане n * n
 `
връщане(
<CodeBlock codestring={codeString}/>
 )
}

Важно е да се отбележи, че използването на react-syntax-highlighter може да увеличи размера на вашата компилация, така че ако е необходимо, можете да импортирате леката компилация. Леката конструкция обаче няма стилове по подразбиране.

Вие също ще трябва да импортирате и регистрирате езиците, които искате да използвате registerLanguage функция, експортирана от леката компилация.

импортиране { Светлина като Маркиране на синтаксис } от 'react-syntax-highlighter';
импортиране js от 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Този компонент използва Highlight.js за подчертаване на кода.

За да използвате PrismJS вместо това, импортирайте го от пакета react-syntax-highlighter по следния начин:

импортиране { Призма като Маркиране на синтаксис } от "открояване на синтаксис на реакция";
импортиране {vscDarkPlus} от "react-syntax-highlighter/dist/esm/styles/prism";

За изграждането на призматична светлина импортирайте PrismLight и регистрирайте езика, който използвате.

импортиране { PrismLight като Маркиране на синтаксис } от 'react-syntax-highlighter';
импортиране jsx от 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
импортиране призма от 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Използването на prism е полезно, особено когато маркирате jsx, тъй като react-syntax-highlighter не го поддържа напълно.

Добавяне на номера на редове към кодовия блок

След като вече знаете как да маркирате кодов блок, можете да започнете да добавяте допълнителни функции като номера на редове.

С react-syntax-highlighter трябва само да преминете showLineNumbers към компонента SyntaxHighlighter и го задайте на true.

<SyntaxHighlighter language="javascript" style={docco} showLineNumbers="вярно">
 {codeString}
</SyntaxHighlighter>

Компонентът вече ще показва номера на редове до вашия код.

Използване на персонализирани стилове във вашия компонент

Въпреки че react-syntax-highlighter предоставя стил, понякога може да се наложи да персонализирате вашите кодови блокове.

За тази цел пакетът ви позволява да предавате inline CSS стилове към подложката customStyle, както е показано по-долу:

<SyntaxHighlighter language="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5px", Цвят на фона: "#001E3C"}} >
 {codestring}
</SyntaxHighlighter>

Маркираният кодов блок ще има персонализиран радиус на границата и цвят на фона в този пример.

Значението на подчертаването на синтаксиса

Можете да използвате пакета react-syntax-highlighter, за да маркирате код в React. Можете да използвате олекотената версия, за да намалите размера на компилацията и да персонализирате кодовите блокове, като използвате вашите собствени стилове.

Открояването на кодови фрагменти прави вашия код да изглежда добре, подобрява неговата четимост и го прави по-достъпен за читателите.