Better mobile reading experience for code snippets in forum

[abdus]

Code snippets are very hard to read on small screens due to lack of white-space: pre CSS property on <pre> tags. This causes very weird text wrapping. Adding this allows code to scroll sideways, which also preserves the whitespace properly. 

Here's the problem and proposed change in action

Readable on large screens, overflow works ✓

Unreadable on small screens, text should not wrap ✘

 

Proposal: add white-space: pre on <pre> elements. See it in action

2017-04-05_20-18-03.mp4 (770KB)

or GIPHY link

[abdus]

Another improvement would be supporting some subset of markdown.
It's much easier to write code snippets in Github Flavored and Markdown Extra. They support fenced code with backticks, which allows you specify the language for syntax highlighting with backticks as well (```php for example). Having to fiddle with font settings to indicate inline code snippets is frustrating when you're able to just surround it with backticks in Markdown `like this`. 

A disadvantage would be the inability to use align/colors/font/size options, but they're distracting anyway and lack of only brings more consistency to the content structure.

https://github.com/timsayshey/Ghost-Markdown-Editor is a really good editor concept, you can put placeholders, then add images later