Cách thêm tô sáng cú pháp vào khối mã trong React

Một trong những tính năng chính của blog lập trình là các khối mã. Bạn không phải định dạng chúng bằng cách sử dụng công cụ đánh dấu cú pháp, nhưng nó làm cho blog của bạn trông đẹp hơn rất nhiều nếu bạn làm như vậy. Nó cũng có thể cải thiện khả năng đọc mã của bạn.

Bài viết này sẽ hướng dẫn bạn cách sử dụng React-Cú pháp-highlighter để tô sáng các khối mã trong React. Bạn sẽ tạo một thành phần khối mã có khả năng làm nổi bật mã được chuyển đến nó bằng cách sử dụng cú pháp của ngôn ngữ được cung cấp.

Đánh dấu cú pháp với phản ứng-cú pháp-tô sáng

Công cụ đánh dấu cú pháp phản ứng cho phép bạn đánh dấu mã bằng React. Không giống như các công cụ đánh dấu cú pháp khác, trình đánh dấu cú pháp phản ứng không dựa vào ComponentDidUpdate hoặc ComponentDidMount để chèn mã được đánh dấu vào DOM bằng cách sử dụng risklySetInnerHTML.

Cách tiếp cận đó rất nguy hiểm vì nó khiến ứng dụng bị tấn công theo kịch bản trên nhiều trang web.

Thay vào đó, nó sử dụng một cây cú pháp để xây dựng DOM ảo và chỉ cập nhật nó khi có những thay đổi.

Thành phần sử dụng PrismJS và Highlight.js trong nền. Bạn có thể chọn sử dụng một trong hai để đánh dấu mã của mình. Nó rất dễ sử dụng vì nó cung cấp kiểu dáng độc đáo.

Thành phần phản ứng-cú pháp-tô sáng chấp nhận mã, ngôn ngữ và kiểu làm đạo cụ. Thành phần cũng chấp nhận các tùy chọn tùy chỉnh khác. Bạn có thể tìm thấy chúng trong tài liệu đánh dấu cú pháp phản ứng.

Sử dụng thành phần react-cú pháp-highlighter

Để bắt đầu sử dụng công cụ đánh dấu cú pháp phản ứng trong React, hãy cài đặt nó qua npm.

npm install react-syntax-highlighter 

Tạo một thành phần mới được gọi là CodeBlock.js trong Ứng dụng React của bạn và nhập phản ứng-cú pháp-tô sáng:

import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
const CodeBlock = ({codestring}) => {
return (
<SyntaxHighlighter language="javascript" style={docco}>
{codeString}
</SyntaxHighlighter>
);
};

Thành phần SyntaxHighlighter chấp nhận ngôn ngữ và kiểu để sử dụng. Nó cũng lấy chuỗi mã làm nội dung của nó.

Bạn có thể kết xuất thành phần trên như sau:

const App = () => {
const codeString = `
const Square = (n) => return n * n
`
return(
<CodeBlock codestring={codeString}/>
)
}

Điều quan trọng cần lưu ý là sử dụng React-Cú pháp-highlighter có thể tăng kích thước bản dựng của bạn, vì vậy nếu cần, bạn có thể nhập bản dựng nhẹ. Tuy nhiên, bản dựng nhẹ không có kiểu mặc định.

Bạn cũng sẽ cần nhập và đăng ký các ngôn ngữ bạn muốn bằng cách sử dụng registerLanguage chức năng được xuất từ ​​bản dựng sáng.

import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Thành phần này sử dụng Highlight.js để đánh dấu mã.

Để sử dụng PrismJS thay vào đó, hãy nhập nó từ gói phản ứng-cú pháp-tô sáng như sau:

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";

Đối với chế tạo ánh sáng lăng kính, hãy nhập PrismLight và đăng ký ngôn ngữ bạn đang sử dụng.

import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Sử dụng lăng kính có lợi, đặc biệt là khi tô sáng jsx vì trình tô sáng phản ứng không hỗ trợ đầy đủ.

Thêm số dòng vào khối mã

Bây giờ bạn đã biết cách đánh dấu một khối mã, bạn có thể bắt đầu thêm các tính năng bổ sung như số dòng.

Với phản ứng-cú pháp-tô sáng, bạn chỉ cần vượt qua showLineNumbers vào thành phần SyntaxHighlighter và đặt nó thành true.

<SyntaxHighlighter language="javascript" style={docco} showLineNumbers="true">
{codeString}
</SyntaxHighlighter>

Thành phần bây giờ sẽ hiển thị số dòng bên cạnh mã của bạn.

Sử dụng các kiểu tùy chỉnh trong thành phần của bạn

Mặc dù phản ứng-cú pháp-tô sáng cung cấp kiểu, đôi khi bạn có thể cần phải tùy chỉnh các khối mã của mình.

Đối với điều này, gói này cho phép bạn chuyển các kiểu CSS nội tuyến đến customStyle prop như được hiển thị bên dưới:

<SyntaxHighlighter language="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5px", backgroundColor: "#001E3C"}} >
{codestring}
</SyntaxHighlighter>

Khối mã được đánh dấu sẽ có bán kính đường viền tùy chỉnh và màu nền trong ví dụ này.

Tầm quan trọng của việc đánh dấu cú pháp

Bạn có thể sử dụng gói react-cú pháp-highlighter để tô sáng mã trong React. Bạn có thể sử dụng phiên bản nhẹ để giảm kích thước bản dựng và tùy chỉnh các khối mã bằng cách sử dụng phong cách của riêng bạn.

Làm nổi bật các đoạn mã giúp mã của bạn trông đẹp, cải thiện khả năng đọc và làm cho mã dễ tiếp cận hơn với người đọc.