Jump to content

Better mobile reading experience for code snippets in forum


abdus
 Share

Recommended Posts

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 ✓

Readable on large screens

Unreadable on small screens, text should not wrap ✘

photo5992124357910046740.thumb.jpg.dd30e352a3348bfd5a8afd70b7b05a4f.jpg

 

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

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

or GIPHY link

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...