Једна од кључних карактеристика блога о програмирању су блокови кода. Не морате да их форматирате помоћу маркера синтаксе, али то чини да ваши блогови изгледају много лепше ако то учините. Такође може побољшати читљивост вашег кода.

Овај чланак ће вам показати како да користите реацт-синтак-хигхлигхтер за истицање блокова кода у Реацт-у. Направићете компоненту блока кода која може да истакне код који јој је прослеђен користећи синтаксу датог језика.

Истицање синтаксе Помоћу реацт-синтаксе-хигхлигхтер-а

Маркер синтаксе реакције вам омогућава да истакнете код помоћу Реацт-а. За разлику од других маркери синтаксе, реацт-синтак-хигхлигхтер се не ослања на ЦомпонентДидУпдате или ЦомпонентДидМоунт за уметање истакнутог кода у ДОМ користећи опасноСетИннерХТМЛ.

Тај приступ је опасан јер излаже апликацију напади скриптовања на више локација.

Уместо тога, користи стабло синтаксе за изградњу виртуелног ДОМ-а и ажурира га само изменама.

Компонента користи ПрисмЈС и Хигхлигхт.јс у позадини. Можете изабрати да користите било које да бисте истакли свој код. Веома је једноставан за коришћење јер пружа готови стил.

instagram viewer

Компонента реацт-синтак-хигхлигхтер прихвата код, језик и стил као реквизите. Компонента прихвата и друге опције прилагођавања. Можете их пронаћи у документација за означавање синтаксе реакције.

Коришћење компоненте реацт-синтак-хигхлигхтер

Да бисте почели да користите маркер реацт синтаксе у Реацт-у, инсталирајте га преко нпм-а.

нпм инсталирај реаговати-синтаксу-истакљивач --сачувати

Креирајте нову компоненту под називом ЦодеБлоцк.јс у вашој Реацт апликацији и увозите реаговати-синтаксу-истакљивач:

увоз СинтакХигхлигхтер из 'реацт-синтак-хигхлигхтер';
увоз { доццо } из 'реацт-синтак-хигхлигхтер/дист/есм/стилес/хљс';
конст ЦодеБлоцк = ({цодестринг}) => {
повратак (
<СинтакХигхлигхтер лангуаге="јавасцрипт" стиле={доццо}>
 {цодеСтринг}
</SyntaxHighlighter>
 );
};

Компонента СинтакХигхлигхтер прихвата језик и стил за употребу. Такође узима низ кода као свој садржај.

Горњу компоненту можете приказати на следећи начин:

конст Апликација = () => {
конст цодеСтринг = `
конст Квадрат = (н) => повратак н * н
 `
повратак(
<ЦодеБлоцк цодестринг={цодеСтринг}/>
 )
}

Важно је напоменути да коришћење реацт-синтак-хигхлигхтер-а може повећати величину ваше грађе, тако да ако је потребно, можете да увезете лаку верзију. Лагана конструкција, међутим, нема подразумеване стилове.

Такође ћете морати да увезете и региструјете језике које желите користећи регистерЛангуаге функција извезена из лигхт буилд-а.

увоз { Лигхт као СинтакХигхлигхтер } из 'реацт-синтак-хигхлигхтер';
увоз јс из 'реацт-синтак-хигхлигхтер/дист/есм/лангуагес/хљс/јавасцрипт';
СинтакХигхлигхтер.регистерЛангуаге('јавасцрипт', јс);

Ова компонента користи Хигхлигхт.јс да истакне код.

Да бисте уместо тога користили ПрисмЈС, увезите га из пакета реацт-синтак-хигхлигхтер овако:

увоз { Присм као СинтакХигхлигхтер } из "реаговати-синтаксу-истакнути";
увоз { всцДаркПлус } из "реацт-синтак-хигхлигхтер/дист/есм/стилес/присм";

За конструкцију призманог светла, увезите ПрисмЛигхт и региструјте језик који користите.

увоз { ПрисмЛигхт као СинтакХигхлигхтер } из 'реацт-синтак-хигхлигхтер';
увоз јск из 'реацт-синтак-хигхлигхтер/дист/есм/лангуагес/присм/јск';
увоз призма из 'реацт-синтак-хигхлигхтер/дист/есм/стилес/присм/присм';
СинтакХигхлигхтер.регистерЛангуаге('јск', јск);

Коришћење призме је корисно, посебно када се истиче јск јер га реацт-синтаксе-хигхлигхтер не подржава у потпуности.

Додавање бројева линија у блок кода

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

Са реацт-синтакс-хигхлигхтером, потребно је само да прођете сховЛинеНумберс на компоненту СинтакХигхлигхтер и подесите је на труе.

<СинтакХигхлигхтер лангуаге="јавасцрипт" стиле={доццо} сховЛинеНумберс="истинито">
 {цодеСтринг}
</SyntaxHighlighter>

Компонента ће сада приказати бројеве редова поред вашег кода.

Коришћење прилагођених стилова у компоненти

Иако реацт-синтак-хигхлигхтер пружа стил, можда ћете понекад морати да прилагодите своје блокове кода.

За ово, пакет вам омогућава да прођете инлине ЦСС стилови на цустомСтиле проп као што је приказано у наставку:

<СинтакХигхлигхтер лангуаге="јавасцрипт" стиле={всцДаркПлус} цустомСтиле={{бордерРадиус: "5пк", боја позадине: "#001Е3Ц"}} >
 {цодестринг}
</SyntaxHighlighter>

Истакнути блок кода ће у овом примеру имати прилагођени радијус ивице и боју позадине.

Важност истицања синтаксе

Можете користити пакет реацт-синтак-хигхлигхтер за истицање кода у Реацт-у. Можете користити лаку верзију да смањите величину грађења и прилагодите блокове кода користећи сопствене стилове.

Истицање исечака кода чини да ваш код изгледа добро, побољшава његову читљивост и чини га приступачнијим читаоцима.