Tạo khung chứa code đẹp cho blogs

<form name="MyTextBoxForm"><input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all"/><textarea cols="59" name="MyTextBox" rows="18" wrap="on" style="background:#eee; color:#464646; border:1px #A0C4EA dashed;">NỘI_DUNG_CODE</textarea> </form>

DEMO cung la khung mình chụp trong bài này
Phần tùy chỉnh như sau:
wrap="on" - Trong một dòng chữ dài quá khung sẽ hiện thanh trượt kéo ngang qua.
wrap="off" - Nhiều dòng chữ quá số dòng khung quy định sẽ hiện thanh trượt kéo xuống.
rows="18" - Số dòng trong khung chứa code.
cols="59" - Bề rộng khung chứa code.


và 1 kiểu code khác cũng làm tương tự như đoạn code trên

<div style="border-right: gray 1px solid; padding-right: 4px; padding-left: 4px; font-size: 8pt; border-top: gray 1px solid; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, &#39;Courier New&#39;, courier, monospace; background-color: #f4f4f4">
  <pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">noi dung code</pre>
</div>

Ok trên đây là code khung chứa code bài viết đẹp cho blogspot. Chúc các bạn thành công!

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

TÁC GIẢ : Unknown

Hi. I’m Designer and CEO/Founder of ThemeXpose. I’m Creative Web Designer, UI/UX Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.