Cách thêm khối mã trong ứng dụng React của bạn
Trong quá trình phát triển web, việc hiển thị các khối mã với định dạng và đánh dấu thích hợp là một yêu cầu phổ biến. Các khối mã là một công cụ linh hoạt có thể được sử dụng cho nhiều mục đích khác nhau, bao gồm hiển thị mã và cải thiện mức độ tương tác của người dùng.
Mục Lục
Cài đặt thư viện
Đầu tiên, tạo một ứng dụng React và cài đặt khối mã phản ứng thư viện. Thư viện này được sử dụng để hiển thị các khối mã trong ứng dụng của bạn. Bạn có thể cài đặt thư viện này bằng npm, trình quản lý gói cho Node.js. Mở thiết bị đầu cuối của bạn và điều hướng đến thư mục dự án của bạn. Sau đó chạy lệnh sau:
npm install react-code-blocks
Điều này sẽ cài đặt thư viện khối mã phản ứng trong dự án của bạn.
Thêm khối mã vào dự án của bạn
Khi bạn đã cài đặt thư viện khối mã phản ứng, bạn đã sẵn sàng để bắt đầu. Đầu tiên, nhập khẩu Khối mã thành phần từ thư viện khối mã phản ứng trong ứng dụng của bạn. Bạn có thể thực hiện việc này bằng cách thêm đoạn mã sau vào tệp của mình:
import { CodeBlock } from "react-code-blocks";
Sau đó, sử dụng thành phần CodeBlock trong ứng dụng của bạn bằng cách thêm mã sau:
<CodeBlock
text='console.log("Hello, world!");'
language='javascript'
showLineNumbers={true}
theme={yourTheme}
/>
Trong đoạn mã trên, bạn đang chuyển một số đạo cụ cho thành phần CodeBlock. Dưới đây là danh sách tất cả các đạo cụ có sẵn:
- văn bản (bắt buộc): Mã để hiển thị trong khối mã.
- ngôn ngữ (bắt buộc): Ngôn ngữ lập trình của mã. Điều này được sử dụng để làm nổi bật cú pháp của khối mã.
- showLineSố: Giá trị boolean cho biết có hiển thị số dòng trong khối mã hay không. Nó mặc định là sai.
- chủ đề: Chủ đề để sử dụng cho khối mã. Đây có thể là một chủ đề tích hợp sẵn hoặc một đối tượng chủ đề tùy chỉnh. Nó mặc định là GitHub.
- bắt đầuDòngSố: Số dòng để bắt đầu đếm. Nó mặc định là 1.
- khối mã: Một đối tượng chứa các tùy chọn cho khối mã. Điều này có thể bao gồm số dòng (một boolean cho biết có hiển thị số dòng hay không) và bọcLines (một boolean cho biết có ngắt dòng hay không).
- trong một cái nhấp chuột: Một chức năng để gọi khi khối mã được nhấp vào.
Đây là một ví dụ về cách sử dụng tất cả các đạo cụ này:
import { CodeBlock } from "react-code-blocks";function MyComponent() {
const handleClick = () => {
console.log("Code block clicked");
};
return (
<CodeBlock
text='const greeting = "Hello, world!"; console.log(greeting);'
language='javascript'
showLineNumbers={true}
theme='atom-one-dark'
startingLineNumber={10}
codeBlock={{ lineNumbers: false, wrapLines: true }}
onClick={handleClick}
/>
);
}
Trong đoạn mã trên, bạn đang sử dụng nguyên tử-một-tối chủ đề, bắt đầu số dòng từ 10, tắt số dòng, bật ngắt dòng và đính kèm trình xử lý nhấp chuột.
Bằng cách sử dụng các đạo cụ này, bạn có thể tùy chỉnh giao diện và hành vi của các khối mã để phù hợp với nhu cầu của mình.
Thêm chủ đề trong khối mã của bạn
Thư viện khối mã phản ứng cung cấp nhiều chủ đề tích hợp sẵn có thể được sử dụng để tùy chỉnh giao diện của khối mã của bạn. Để sử dụng chủ đề tích hợp, bạn chỉ cần chỉ định tên của chủ đề trong chủ đề chống đỡ. Ví dụ, để sử dụng các nguyên tử-một-tối chủ đề, bạn sẽ sử dụng đoạn mã sau:
<CodeBlock
text='console.log("Hello, world!");'
language='javascript'
showLineNumbers={true}
theme='atom-one-dark'
/>
Ngoài các chủ đề tích hợp sẵn, bạn cũng có thể tạo các chủ đề tùy chỉnh bằng cách xác định một đối tượng JavaScript chỉ định các màu sẽ sử dụng cho các phần khác nhau của khối mã. Đây là một ví dụ về đối tượng chủ đề tùy chỉnh có thể trông như thế nào:
const myCustomTheme = {
lineNumberColor: "#ccc",
lineNumberBgColor: "#222",
backgroundColor: "#222",
textColor: "#ccc",
substringColor: "#00ff00",
keywordColor: "#0077ff",
attributeColor: "#ffaa00",
selectorTagColor: "#0077ff",
docTagColor: "#aa00ff",
nameColor: "#f8f8f8",
builtInColor: "#0077ff",
literalColor: "#ffaa00",
bulletColor: "#ffaa00",
codeColor: "#ccc",
additionColor: "#00ff00",
regexpColor: "#f8f8f8",
symbolColor: "#ffaa00",
variableColor: "#ffaa00",
templateVariableColor: "#ffaa00",
linkColor: "#aa00ff",
selectorAttributeColor: "#ffaa00",
selectorPseudoColor: "#aa00ff",
typeColor: "#0077ff",
stringColor: "#00ff00",
selectorIdColor: "#ffaa00",
quoteColor: "#f8f8f8",
templateTagColor: "#ccc",
deletionColor: "#ff0000",
titleColor: "#0077ff",
sectionColor: "#0077ff",
commentColor: "#777",
metaKeywordColor: "#f8f8f8",
metaColor: "#aa00ff",
functionColor: "#0077ff",
numberColor: "#ffaa00",
};
Để sử dụng một chủ đề tùy chỉnh, bạn sẽ chuyển đối tượng chủ đề làm chỗ dựa chủ đề của thành phần CodeBlock:
<CodeBlock
text='console.log("Hello, world!");'
language='javascript'
showLineNumbers={true}
theme={myCustomTheme}
/>
Dưới đây là đầu ra:
Bằng cách sử dụng các chủ đề tùy chỉnh và tích hợp sẵn, bạn có thể tùy chỉnh hình thức của các khối mã để phù hợp với nhu cầu của mình và thiết kế tổng thể của ứng dụng.
Thêm CopyBlock vào Dự án của bạn
Nếu bạn muốn thêm chức năng sao chép vào các khối mã của mình, bạn có thể sử dụng sao chép khối thành phần được cung cấp bởi thư viện khối mã phản ứng. Để sử dụng thành phần này, bạn cần cài đặt Reac-copy-to-clipboard thư viện cũng vậy. Đây là cách thêm thành phần CopyBlock vào dự án của bạn:
cài đặt Reac-copy-to-clipboard thư viện:
npm install react-copy-to-clipboard
Nhập các thành phần và thư viện cần thiết:
import { CopyBlock } from 'react-code-blocks';
import { FaCopy } from 'react-icons/fa';
import copy from 'copy-to-clipboard';
Sử dụng thành phần CopyBlock trong mã của bạn:
const code = 'console.log("Hello, world!");';
const language = 'javascript';<CopyBlock
text={code}
language={language}
showLineNumbers={true}
wrapLines={true}
theme='dracula'
codeBlock
icon={<FaCopy />}
onCopy={() => copy(code)}
/>
Dưới đây là đầu ra:
Bằng cách thêm thành phần CopyBlock vào dự án của bạn, bạn có thể dễ dàng cho phép người dùng sao chép mã từ các khối mã của bạn vào khay nhớ tạm của họ.
Các phương pháp thay thế để thêm các khối mã
Mặc dù sử dụng thư viện react-code-blocks là cách đơn giản nhất để thêm các khối mã vào ứng dụng React của bạn, nhưng cũng có một vài phương pháp thay thế mà bạn có thể sử dụng:
- Thêm đánh dấu cú pháp theo cách thủ công: Nếu không muốn sử dụng thư viện, bạn có thể thêm tính năng đánh dấu cú pháp vào mã của mình theo cách thủ công bằng CSS Tailwind hoặc CSS thông thường. Điều này liên quan đến việc thêm các lớp CSS vào các phần tử mã của bạn để áp dụng các kiểu phù hợp. Mặc dù phương pháp này cung cấp cho bạn nhiều quyền kiểm soát hơn đối với các kiểu nhưng việc thiết lập và duy trì có thể tốn thời gian.
- Sử dụng các thư viện khác: Có sẵn một số thư viện khác cung cấp tô sáng cú pháp cho mã, chẳng hạn như phản ứng-cú pháp-highlighter, lăng kính-phản ứng-rendererVà nổi bật.js. Các thư viện này có các tính năng và phong cách khác nhau, vì vậy bạn có thể chọn một thư viện phù hợp với nhu cầu của mình.
Mặc dù thư viện khối mã phản ứng là một lựa chọn tuyệt vời cho hầu hết các ứng dụng, nhưng các phương pháp thay thế này có thể hữu ích trong một số trường hợp nhất định. Cuối cùng, phương pháp bạn chọn sẽ phụ thuộc vào nhu cầu và sở thích cụ thể của bạn.
Cải thiện mức độ tương tác của người dùng với các khối mã
Bằng cách sử dụng các khối mã để giải thích mã, cung cấp các ví dụ viết mã tương tác và tạo các thiết kế hấp dẫn trực quan, bạn có thể nâng cao trải nghiệm của người dùng và giữ họ tương tác với trang web hoặc ứng dụng của bạn. Ngoài ra, bằng cách sử dụng các tính năng như CopyBlock và chủ đề tùy chỉnh, bạn có thể làm cho ứng dụng React của mình có nhiều chức năng và hấp dẫn hơn.