Posting code is not a good experience

[jaredatch]

Things are a bit weird on bbPress.org at the moment when it comes to posting code. Few things/comments to note.

The first thing is it seems any <pre> tags get stripped. So posting blocks of code, even using <code>, is weird because paragraphs get entered and it just looks off. Thats definitely an issue.

Secondly, the styling on code blocks (pre). I can't see what it looks like because its getting stripped, but we need to do some sort of nice styling for blocks off code. I'm going to post an image of a clean example.

I know Alex had a patch he was going to roll into SyntaxHighlighter that made it work with bbPress. Something like that would be nice as well.

Right now posting large chunks of code is not easy and can only be done using text mode. Should we maybe ad a "code" button to TinyMCE? How can we make this easier and more elegant?

Lastly, on bbPress.org we can't get to the profile edit screen that's in wp-admin (which is by design), however there is no way then for me to disable the TinyMCE editor. I post code in a lot of posts, so I'd just prefer to have an option to disable the fancy editor so I'm not having to toggle modes all the time.

Thoughts?

[jaredatch]

ugly block of code with <p>s being used

[jaredatch]

<p> all the things

[jaredatch]

a more ideal solution/style

[jaredatch]

Here's another example of code getting mangled http://bbpress.org/forums/topic/google-authorship/#post-122479

You can tell the author tried to use <code> and maybe even <pre> but it got broken into paragraphs.

[johnjamesjacoby]

I'll likely need to write something up, could even be a core bbPress patch. I think WordPress kses strips out code and pre tags for non-authors.

[johnjamesjacoby]

Fixed in r4604.

[Sadr]

Troublesome code posting is still an issue. See this topic for some tests and feedback:
​http://jmonkeyengine.org/forum/topic/configure-the-syntax-highlighting-script-to-use-regular-quotes/

• It's converting the double quote character ” into open and close quotes, which are then invalid if cut and pasted into code.
• It's still removing anything inside angle brackets from inside the code blocks.

This is a major issue for any code-centric forum, which there are a lot of.

We are currently using the "Crayon Syntax Highlighter" plugin to format code snippets. I am not aware of any other functional code highlighter plugin for bbPress.

[jaredatch]

Can you provide a gist/pastebin of all those snippets?

This way we can drop them in various installs and do some testing on the exact ones that you had issues with.

[johnjamesjacoby]

Moving to 2.3.1 to investigate.

[Sadr]

Replying to jaredatch:

Can you provide a gist/pastebin of all those snippets?

This way we can drop them in various installs and do some testing on the exact ones that you had issues with.

Hum, sure, I suppose this should do:

​https://gist.github.com/erlend-sh/5397555 - Test for quotes.

​https://gist.github.com/erlend-sh/5397661 - Test for angle brackets.

There might be more though. These are just the ones that we've encountered on a Java-centric forum. Thanks for investigating.

[jaredatch]

I've tested things out on bbp.org (which runs trunk) and here is what we know.

If you're trying to paste, escape, write, manage, etc any code in the Visual Editor mode there is a very high chance on post/save that the code will get altered or manipulated due to the mechanics of TinyMCE. Right now there isn't much we can do about that.

With that said, I am able to post those code snippets you provided in the normal/text mode without any issues at all, see ​http://cl.ly/image/2y3l0f0Y0a2M. This is using the markdown-related ` escaping method, no need to wrap in code or pre.

If you those snippets don't work even in text mode, then I suspect it might be a plugin applying some filtering.

[johnjamesjacoby]

Also seems to work when wrapped in normal code or pre tags, not just backticks.

Note that TinyMCE has this same problem in the visual editor when creating a new post or page, which is why there are numerous syntax highlighting plugins available out there.

This appears to be working adequately for 2.3. It's not super amazing great, but it's not hugely broken that I can see at the moment.

Moving to Future Release, if anyone wants to stab at improvements.

[Sadr]

I can't get the backticks to work, but the tests I've done with angled brackets are still not turning out well. Here's one done on testbp.org:
​http://testbp.org/discussion/topic/testing-code-posting/#post-8043

The code tags end up rendering the html instead of showing pure text. I've no idea why yours turned out different.

[jaredatch]

Try it again. testbp.org wasn't up to date.

See my test via ​http://testbp.org/discussion/topic/testing-code-posting/#post-8045

[Sadr]

That site is running on WordPress 3.6 now. That's not the current working version for bbPress and BuddyPress. If it's not working right on WP 3.5.1 then it's not currently working.

I actually tested 3.5.1 against 3.5.2(alpha) and 3.6(beta). It appears both 3.5.2 and 3.6 fixes this somehow. After I update to either of those two, new forum posts using angled brackets in code tags would correctly avoid rendering the HTML code inside the code tags. This only applied to posts made after the upgrade, though I could still go in and edit old posts and simply publish them again without making any changes, and they would now display correctly as well.

In conclusion, there's some fix in the trunk versions of WordPress that you guys are using that fixes this issue, but it's not present in the stable 3.5.1 yet. I should also note that, oddly enough, ordinary blog posts (on 3.5.2 or 3.6) would still render the HTML. Only bbPress gets fixed.

[johnjamesjacoby]

WordPress 3.5.2 is functionally identical to WordPress 3.5.1 regarding anything remotely close to do with any of this. Nothing in the 3.5 branch changes anything here.

[Sadr]

Did you try it?

[johnjamesjacoby]

Replying to Sadr:

Did you try it?

​Yes

[Sadr]

OK I can't consistently reproduce the issue with the angled brackets (in bbPress that is. WordPress code tag still renders content in angled brackets even with code tags applied).

There's still the issue of ​quotations being converted from this " to this ”. It's only on the front-end though. If I edit the post, the code-friendly " quotation is still present.

[Sadr]

Oh, turns out angled brackets is still a problem as well. I forgot that a tag like <em> is normally allowed formatting, so the rules for it might be different. I tested with some ​sample XML, and the angle brackets are not displayed. In fact, they're completely removed after the post is submitted.

[johnjamesjacoby]

Replying to Sadr:

Oh, turns out angled brackets is still a problem as well. I forgot that a tag like <em> is normally allowed formatting, so the rules for it might be different. I tested with some ​sample XML, and the angle brackets are not displayed. In fact, they're completely removed after the post is submitted.

Going to be tricky to fix. Basically, will need to kses around code blocks, and convert to entities within them. The current kses does some of this, but it will need to be smarter.

[johnjamesjacoby]

Basically fixed this over the course of the past 2 months. Closing as fixed and moving to 2.4.

[johnjamesjacoby]

In 5085:

Update CSS for code and pre tags to reduce scrollbars. See #2091.

[johnjamesjacoby]

In 5086:

When converting backticks to pre and code blocks, wrap pre's in new lines. Fixes inconsistent output between: the original posted content, formatted output, and editing content. See #2091.