• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2026 Replies
  • 331 Replies
    1928 Replies

Text Box for Blogger for pasting codes in blogger

User avatar
Master M1nd
Top Poster
Posts: 82

Text Box for Blogger for pasting codes in blogger

Sun Nov 03, 2013 6:50 pm

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/

User avatar
comathi
Coding God
Posts: 1242

Re: Text Box for Blogger for pasting codes in blogger

Sun Nov 03, 2013 9:47 pm

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

User avatar
Master M1nd
Top Poster
Posts: 82

Re: Text Box for Blogger for pasting codes in blogger

Mon Nov 04, 2013 10:21 am

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 ?

User avatar
comathi
Coding God
Posts: 1242

Re: Text Box for Blogger for pasting codes in blogger

Mon Nov 04, 2013 12:15 pm

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.

User avatar
Master M1nd
Top Poster
Posts: 82

Re: Text Box for Blogger for pasting codes in blogger

Mon Nov 04, 2013 4:45 pm

oh yeah thanks :D

Post Reply

Return to “Help & Support”