Cách bắt chước <pre> với <div>

18

Tôi đang xuất bản mã python trên một trang web (đó là CMS). Tôi có một tập lệnh python đọc bất kỳ tập lệnh python nào và tạo một HTML có màu cú pháp từ nó. Sau đó, tôi sao chép / dán HTML này vào cửa sổ chỉnh sửa CMS.

Vấn đề là kịch bản tô sáng cú pháp python của tôi sử dụng <pre>thẻ để giữ các tab / khoảng trắng khá quan trọng trong python. CMS, tuy nhiên, vì một số lý do không rõ ràng, sẽ xóa <pre>thẻ. Quản trị viên nói với tôi rằng tôi nên sử dụng <div>thay vì <pre>. Bạn có thể giúp tôi trong việc tạo kiểu <div>để giữ định dạng không gian wihte không?

html css

— tnorgd
nguồn

Câu trả lời của John là tốt cho câu hỏi cụ thể được hỏi, mặc dù điều này làm giảm ngữ nghĩa của nội dung của bạn một chút. Về việc CMS tước thẻ trước, một số ứng dụng có cài đặt chỉ định HTML nào được phép trong nội dung. Nếu bạn đăng nhiều văn bản được định dạng trước, có thể đáng để yêu cầu quản trị viên của bạn xem xét điều chỉnh nếu nó tồn tại cho ứng dụng của bạn, thay vì yêu cầu bạn sử dụng các cách giải quyết tùy ý (thẳng thắn).

— Su '

24

Bạn có thể làm điều đó với white-spacequy tắc CSS :

div
{
  font-family: "Courier New", monospace;
  white-space: pre;
}

Các phông chữ được bao gồm trong quy tắc đó làm cho mỗi ký tự có cùng chiều rộng, định dạng chung cho văn bản trong <pre>thẻ.

Hãy nhớ rằng điều này sẽ làm cho tất cả các <div>thẻ của bạn hoạt động theo cách này. Lý tưởng nhất là bạn sẽ gán cho các <div>thẻ đó một lớp chỉ ảnh hưởng đến những thẻ bạn muốn bắt chước <pre>. Cái gì đó như:

div.code
{
  font-family: "Courier New", monospace;
  white-space: pre;
}

Hoặc, tốt hơn nữa, sử dụng <code>thẻ nếu nó không bị tước bởi CMS của bạn. Nó hoạt động như <pre>thẻ nhưng đúng về mặt ngữ nghĩa để hiển thị mã.

— John Conde
nguồn

2

+1 để đề cập <code>và ngữ nghĩa. Lưu ý rằng <code>bao bọc khoảng trắng theo mặc định, vì vậy bạn cũng phải gán white-space:nowrapcho nó. Cũng <pre>là một yếu tố khối trong đó <code>là nội tuyến; vì vậy để bắt chước <pre>, display:blocknên được đưa ra.

— Jari Keinänen

Bỏ qua "Courier New", phông chữ mặc định khớp với trình duyệt trước của bạn chặt chẽ hơn.

— access_granted

4

Để định dạng DIVgiống như một PRE, bạn cần một white-space: pre;cho DIV. Ngoài ra, bạn nên sử dụng phông chữ đơn cách, như đã nêu trong câu trả lời đầu tiên.

Giải pháp white-space: nowrap;không đúng vì nó KHÔNG hiển thị các tab và vẫn sẽ thu gọn nhiều khoảng trắng (@John Conde).

nowrap: Chỉ định nowrap đảm bảo rằng các chuỗi khoảng trắng sẽ thu gọn thành một ký tự khoảng trắng, nhưng ngắt dòng sẽ bị triệt tiêu.
pre: Chỉ định trước đảm bảo rằng các chuỗi khoảng trắng sẽ không sụp đổ. Các dòng chỉ bị phá vỡ tại các dòng mới trong đánh dấu (hoặc tại các lần xuất hiện của "\ a" trong nội dung được tạo).

từ: http://reference.sitepoint.com/css/white-space

— phí
nguồn

1

Bạn đúng về giá trị của white-spacenên prevà không nowrap. Tôi đã sửa câu trả lời của mình.

— John Conde