Как добавить блоки кода в ваше приложение React

В веб-разработке отображение блоков кода с правильным форматированием и подсветкой является распространенным требованием. Блоки кода — это универсальный инструмент, который можно использовать для различных целей, включая отображение кода и повышение вовлеченности пользователей.

Установка библиотеки

Первый, создать приложение React и установить блоки кода реакции библиотека. Эта библиотека используется для отображения блоков кода в вашем приложении. Вы можете установить эту библиотеку с помощью npm, менеджера пакетов для Node.js. Откройте терминал и перейдите в каталог проекта. Затем выполните следующую команду:

npm установить блоки кода реакции

Это установит библиотеку react-code-blocks в ваш проект.

Добавление блока кода в ваш проект

После того, как вы установили библиотеку react-code-blocks, вы готовы приступить к работе. Сначала импортируйте

КодБлок компонент из библиотеки react-code-blocks в вашем приложении. Вы можете сделать это, добавив в файл следующий код:

Импортировать { кодовый блок } от"реагировать-код-блоки";

Затем используйте компонент CodeBlock в своем приложении, добавив следующий код:

 текст='console.log("Привет, мир!");'
 язык='javascript'
 показатьLineNumbers={истинный}
 тема = {ваша тема}
/>

В приведенном выше коде вы передаете несколько реквизитов компоненту CodeBlock. Вот список всех доступных реквизитов:

• текст (обязательно): Код для отображения в блоке кода.
• язык (обязательно): Язык программирования кода. Это используется для подсветка синтаксиса блока кода.
• показатьLineNumbers: логическое значение, указывающее, отображать ли номера строк в блоке кода или нет. По умолчанию оно равно false.
• тема: Тема, используемая для блока кода. Это может быть встроенная тема или пользовательский объект темы. По умолчанию это GitHub.
• начальный номер линии: номер строки, с которой начинается отсчет. По умолчанию это 1.
• кодБлок: объект, содержащий параметры блока кода. Это может включать lineNumbers (логическое значение, указывающее, отображать ли номера строк или нет) и обернуть линии (логическое значение, указывающее, следует ли переносить строки или нет).
• по щелчку: функция, вызываемая при нажатии блока кода.

Вот пример того, как использовать все эти реквизиты:

Импортировать { кодовый блок } от"реагировать-код-блоки";
функцияМой Компонент() {
константа дескрипторклик = () => {
консоль.бревно("Кодовый блок нажат");
 };
возвращаться (
 текст='const Greeting = "Привет, мир!"; console.log (приветствие);'
 язык='javascript'
 показатьLineNumbers={истинный}
 тема ='атом-один-темный'
 начальный номер линии = {10}
 кодБлок={{ lineNumbers: ЛОЖЬ, обернуть линии: истинный }}
 onClick={handleClick}
 />
 );
}

В приведенном выше коде вы используете атом-один-темный theme, начиная номера строк с 10, отключая номера строк, включая перенос строк и прикрепляя обработчик кликов.

Используя эти реквизиты, вы можете настроить внешний вид и поведение блоков кода в соответствии со своими потребностями.

Добавление тем в блоки кода

Библиотека react-code-blocks предоставляет множество встроенных тем, которые можно использовать для настройки внешнего вида ваших блоков кода. Чтобы использовать встроенную тему, вам просто нужно указать имя темы в тема опора Например, чтобы использовать атом-один-темный теме вы должны использовать следующий код:

 текст='console.log("Привет, мир!");'
 язык='javascript'
 показатьLineNumbers={истинный}
 тема ='атом-один-темный'
/>

В дополнение к встроенным темам вы также можете создавать пользовательские темы, определяя объект JavaScript, который указывает цвета, используемые для различных частей блока кода. Вот пример того, как может выглядеть пользовательский объект темы:

константа myCustomTheme = {
 LineNumberColor: "#ccc",
 LineNumberBgColor: "#222",
 фоновый цвет: "#222",
 цвет текста: "#ccc",
 подстрокаЦвет: "#00ff00",
 ключевое словоЦвет: "# 0077ff",
 атрибутЦвет: "#ффаа00",
 селектортегцвет: "# 0077ff",
 docTagColor: "#аа00фф",
 имяЦвет: "#f8f8f8",
 встроенный цвет: "# 0077ff",
 буквальный цвет: "#ффаа00",
 пуляЦвет: "#ффаа00",
 кодЦвет: "#ccc",
 дополнениеЦвет: "#00ff00",
 регулярное выражениеЦвет: "#f8f8f8",
 символЦвет: "#ффаа00",
 переменнаяЦвет: "#ффаа00",
 шаблонПеременнаяЦвет: "#ффаа00",
 ссылкаЦвет: "#аа00фф",
 selectorAttributeColor: "#ффаа00",
 селекторPseudoColor: "#аа00фф",
 типЦвет: "# 0077ff",
 строкаЦвет: "#00ff00",
 селекторидцвет: "#ффаа00",
 цитатаЦвет: "#f8f8f8",
 цвет тега шаблона: "#ccc",
 удалениеЦвет: "#ff0000",
 НазваниеЦвет: "# 0077ff",
 разделЦвет: "# 0077ff",
 комментарийЦвет: "#777",
 метаКлючевого Цвета: "#f8f8f8",
 метацвет: "#аа00фф",
 функцияЦвет: "# 0077ff",
 номерЦвет: "#ффаа00",
};

Чтобы использовать пользовательскую тему, вы должны передать объект темы в качестве реквизита темы компонента CodeBlock:

 текст='console.log("Привет, мир!");'
 язык='javascript'
 показатьLineNumbers={истинный}
 тема = {myCustomTheme}
/>

Ниже приведен вывод:

Используя встроенные и настраиваемые темы, вы можете настроить внешний вид блоков кода в соответствии с вашими потребностями и общим дизайном вашего приложения.

Добавление CopyBlock в ваш проект

Если вы хотите добавить функциональность копирования в свои блоки кода, вы можете использовать КопироватьБлок компонент, предоставляемый библиотекой react-code-blocks. Чтобы использовать этот компонент, вам необходимо установить реагировать на копирование в буфер обмена библиотека тоже. Вот как добавить компонент CopyBlock в ваш проект:

Установите реагировать на копирование в буфер обмена библиотека:

npm установить реакцию на копирование в буфер обмена

Импортируйте необходимые компоненты и библиотеки:

Импортировать { Копировать блок } от«реагировать на кодовые блоки»;
Импортировать {Факопирование} от'реагирующие значки/fa';
Импортировать копировать от'скопировать в буфер обмена';

Используйте компонент CopyBlock в своем коде:

константа код = 'console.log("Привет, мир!");';
константа язык = 'javascript';
 текст = {код}
 язык = {язык}
 показатьLineNumbers={истинный}
 обернуть линии = {истинный}
 тема =дракула
 кодБлок
 значок={}
 onCopy={() => копировать (код)}
/>

Ниже приведен вывод:

Добавив компонент CopyBlock в свой проект, вы можете легко позволить пользователям копировать код из ваших блоков кода в свой буфер обмена.

Альтернативные методы добавления блоков кода

Хотя использование библиотеки react-code-blocks — это самый простой способ добавить блоки кода в ваше приложение React, есть также несколько альтернативных методов, которые вы можете использовать:

1. Ручное добавление подсветки синтаксиса: Если вы не хотите использовать библиотеку, вы можете вручную добавить подсветку синтаксиса в свой код. с помощью CSS попутного ветра или обычный CSS. Это включает в себя добавление классов CSS к элементам кода для применения соответствующих стилей. Хотя этот метод дает вам больший контроль над стилями, его настройка и обслуживание могут занять много времени.
2. Использование других библиотек: доступно несколько других библиотек, обеспечивающих подсветку синтаксиса кода, например реагировать-синтаксис-подсветка, призма-реагировать-рендерер, и Highlight.js. Эти библиотеки имеют разные функции и стили, поэтому вы можете выбрать ту, которая соответствует вашим потребностям.

Хотя библиотека react-code-blocks — отличный выбор для большинства приложений, эти альтернативные методы могут быть полезны в определенных ситуациях. В конечном счете, метод, который вы выберете, будет зависеть от ваших конкретных потребностей и предпочтений.

Улучшите взаимодействие с пользователем с помощью блоков кода

Используя блоки кода для объяснения кода, предоставления интерактивных примеров кода и визуального создания привлекательный дизайн, вы можете улучшить взаимодействие с пользователями и поддерживать их интерес к вашему веб-сайту или приложение. Кроме того, используя такие функции, как CopyBlock и пользовательские темы, вы можете сделать свое приложение React еще более функциональным и привлекательным.