Hướng dẫn how do i display code snippets in html? - làm cách nào để hiển thị các đoạn mã trong html?

Thẻ trong HTML được sử dụng để xác định đoạn mã máy tính. Trong quá trình tạo các trang web đôi khi cần phải hiển thị mã lập trình máy tính. Nó có thể được thực hiện bởi bất kỳ thẻ tiêu đề cơ bản nào của HTML nhưng HTML cung cấp một thẻ phân tách đó là. & NBSP;

Thẻ mã là một loại văn bản cụ thể đại diện cho đầu ra máy tính. HTML cung cấp nhiều phương thức để định dạng văn bản nhưng thẻ được hiển thị với kích thước chữ cái, phông chữ và khoảng cách cố định.

Một số điểm về thẻ: & nbsp; 

  • Nó chủ yếu được sử dụng để hiển thị đoạn mã vào trình duyệt web.
  • TAG này tạo kiểu cho phần tử của nó để phù hợp với định dạng văn bản mặc định của máy tính.
  • Các trình duyệt web theo mặc định sử dụng họ phông chữ đơn vị để hiển thị

Syntax:  

 Contents... 

Các ví dụ dưới đây minh họa thẻ mã HTML.

Ví dụ 1: & nbsp; 

HTML

<html>

<body>

    <0>

2<4>

67>

9

    <1

<2

2<44>

    <40>

<4body>

<4html>

Output:

Hướng dẫn how do i display code snippets in html? - làm cách nào để hiển thị các đoạn mã trong html?

Ví dụ 2: & nbsp; 

HTML

<html>

<body>

    <0>

>8<4>

>8<3

>8<5

<6<7

<6<9

<6body1

<6<5

body4body5

Ví dụ 2: & nbsp;

>8<2

>8<44>

>4<40>

<4body>

<4html>

<6<2The program which is written inside the tag has some different font size and font type to the basic heading tag and paragraph tag.

Hướng dẫn how do i display code snippets in html? - làm cách nào để hiển thị các đoạn mã trong html?

Đầu ra: Chương trình được viết bên trong thẻ có một số kích thước phông chữ và loại phông chữ khác nhau cho thẻ tiêu đề cơ bản và thẻ đoạn văn.

 tag is used to
display code snippets because it always keeps the text formatting as it.

Lưu ý: TAG được sử dụng để hiển thị đoạn mã vì nó luôn giữ định dạng văn bản như nó. 

  • Trình duyệt được hỗ trợ: & NBSP;
  • Google Chrome 1
  • Cạnh 12
  • trình duyệt web IE
  • Firefox 1
  • Opera

Tìm bài viết đầy đủ ở đây.

Vì vậy, bạn muốn hiển thị các đoạn mã của mình trong HTML nhưng khi bạn đặt chúng trên trang web của mình, chúng chỉ biến mất trong hướng dẫn này, chúng tôi sẽ xem cách chúng tôi có thể hiển thị các đoạn mã trong HTML và các bước cần thiết để làm theo.

1. Mã hóa các ký tự HTML dành riêng<) or greater than (>) signs must be replaced in your text as the browser might confuse them with tags. Reserved characters in HTML must be replaced with character entities.

Bây giờ bạn có thể hỏi làm thế nào để chuẩn bị đoạn mã của tôi và thay thế tất cả các ký tự dành riêng?

Có nhiều trình chuyển đổi trực tuyến và bạn có thể sử dụng công cụ mã hóa HTML của chúng tôi tại FreeWebtoolKit.FreeWebToolkit.

Chỉ cần dán HTML đơn giản của bạn vào hộp công cụ:

Sau đó, nhấn nút mã hóa trên mạng để nhận HTML được mã hóa của bạn.

Bây giờ, bạn có mã được mã hóa, bạn đã sẵn sàng cho bước tiếp theo.

2. Đặt mã của bạn bên trong thẻ trước và mã

Thẻ HTML là viết tắt của văn bản được định dạng sẵn và như bạn có thể đoán, nó sẽ bảo tồn cả hai không gian và ngắt dòng của văn bản bên trong nó. Văn bản sẽ được hiển thị chính xác như được viết trong mã nguồn HTML. Điều quan trọng là sử dụng thẻ này xung quanh mã của bạn để bảo tồn định hướng của nó.

 tag stands for preformatted text and as you can guess, it will preserve both spaces and line breaks of the text inside it. The text will be displayed exactly as written in the HTML source code. It is
important to use this tag around your code to preserve its disposition.

Thẻ được sử dụng để xác định một đoạn mã máy tính sẽ hiển thị nội dung của nó trong phông chữ Monospace mặc định của trình duyệt. Hơn nữa, các công cụ tìm kiếm xử lý các thẻ khác nhau và bạn có thể tăng SEO trang web của mình bằng cách sử dụng chúng.

Chà, bây giờ chúng tôi đã quản lý để hiển thị đoạn mã của chúng tôi với bố trí ban đầu của nó. Nhưng nó là khá khó để đọc và phân biệt nội dung của nó. Có phải là một cách để làm cho nó hấp dẫn và dễ đọc hơn?

3. Làm thế nào để hiển thị các đoạn mã trong HTML với màu?

Để hiển thị các đoạn mã của chúng tôi với màu sắc, chúng tôi sẽ sử dụng thư viện JavaScript có tên là tô sáng JS.

Đánh dấu JS là một thư viện JavaScript được sử dụng cho cú pháp làm nổi bật cho web. Nó hỗ trợ 196 ngôn ngữ và 243 kiểu cùng với phát hiện ngôn ngữ tự động.

Hãy để thêm thư viện này vào trang web của chúng tôi. Trong phần đầu chỉ cần thêm tệp CSS trước thẻ đóng. tag.

Hãy để thêm thư viện này vào trang web của chúng tôi. Trong phần đầu chỉ cần thêm tệp CSS trước thẻ đóng.

Sau đó, trước khi thẻ đóng, thêm các mục sau:

Hãy để thêm thư viện này vào trang web của chúng tôi. Trong phần đầu chỉ cần thêm tệp CSS trước thẻ đóng.

hljs.highlightAll();

Sau đó, trước khi thẻ đóng, thêm các mục sau:

Và bây giờ mã của chúng tôi sẽ trông sạch hơn và dễ đọc hơn.

Cảm ơn bạn đã đọc, nếu bạn muốn có thêm nội dung như thế này, hãy theo dõi không gian này và kiểm tra trang web Công cụ trực tuyến miễn phí của chúng tôi.