Hướng dẫn display formatted code in html - hiển thị mã định dạng trong html

Question

Bạn có thể bao gồm các ví dụ mã trong HTML của bạn bằng cách sử dụng thẻ. Điều này tự động sử dụng một phông chữ đơn sắc và nhãn hiệu của chúng tôi là mã của chúng tôi như là gì.

Nội dung chính Show

Tạo kiểu cho khối mã
Hãy nhớ mã hóa các thực thể HTML của bạn !!
Làm thế nào mã nguồn hiển thị trong trang HTML?
Làm nổi bật mã nguồn
JavaScript để thoát khỏi các ký tự dành riêng HTML

HTML

Giả sử chúng tôi muốn hiển thị mã CSS này trên trang của chúng tôi:

p { color: red; }
code { background-color: #eee; }

Dưới đây là một ví dụ về HTML mà chúng tôi đặt trong trang của chúng tôi để hiển thị nó:

<pre>
  <code>
    p { color: red; }
    body { background-color: #eee; }
  </code>
</pre>

Chúng tôi sử dụng thẻ để chỉ ra rằng văn bản của chúng tôi thực sự là mã. Chúng tôi sử dụng thẻ vì trong trường hợp này, chúng tôi thực sự muốn trình duyệt để hiển thị không gian trắng mà chúng tôi hiển thị. Điều này cho phép mã được đặt cách vị trí đúng.

Tạo kiểu cho khối mã

Để hiển thị mã đúng cách và theo cách dễ đọc, chúng ta cần tạo kiểu cho khối. Trang này sử dụng các kiểu CSS sau để hiển thị khối mã:

pre code {
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  padding: 20px;
}

Bạn có thể tạo kiểu cho các khối mã của bạn theo cách bạn thích. Tài sản quan trọng cần nhớ ở đây là display: block;. là phần tử HTML thực sự và nội tuyến. Để hiển thị nó trong một khối đẹp (như trên trang này), chúng tôi sử dụng thuộc tính CSS này để bảo nó hoạt động như một khối.

Hãy nhớ mã hóa các thực thể HTML của bạn !!

If you want to use a code example that includes HTML, you must use HTML entities for your < and >. If you don't do this, it will be interpreted as actual HTML.

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

programming html HTML code HTML code editor html tag