Hướng dẫn html tag show source code - thẻ html hiển thị mã nguồn

Trong bài đăng này, chúng tôi sẽ xem xét một số thư viện JavaScript phổ biến có sẵn để làm nổi bật cú pháp. Cú pháp làm nổi bật là rất quan trọng nếu muốn hiển thị mã trong trang web của bạn. Cú pháp làm nổi bật và định dạng là làm cho mã của bạn dễ đọc hơn. Syntax làm nổi bật chủ yếu được sử dụng bởi các trang web hướng dẫn lập trình để hiển thị mã. Trong bài đăng này đầu tiên, chúng ta sẽ thấy cách hiển thị mã nguồn cho các ngôn ngữ khác nhau trong trang web và sau đó xem một số thư viện JavaScript phổ biến được sử dụng để làm nổi bật mã được hiển thị của chúng tôi.

Làm thế nào mã nguồn hiển thị trong trang HTML?

Là nhiều cách hiển thị mã nguồn thô trong các trang web. Nhưng chúng tôi cần một cách được hỗ trợ bởi tất cả các trình duyệt và tất cả các phiên bản của HTML.

Tags thích, và không được chấp nhận. Hiển thị thẻ bằng cách sử dụng các thẻ đó là cách tốt nhất để hiển thị mã nguồn thô. Nhưng bây giờ chúng tôi có các lựa chọn thay thế khác.

Bây giờ một ngày trang web hiển thị mã nguồn bằng cách sử dụng, hoặc.

Hãy để xem cách chúng ta có thể hiển thị mã nguồn bằng cách sử dụng

Bảo tồn cả không gian và ngắt đường. Chúng tôi thậm chí còn phải thoát khỏi nhân vật dành riêng HTML. Để tìm hiểu thêm về các thủ thuật thẻ theo liên kết này. Nhược điểm của việc hiển thị mã theo cách này là mã bên trong TextArea không thể được tô sáng.

Bây giờ, hãy để xem cách chúng ta có thể hiển thị mã nguồn bằng cách sử dụng và thẻ.

Bảo lưu cả không gian và ngắt đường. Tag chỉ cung cấp lựa chọn phông chữ thích hợp để hiển thị mã nguồn. Nhưng chúng ta phải thoát khỏi các ký tự dành riêng cho HTML cho mã mà chúng ta muốn được hiển thị. Đây là cách ưa thích để hiển thị mã trong các trang web.

Làm nổi bật mã nguồn

Chúng ta có thể sử dụng các biểu thức chính quy JavaScript để xác định cú pháp và từ khóa ngôn ngữ lập trình cụ thể và sau đó làm nổi bật chúng. Nhưng thay vì thực hiện nó theo cách thủ công, nó luôn luôn tốt hơn khi sử dụng các thư viện JavaScript sẽ tiết kiệm thời gian và giúp phát triển nhanh chóng.

Hai thư viện phổ biến nhất để làm nổi bật mã nguồn được hiển thị là nổi bật và lăng kính

Đánh dấu có thể tự động phát hiện ngôn ngữ lập trình từ trang web của chúng tôi. Nổi bật hỗ trợ hơn 70 làm nổi bật ngôn ngữ lập trình. Cả hai đều có giá trị và sự sụp đổ của họ.

Chúng tôi phải chọn một trong hai cho các dự án của chúng tôi. Vì vậy, yêu thích cá nhân của tôi là nổi bật.

Hãy cùng xem một ví dụ bằng cách sử dụng điểm nổi bật:

Trong mã trên Hightlight.js tự động phát hiện ngôn ngữ lập trình được đặt bên trong ... Vấn đề với mã trên là chúng ta vẫn phải thoát khỏi các ký tự dành riêng HTML. Chúng ta có thể có các ký tự mã thoát khỏi phía máy chủ, tốt hơn là thoát khỏi các ký tự bằng tay.

JavaScript để thoát khỏi các ký tự dành riêng HTML

Trong bản demo trên, tôi đã nói rằng chúng ta phải thoát khỏi phía máy chủ ký tự. Bạn phải tự hỏi tại sao chúng ta không thể thoát khỏi phía khách hàng CNTT bằng cách sử dụng JavaScript.

,, vv không thể được sử dụng nhiều lần trong tài liệu HTML. Ví dụ thứ hai của các thẻ này sẽ được trình duyệt tự động xóa. JavaScript có thể truy cập và thoát chỉ sau khi các yếu tố này có mặt trong DOM. Một DOM sẽ có tất cả nhiều hơn một trường hợp, v.v. Vì vậy, chúng tôi đã giành được quyền truy cập vào các mã HTML này và do đó không thể thoát và hiển thị nó. Đây là vấn đề nếu chúng ta muốn thoát khỏi ngôn ngữ HTML. Đối với các ngôn ngữ khác, có nhiều vấn đề khác.

Hãy cùng xem một ví dụ về việc trốn thoát bằng cách sử dụng JavaScript

Sự kết luận

Vì vậy, chúng ta nên sử dụng và thẻ để hiển thị mã nguồn thô. Và tất cả mã với các ký tự được đặt trước HTML nên được thoát khỏi phía máy chủ. Bạn có tùy chọn để lựa chọn giữa Prism và các thư viện nổi bật. Hãy thích và chia sẻ.

Ngày 7 tháng 4 năm 2014