1

Pre tag without the prettyprint class

Pre tag with the prettyprint class

When I paste (copied from sublime text) code into a 'contenteditable' pre tag it appears fine. When it's saved to a database, pulled back down and the 'prettyprint' (google-code-prettify) class is added it seems to add a bunch of random spaces. Any ideas why?

Liam McCabe
  • 53
  • 2
  • 8
  • How do you save it? The code has issues with WP for instance. – Wrikken Jan 25 '14 at 00:35
  • The parent div is posted to the server like so: $.trim($('.post-body').html()). The pre tag & contents appear as it was pasted after retrieved from the database. It's only when the class is added, it seems to mess up. – Liam McCabe Jan 25 '14 at 00:45
  • 1
    make sure your css pool is clean, rules on < span > or a pretty class name will bust stuff... – dandavis Jan 25 '14 at 00:57
  • That doesn't tell me a whole lot. And posting images instead of the code is hindering me somewhat ;) Is the code you get back from the server _byte_ for _byte_ the same? Or are there subtle alterations (zero-width whitespace, fancy quotes, etc. etc.). – Wrikken Jan 25 '14 at 00:57
  • Hm, wait: are you storing _rendered_ html (already 'pretty'), and asking javascript to re-prettify it _again_ maybe? – Wrikken Jan 25 '14 at 00:59
  • No the two strings are identical, plain text. An example output I'm getting is: http://snippi.com/s/j6xt8ik The gaps appear to be the same size as a tab character? – Liam McCabe Jan 25 '14 at 01:25
  • 1
    Hm, there's no whitespace in what you post there between them, only tags. If you use your browsers developer tools to inspect those spans, do they have any rules applied to them like margin or padding which should be applied? It seems to me the problem should be found in CSS somewhere. In a nutshell: like dandavis already mentioned. – Wrikken Jan 25 '14 at 11:38
  • It looks like the gaps show up where ` class="pun"` occurs. As dandavis suggests, maybe make sure there's no existing rule for `.pun`. – Mike Samuel Jan 25 '14 at 15:57
  • No styles are being overwritten. I've created an album which demonstrates a text selection issue which should shed some light on this situation: The top pre of each image shows code copied and pasted from sublime text, the bottom pre shows code copied and pasted from stackoverflow http://imgur.com/a/EWYyY I thought there might be an issue with trailing spaces in sublime, but alas there appear to be none :/ – Liam McCabe Jan 25 '14 at 16:46
  • I've found a 'solution'. Writing answer now. – Liam McCabe Jan 25 '14 at 16:55

1 Answers1

1

Code copied from Sublime Text that uses tab indents rather than space indents produces a resulting pre tag with erroneous spacing. This may be an issue with Sublime Text or how pre tags handles tab indentations, who knows?

The fix:

Check where it says "Indent Using Spaces" and the click "Convert Indentation to spaces" for good measure.

enter image description here

Liam McCabe
  • 53
  • 2
  • 8