Thứ Năm, 17 tháng 11, 2011

Đặt code trong khung trên bài viết của Blogger

Standard
Đặt code trong khung trên bài viết của Blogger

Một trong những cách đơn giản nhưng không kém chuyên nghiệp để đặt code nằm trên khung trong bài đăng của Blogger. Với cách làm này đoạn mã hiển thị sẽ trông dễ nhìn hơn và người đọc dễ sao chép khi muốn sử dụng.

CSS điều khiển thuộc tính khung hiện code:

Để hiển thị code bạn cần đặt chúng giữa hai thẻ mở <pre> và đóng</pre> trong bài viết của mình. Muốn đẹp hơn bạn có thể thêm khung bằng cách sử dụng các thuộc tính về màu chữ, màu nền, font chữ, đường viền, kích thước rộng và cao, thanh trượt, cách viền ... bằng cách thêm code CSS vào thẻ mở, ví dụ: <pre style="color: #333333; background: #999999; width: 100%; height: 50px; overflow: auto; padding: 10px;">.

Một cách chuyên nghiệp hơn chúng ta sẽ tạo ra một class mới và đặt chúng vào CSS của template (đặt vào bất kỳ vị trí nào giữa hai thẻ <b:skin><![CDATA[/* và ]]></b:skin> ). Việc làm này sẽ giúp bạn sử dụng khung hiển thị code thống nhất ở tất cả các bài viết có dùng khung và dễ chỉnh sửa thuộc tính khi muốn thay đổi. Ví dụ ở đây tôi tạo ra lớp pre-formatting có CSS như sau:


.pre-formatting{
  color: #333333;
  background: #999999;
  border: 2px solid #999999;
  overflow: auto;
  font-family: "Tahoma", Tahoma;
  padding: 10px;
}


Đương nhiên trong template nên bạn có thể sử dụng các biến lấy giá trị cho từng thuộc tính đã được định nghĩa trước đó. Ví dụ:
.pre-formatting{
  color: $textcolor;
  background: $bgcolor;
  border: 2px solid $bordercolor;
  overflow: auto;
  font: $headerfont;
  padding: 10px;
}


Cách sử dụng:

Để code xuất hiện mang thuộc tính của CSS đã lưu trước đó chúng ta sẽ sử dụng chế độ HTML để soạn bài và đặt code như sau:

<pre style="height: 100px;" class="pre-formatting">Code</pre>


Câu hỏi đặt ra ở đây là chúng ta đã dùng class pre-formatting, vậy tại sao phải thêm CSS điều khiển height (chiều cao của khung), có dư thừa chăng? Câu trả lời phụ thuộc vào đoạn code mà bạn dùng. Nếu đoạn code đó ngắn bạn chọn giá trị chiều cao khung nhỏ và ngược lại, không nhất thiết phải thêm vào CSS của template vì chúng ta không biết trước đoạn code mỗi lần dùng. Không dư thừa chút nào!

Cũng xin lưu ý bạn phải chuyển đổi các ký tự đặc biệt thành mã HTML (ví dụ: < thành < và > thành >) trước khi đặt giữa hai thẻ trên. Và mách nhỏ hãy lưu đoạn code đó vào Post Template (Mẫu đăng bài) trong Settings (Cài đặt) | Formatting (Đang định dạng) để không cần phải gõ mỗi lần dùng:



NHÀ CUNG CẤP DỊCH VỤ CHUYÊN NGHIỆP
PHÁT TRIỂN
WEBDESIGN - HOSTING - DOMAIN

0 nhận xét:

Đăng nhận xét