Како додати блокове кода у вашу Реацт апликацију

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

Инсталирање библиотеке

Први, направите Реацт апликацију и инсталирајте реаговати-код-блокови библиотека. Ова библиотека се користи за приказ блокова кода у вашој апликацији. Ову библиотеку можете инсталирати користећи нпм, менаџер пакета за Ноде.јс. Отворите свој терминал и идите до директоријума вашег пројекта. Затим покрените следећу команду:

нпм инсталл реацт-цоде-блоцкс

Ово ће инсталирати библиотеку реацт-цоде-блоцкс у ваш пројекат.

Додавање блока кода вашем пројекту

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

увоз { ЦодеБлоцк } из"реаговати-код-блокови";

Затим користите компоненту ЦодеБлоцк у својој апликацији додавањем следећег кода:

 тект='цонсоле.лог("Здраво, свет!");'
 лангуаге='јавасцрипт'
 сховЛинеНумберс={истина}
 тхеме={иоурТхеме}
/>

У горњем коду, прослеђујете неколико пропс-а компоненти ЦодеБлоцк. Ево листе свих доступних реквизита:

• текст (обавезно): Код за приказ у блоку кода.
• језик (обавезно): Програмски језик кода. Ово се користи за истицање синтаксе кодног блока.
• сховЛинеНумберс:Боолеан вредност која показује да ли да се приказују бројеви линија у блоку кода или не. Подразумевано је нетачно.
• тема:Тема која се користи за блок кода. Ово може бити уграђена тема или прилагођени објект теме. Подразумевано је ГитХуб.
• стартингЛинеНумбер: Број реда за почетак одбројавања. Подразумевано је 1.
• цодеБлоцк: Објекат који садржи опције за блок кода. Ово може укључивати линеНумберс (боолеан који означава да ли треба приказати бројеве редова или не) и врапЛинес (боолеан који означава да ли треба премотати линије или не).
• онЦлицк: Функција која се позива када се кликне на блок кода.

Ево примера како да користите све ове реквизите:

увоз { ЦодеБлоцк } из"реаговати-код-блокови";
функцијаМиЦомпонент() {
конст хандлеЦлицк = () => {
конзола.Пријава(„Кликнуо је на блок кода“);
 };
повратак (
 тект='цонст греетинг = "Здраво, свет!"; цонсоле.лог (поздрав);'
 лангуаге='јавасцрипт'
 сховЛинеНумберс={истина}
 тхеме='атом-један-таман'
 стартингЛинеНумбер={10}
 цодеБлоцк={{ линеНумберс: лажно, врапЛинес: истина }}
 онЦлицк={хандлеЦлицк}
 />
 );
}

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

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

Додавање тема у блокове кода

Библиотека реацт-цоде-блоцкс нуди низ уграђених тема које се могу користити за прилагођавање изгледа ваших блокова кода. Да бисте користили уграђену тему, једноставно морате да наведете назив теме у тема проп. На пример, да користите атом-један-таман тему, користили бисте следећи код:

 тект='цонсоле.лог("Здраво, свет!");'
 лангуаге='јавасцрипт'
 сховЛинеНумберс={истина}
 тхеме='атом-један-таман'
/>

Поред уграђених тема, можете креирати и прилагођене теме тако што ћете дефинисати ЈаваСцрипт објекат који одређује боје које ће се користити за различите делове кодног блока. Ево примера како би објекат прилагођене теме могао да изгледа:

конст миЦустомТхеме = {
 линеНумберБоја: „#ццц“,
 линеНумберБгЦолор: "#222",
 боја позадине: "#222",
 боја текста: „#ццц“,
 боја подстринга: "#00фф00",
 боја кључне речи: "#0077фф",
 атрибутБоја: "#ффаа00",
 селецторТагЦолор: "#0077фф",
 доцТагЦолор: "#аа00фф",
 имеБоја: "#ф8ф8ф8",
 буилтИнЦолор: "#0077фф",
 литералЦолор: "#ффаа00",
 буллетЦолор: "#ффаа00",
 боја кода: „#ццц“,
 додатакБоја: "#00фф00",
 регекпЦолор: "#ф8ф8ф8",
 Боја симбола: "#ффаа00",
 променљиваБоја: "#ффаа00",
 темплатеВариаблеЦолор: "#ффаа00",
 боја везе: "#аа00фф",
 селецторАттрибутеЦолор: "#ффаа00",
 селецторПсеудоЦолор: "#аа00фф",
 типБоја: "#0077фф",
 боја стринга: "#00фф00",
 селецторИдЦолор: "#ффаа00",
 куотеЦолор: "#ф8ф8ф8",
 темплатеТагЦолор: „#ццц“,
 делетионЦолор: "#фф0000",
 титлеЦолор: "#0077фф",
 Боја одељка: "#0077фф",
 боја коментара: "#777",
 метаКеивордЦолор: "#ф8ф8ф8",
 метаЦолор: "#аа00фф",
 Боја функције: "#0077фф",
 број Боја: "#ффаа00",
};

Да бисте користили прилагођену тему, проследили бисте објекат теме као реквизит теме компоненте ЦодеБлоцк:

 тект='цонсоле.лог("Здраво, свет!");'
 лангуаге='јавасцрипт'
 сховЛинеНумберс={истина}
 тхеме={мојаЦустомТхеме}
/>

Испод је излаз:

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

Додавање ЦопиБлоцк у ваш пројекат

Ако желите да додате функцију копирања својим блоковима кода, можете користити ЦопиБлоцк компонента коју обезбеђује библиотека реацт-цоде-блоцкс. Да бисте користили ову компоненту, мораћете да инсталирате реаговати-цопи-то-цлипбоард библиотека такође. Ево како да додате компоненту ЦопиБлоцк свом пројекту:

Инсталирајте реаговати-цопи-то-цлипбоард библиотека:

нпм инсталл реацт-цопи-то-цлипбоард

Увезите потребне компоненте и библиотеке:

увоз { ЦопиБлоцк } из'реацт-цоде-блоцкс';
увоз { ФаЦопи } из'реацт-ицонс/фа';
увоз копија из'цопи-то-цлипбоард';

Користите компоненту ЦопиБлоцк у свом коду:

конст код = 'цонсоле.лог("Здраво, свет!");';
конст језик = 'јавасцрипт';
 тект={цоде}
 лангуаге={лангуаге}
 сховЛинеНумберс={истина}
 врапЛинес={истина}
 тхеме='дракула'
 цодеБлоцк
 икона={}
 онЦопи={() => копија (код)}
/>

Испод је излаз:

Додавањем компоненте ЦопиБлоцк свом пројекту, можете лако дозволити корисницима да копирају код из ваших блокова кода у свој међуспремник.

Алтернативне методе за додавање блокова кода

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

1. Ручно додавање истицања синтаксе: Ако не желите да користите библиотеку, можете ручно додати истицање синтаксе свом коду користећи Таилвинд ЦСС или нормалан ЦСС. Ово укључује додавање ЦСС класа елементима кода да бисте применили одговарајуће стилове. Иако вам овај метод даје већу контролу над стиловима, може бити дуготрајно за постављање и одржавање.
2. Коришћење других библиотека: Постоји неколико других доступних библиотека које обезбеђују истицање синтаксе за код, као што је реаговати-синтаксу-истакљивач, призма-реаговати-рендерер, и хигхлигхт.јс. Ове библиотеке имају различите карактеристике и стилове, тако да можете изабрати ону која одговара вашим потребама.

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

Побољшајте ангажовање корисника помоћу блокова кода

Коришћењем кодних блокова за објашњавање кода, пружање интерактивних примера кодирања и визуелно креирање привлачног дизајна, можете побољшати корисничко искуство и задржати их ангажованим на вашој веб локацији или апликација. Поред тога, коришћењем функција као што су ЦопиБлоцк и прилагођене теме, своју Реацт апликацију можете учинити још функционалнијом и атрактивнијом.