Cách thêm khối code vào app React

Bạn đang tìm cách hiển thị khối code trong ứng dụng React? Vậy thì mời bạn làm theo hướng dẫn dưới đây để tích hợp các khối code được highlight cú pháp trong ứng dụng.

Trong phát triển web, hiện các khối code ở định dạng phù hợp và highlight đúng cách là yêu cầu cần thiết. Các khối code là một công cụ linh hoạt mà bạn có thể dùng cho nhiều mục đích khác nhau, bao gồm hiện code và cải thiện sự tham gia từ người dùng.

Cài đặt thư viện

Đầu tiên, tạo app React và cài thư viện react-code-blocks. Thư viện này được dùng để hiện những khối code trong app của bạn. Bạn có thể cài đặt thư viện đó bằng npm, trình quản lý gói cho Node.js. Mở terminal của bạn và điều hướng tới thư mục dự án. Sau đó, chạy lệnh sau:

npm install react-code-blocks

Điều này sẽ cài thư viện react-code-block trong dự án.

Thêm khối code vào dự án của bạn

Sau khi đã cài thư viện react-code-block, bạn đã sẵn sàng thiết lập mọi thứ. Đầu tiên, nhập thành phần CodeBlock từ thư viện react-code-blocks vào ứng dụng. Bạn có thể làm việc này bằng cách thêm code sau vào file:

import { CodeBlock } from "react-code-blocks";

Tiếp theo, dùng thành phàn CodeBlock trong app bằng cách thêm code sau:

<CodeBlock
  text='console.log("Hello, world!");'
  language='javascript'
  showLineNumbers={true}
  theme={yourTheme}
/>

Ở code trên, bạn đang chuyển một số thuộc tính sang thành phần CodeBlock. Đây là danh sách tất cả thuộc tính sẵn có:

text (required): Code hiện trong khối code.
language (required): Ngôn ngữ lập trình của code, được dùng để highlight cú pháp của khối code.
showLineNumbers: Một 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.
Theme: Theme dùng cho khối code. Đây có thể là một theme có sẵn hoặc một đối tượng theme tùy biến. GitHub là lựa chọn mặc định.
startingLineNumber: Số dòng bắt đầu đếm. Mặc định là 1.
codeBlock: Một đối tượng chứa các lựa chọn cho khối code, có thể bao gồm lineNumbers và wrapLines.
onClick: Hàm gọi khi khối code được click.

Dưới đây là ví dụ về cách dùng tất cả những thuộc tính 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}
    />
  );
}

Ở code trên, bạn đang dùng theme atom-one-dark, bắt đầu từ dòng số 10, tắt đánh số dòng, bật thu gọn dòng và đính kèm trình xử lý click.

Dùng những thuộc tính này, bạn có thể tùy biến hình ảnh và hoạt động của các khối code phù hợp với nhu cầu.

Thêm theme vào khối code

Thư viện react-code-block cung cấp một loạt theme mẫu cho người dùng thay đổi hình ảnh của khối code. Để dùng theme được tích hợp sẵn, bạn chỉ cần xác định tên của theme trong thuộc tính tương ứng. Ví dụ, để dùng theme atom-one-dark, bạn sẽ sử dụng code sau:

<CodeBlock
  text='console.log("Hello, world!");'
  language='javascript'
  showLineNumbers={true}
  theme='atom-one-dark'
/>

Ngoài theme có sẵn, bạn cũng có thể tạo theme tùy biến bằng cách xác định đối tượng JavaScript chỉ định màu để dùng cho các phần khác nhau trong khối code. Dưới đây là ví dụ về một đối tượng theme tùy biến như sau:

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",
};

Để dùng theme tùy chỉnh, bạn sẽ chuyển đối tượng theme dưới dạng thuộc tính của thành phần CodeBlock:

<CodeBlock
  text='console.log("Hello, world!");'
  language='javascript'
  showLineNumbers={true}
  theme={myCustomTheme}
/>

Kết quả:

Bằng cách dùng theme tùy chỉnh và tích hợp sẵn, bạn có thể thay đổi hình ảnh khối code phù hợp với nhu cầu và thiết kế tổng thể của ứng dụng.

Thêm CopyBlock vào dự án

Nếu muốn thêm chức năng sao chép vào các khối code, bạn có thể dùng CopyBlock được cung cấp bởi thư viện react-code-block. Để dùng thành phần này, bạn cần cài đặt thư viện react-copy-to-clipboard. Đây là cách thêm CopyBlock vào dự án:

Cài đặt thư viện react-copy-to-clipboard:

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';

Dùng thành phần CopyBlock trong code 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)}
/>

Kết quả: