Page 1 of 1

Text Box for Blogger for pasting codes in blogger

Posted: Sun Nov 03, 2013 5:50 pm
by Master M1nd
I want Text Box for my blogger in which i can post Html - CSS codes and user's can copy them.
Example = http://3.bp.blogspot.com/-OhvKmLgY-O4/U ... g+code.png

My Image Link = http://1.bp.blogspot.com/-i3AX6FFu9N8/U ... logger.png



I want that If the code is small. It should automatically become like this = http://1.bp.blogspot.com/-RYmQ9CRKiVw/U ... l+code.png

and If the code is long, it should automatically be like this = http://3.bp.blogspot.com/-OhvKmLgY-O4/U ... g+code.png

When i try to make it and i paste the code in it, it become horrible, you can see = http://1.bp.blogspot.com/-CP8_CBwHwMk/U ... please.png


You can see on JsFiddle that what's actually happening to me
http://jsfiddle.net/e5nHr/

Re: Text Box for Blogger for pasting codes in blogger

Posted: Sun Nov 03, 2013 8:47 pm
by comathi
The reason why it was overflowing was because your image was too small, and your div was larger than your image.

Anyway, I basically remade what you wanted to do in the first place, without using a big image (just a small one for the sidebar) and fixing the overflow problem.

You can check it out here: http://jsfiddle.net/aDm9R/3/

So basically, you have a div element of class "codeblock" (I'm using classes so you can have more than one codeblock) and inside of it you have a <pre> </pre> tag, which means everything between those two tags will appear exactly as they are entered in the code.

The only image used is for the sidebar, and is 35px wide by 100px high. You can reuse that one if you like, or make your own and customize the code block cooll;

Edit: just for fun, I've also integrated Google's code prettyfier, so code in your <pre> tags will be colored

Re: Text Box for Blogger for pasting codes in blogger

Posted: Mon Nov 04, 2013 9:21 am
by Master M1nd
Thank you so much! loove;
Last night i also posted same question in STACKOVERFLOW and someone replied
and he says this = http://jsfiddle.net/fUaXL/

I think yes that's good, but i come here to check any one answer my question or not! but you answer it, It is exactly the same what i want. Thank you So Much! +REP ADDED!

once again thank you! Going to use it ^_^ .
Well I use it and when i paste any html or any code
It just Load it!
I only want to show the code so that others can copy, But it loads the code . How can i fix it :D ?

Re: Text Box for Blogger for pasting codes in blogger

Posted: Mon Nov 04, 2013 11:15 am
by comathi
Ahh yes, I knew this would happen lol. The problem with putting HTML code inside <pre> tags is that the HTML gets rendered anyway.

To solve this, you should replace all the "<" characters with "<" and all the ">" characters with ">". Do that for the code inside the <pre> tags only.

Re: Text Box for Blogger for pasting codes in blogger

Posted: Mon Nov 04, 2013 3:45 pm
by Master M1nd
oh yeah thanks :D