Công cụ tạo khung chứa code

1_Công cụ tạo Css cho khung chứa code thêm Gradient Background

Code Frame Dimensions TTP © 2014
Height:	px (pixels) /***khi vượt quá chiều cao sẽ xuất hiện scrollbar**/
Width:	Percent Pixels
Styles
Background Color:	#   [ More Colors...]
Gradient Background:	> None Black 3D #1 Black 3D Brown Red 3D Brown 3D Grey Blue 3D Wax 3D #1 White 3D #2 Olive 3D #2 Wax Flat White 3D Thêm Gradient vào background
Text Size:	8pt 9pt 10pt 12pt 14pt 16pt 18pt 22pt
Text Style & Weight:	Italic Bold
Text Color:	#   [ More Colors...]
Text Alignment:	Left Center Right Justified
Font Family:	Arial Helvetica Verdana Tahoma Times Roman Georgia Garamond Cursive Consolas Monospace
Padding:	0px 5px 8px 10px 15px 20px
Border Width:	0 pixels 1 pixel 2 pixels 3 pixels 4 pixels 5 pixels 6 pixels 10 pixels
Border Style:	Solid Dashed Dotted Double Groove Ridge Inset Outset None
Border Color:	#   [ More Colors...]
Border Radius:	2px 5px 10px 15px None
Add:Border-Left	2px 3px 4px 5px None solid #   [ More Colors...]
Contents Code here( only for Demo):
Text on Code Frame:	/*****Code only Demo*****/ $(function() { $('a').click(function() { $('body').remove(); // Whaatt??!!!! }); });
Generated code: Copy and paste Css code into'style'tag.
<!-- HTML Codes by Testtem... --> <style type="text/css"> code{ font-family:Consolas; } pre{ background-color:#F2F9FF; height:120px;width:96.5%; font-size:10pt;color:#2682B3; padding:10px;text-align:left; border:1px solid #E3E3E3; border-left:4px solid #E3E3E3; overflow:auto;white-space:pre } </style> <pre><code> /*****Code only Demo*****/ $(function() { $('a').click(function() { $('body').remove(); // Whaatt??!!!! }); }); </code></pre>

Khi chọn màu trong color_picker các bạn phải click vào để submit

2_Thêm tag cho khung chứa code:

^↑Ảnh Demo

_Nếu muốn thêm tag cho khung chứa code như ảnh trên ta thêm <css> vào thẻ style:

Css

pre[rel] {
    padding-top: 15px;
}
pre[rel]:before {
    content: attr(rel);
    font: normal 12px/22px Arial, Sans-Serif;
    color: white;
    background-color: #369;
    padding: 0 10px;
    margin: 0 8px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}
/*Thay đổi màu cho thuộc tính REL**/
pre[rel="HTML"]:before{background-color:#336699}
pre[rel="CSS"]:before{background-color:#9999DD}
pre[rel="Javascript"]:before{background-color:#963}

Và trong thẻ body ta dùng cấu trúc như bên dưới:

Html

<pre rel="Html"><code>
   Nội dung code
Nhập nội dung code đã được mã hóa ở đây
</code></pre>

Html có thể thay thế bằng: Css , Javascript tùy nội dung code.
Hoặc bạn có thể dùng Công cụ  mã hóa và thêm "rel" tag

Bạn có thể test thử trên Test Html Editor
Link to this page:
<a href="http://testtemplatekhoi.blogspot.com/2014/12/cong-cu-tao-khung-chua-code.html">Công cụ tạo khung chứa code</a> from testtemplatekhoi.blogspot.com

Share on Google Plus

About Testtem