Търсите да покажете кодови блокове във вашето приложение React? Следвайте това ръководство, за да интегрирате маркирани със синтаксис кодови блокове във вашето приложение.
В уеб разработката показването на кодови блокове с правилно форматиране и подчертаване е често срещано изискване. Кодовите блокове са универсален инструмент, който може да се използва за различни цели, включително показване на код и подобряване на ангажираността на потребителите.
Инсталиране на библиотеката
първо, създайте приложение React и инсталирайте реагират-код-блокове библиотека. Тази библиотека се използва за показване на кодови блокове във вашето приложение. Можете да инсталирате тази библиотека с помощта на npm, пакетния мениджър за Node.js. Отворете вашия терминал и отидете до директорията на вашия проект. След това изпълнете следната команда:
npm инсталира реагиращи кодови блоковеТова ще инсталира библиотеката react-code-blocks във вашия проект.
Добавяне на кодовия блок към вашия проект
След като инсталирате библиотеката react-code-blocks, вие сте готови да започнете. Първо импортирайте
CodeBlock компонент от библиотеката react-code-blocks във вашето приложение. Можете да направите това, като добавите следния код към вашия файл:импортиране { CodeBlock } от"реагиране на код-блокове";След това използвайте компонента CodeBlock в приложението си, като добавите следния код:
текст='console.log("Здравей, свят!");'
език='javascript'
showLineNumbers={вярно}
тема={вашата тема}
/>В горния код вие предавате няколко подпори към компонента CodeBlock. Ето списък на всички налични подпори:
- текст (задължително): Кодът за показване в кодовия блок.
- език (задължително): Езикът за програмиране на кода. Това се използва за подчертаване на синтаксиса на кодовия блок.
- showLineNumbers: Булева стойност, показваща дали да се показват номерата на редовете в кодовия блок или не. По подразбиране е false.
- тема: Темата, която да се използва за кодовия блок. Това може да бъде вградена тема или персонализиран тематичен обект. По подразбиране е GitHub.
- номер на начален ред: Номерът на реда, от който да започне броенето. По подразбиране е 1.
- codeBlock: Обект, съдържащ опции за кодовия блок. Това може да включва номера на реда (булева стойност, указваща дали да се показват номерата на редовете или не) и wrapLines (булева стойност, указваща дали да се пренасят редове или не).
- onClick: Функция, която да се извиква, когато се щракне върху кодовия блок.
Ето пример за това как да използвате всички тези подпори:
импортиране { CodeBlock } от"реагиране на код-блокове";функцияMyComponent() {
конст handleClick = () => {
конзола.log(„Щракнахте върху кодовия блок“);
};
връщане (
текст='const greeting = "Здравей, свят!"; console.log (поздрав);'
език='javascript'
showLineNumbers={вярно}
тема='atom-one-dark'
номер на начален ред={10}
codeBlock={{ номера на реда: невярно, wrapLines: вярно }}
onClick={handleClick}
/>
);
}
В горния код използвате атом-един-тъмен тема, започване на номерата на редовете от 10, деактивиране на номерата на редове, активиране на обвиване на редове и прикачване на манипулатор за щракване.
Като използвате тези подпори, можете да персонализирате външния вид и поведението на вашите кодови блокове, за да отговарят на вашите нужди.
Добавяне на теми във вашите кодови блокове
Библиотеката react-code-blocks предоставя разнообразие от вградени теми, които могат да се използват за персонализиране на външния вид на вашите кодови блокове. За да използвате вградена тема, просто трябва да посочите името на темата в тема опора Например, за да използвате атом-един-тъмен тема, ще използвате следния код:
текст='console.log("Здравей, свят!");'
език='javascript'
showLineNumbers={вярно}
тема='atom-one-dark'
/>В допълнение към вградените теми, можете също да създавате персонализирани теми, като дефинирате обект на JavaScript, който определя цветовете, които да се използват за различни части на кодовия блок. Ето пример за това как може да изглежда обект на персонализирана тема:
конст myCustomTheme = {
lineNumberColor: "#ccc",
lineNumberBgColor: "#222",
Цвят на фона: "#222",
textColor: "#ccc",
поднизЦвят: "#00ff00",
ключова думаЦвят: "#0077ff",
attributeColor: "#ffaa00",
selectorTagColor: "#0077ff",
docTagColor: "#aa00ff",
nameColor: "#f8f8f8",
buildInColor: "#0077ff",
literalColor: "#ffaa00",
bulletColor: "#ffaa00",
кодЦвят: "#ccc",
допълнителен цвят: "#00ff00",
regexpColor: "#f8f8f8",
символЦвят: "#ffaa00",
variableColor: "#ffaa00",
templateVariableColor: "#ffaa00",
Цвят на връзката: "#aa00ff",
selectorAttributeColor: "#ffaa00",
селектор ПсевдоЦвят: "#aa00ff",
типЦвят: "#0077ff",
stringColor: "#00ff00",
selectorIdColor: "#ffaa00",
quoteColor: "#f8f8f8",
templateTagColor: "#ccc",
Цвят на изтриване: "#ff0000",
заглавие Цвят: "#0077ff",
раздел Цвят: "#0077ff",
Цвят на коментара: "#777",
metaKeywordColor: "#f8f8f8",
metaColor: "#aa00ff",
функцияЦвят: "#0077ff",
numberColor: "#ffaa00",
};За да използвате персонализирана тема, трябва да предадете обекта на темата като подложка на темата на компонента CodeBlock:
текст='console.log("Здравей, свят!");'
език='javascript'
showLineNumbers={вярно}
theme={myCustomTheme}
/>По-долу е резултатът:
Като използвате вградени и персонализирани теми, можете да персонализирате външния вид на вашите кодови блокове, за да отговарят на вашите нужди и цялостния дизайн на вашето приложение.
Добавяне на CopyBlock към вашия проект
Ако искате да добавите функцията за копиране към вашите кодови блокове, можете да използвате CopyBlock компонент, предоставен от библиотеката react-code-blocks. За да използвате този компонент, ще трябва да инсталирате реагиране на копиране в клипборда библиотека също. Ето как да добавите компонента CopyBlock към вашия проект:
Инсталирайте реагиране на копиране в клипборда библиотека:
npm инсталирайте реагиране на копиране в клипбордаИмпортирайте необходимите компоненти и библиотеки:
импортиране { CopyBlock } от'react-code-blocks';
импортиране { FaCopy } от'react-icons/fa';
импортиране копие от'копиране в клипборда';Използвайте компонента CopyBlock във вашия код:
конст код = 'console.log("Здравей, свят!");';
конст език = 'javascript';
текст={код}
език={език}
showLineNumbers={вярно}
wrapLines={вярно}
тема='Дракула'
codeBlock
икона={}
onCopy={() => копиране (код)}
/>
По-долу е резултатът:
Като добавите компонента CopyBlock към вашия проект, можете лесно да позволите на потребителите да копират кода от вашите кодови блокове в своя клипборд.
Алтернативни методи за добавяне на кодови блокове
Докато използването на библиотеката react-code-blocks е най-лесният начин за добавяне на кодови блокове към вашето приложение React, има и няколко алтернативни метода, които можете да използвате:
- Ръчно добавяне на подчертаване на синтаксиса: Ако не искате да използвате библиотека, можете ръчно да добавите подчертаване на синтаксиса към вашия код използвайки Tailwind CSS или нормален CSS. Това включва добавяне на CSS класове към вашите кодови елементи, за да приложите подходящите стилове. Въпреки че този метод ви дава повече контрол върху стиловете, настройката и поддръжката му може да отнеме много време.
- Използване на други библиотеки: Има няколко други налични библиотеки, които предоставят подчертаване на синтаксиса за код, като напр реагиращ синтаксис-хайлайтър, призма-реагиране-рендър, и highlight.js. Тези библиотеки имат различни функции и стилове, така че можете да изберете тази, която отговаря на вашите нужди.
Докато библиотеката react-code-blocks е чудесен избор за повечето приложения, тези алтернативни методи могат да бъдат полезни в определени ситуации. В крайна сметка методът, който изберете, ще зависи от вашите специфични нужди и предпочитания.
Подобрете ангажираността на потребителите с кодови блокове
Чрез използване на кодови блокове за обяснение на код, предоставяне на интерактивни примери за кодиране и визуално създаване привлекателни дизайни, можете да подобрите изживяването на вашите потребители и да ги държите ангажирани с вашия уебсайт или приложение. Освен това, като използвате функции като CopyBlock и персонализирани теми, можете да направите вашето приложение React още по-функционално и привлекателно.