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

Bạn cũng thêm một đoạn CSS điều khiển hiển thị code như trên nhưng để chúng đi kèm thẻ pre hoặc code

  pre, code{ color: $textcolor; background: $bgcolor; border: 2px solid $bordercolor; overflow: auto; font: $headerfont; padding: 10px; } 

Khi sử dụng trong post chúng ta sẽ đặt code theo một trong hai cách:

... code ...

Hoặc:

  ... code ... 

Với cách này người ta có thể dùng hình ảnh đánh số thứ tự làm nền để đoạn code hiển thị trông đẹp hơn. Bạn có thể chép đoạn code sau mà tôi đang dùng cho template của mình.

pre, code { display:block; font: 1em 'Courier New', Fixed, monospace; font-size : 100%; color: #666666; background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfIJN6COEmeRI1UkUG2fuCbGGCaq90xizL9PR05TIMm-8NcWqS4w1vZKUd_aTLcD2cuo4wqO9OReGwbmw8Ds0vvfQN91hujeJbKsn-o3ueiVsqiYxmXb3WOU1fbETbm6vvBlJqXQGyPFw/s320/vusteven+%25282%2529.jpg) no-repeat left top; overflow : auto; text-align:left; border : 1px solid #99cc66;    padding : 0px 20px 0 30px; margin:1em 0 1em 0; line-height:17px; }