Use textarea Element when Posting Codes

Sometimes when we want to post a code in a certain posts, we used blockquote. As you notice my past posts with codes are posted using the blockquote tag. And it doesn't look nice! Honestly, I want to change my posts with codes using textarea tag instead of blockquote but I'm too lazy to do it. :P

The <textarea> tag defines a multi-line text input control.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.-W3Schools

Anyway, this is a convenient way for your reader to copy the code by using <textarea> tag instead of just the blockquote. Here's the demo:

Click Me For Demo

First, from Dashboard > Template > Edit HTML then find ]]></b:skin> Paste this code above it,textarea{width:100%;max-width:600px;height:auto;background: #000;color:#fff}

Then find  </head> paste this code above it,

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js' type='text/javascript'/> <script type='text/javascript'> $(function(){ $(document).on('click','textarea',function(){ this.select(); }); $('textarea').attr('title', 'click to highlight'); $('textarea').attr('readonly', 'readonly'); }); </script>

We used a script to highlight all the text inside the textarea for simple copying , added title tag for the hint and attribute for readonly to avoid errors.

That's it! Preview, and if there is no error, save it!


When posting, all you have to do is switch to HTML tab use this format

<textarea>
your codes should be here.....
</textarea>

Final Words

It's more convenient to copy a code using textarea tag than using the blockquote tag. Although we can't differently "colorize" the text, but it is still much better.