Is it possible to turn off code block wrapping?

Help
1

Is it possible to turn off line wrapping for source code blocks, in such a way the lines aren’t broken and the blocks can be scrolled horizontally?

I’m not sure Markdown provides any options, but it may be possible via CSS. Any advice on how to do that?

2

Does putting this in the CSS work?

pre {
    white-space: nowrap;
}
3

Thanks but it unfortunately doesn’t work, text lines still wrap.

4

Setting white-space: pre doesn’t work either.

5

Thinking the currently set theme might be an issue I tried removing the code of the one I use, Riley. But code blocks still wrap.

6

I need @help with this.

7

It turns out the Riley theme renders code blocks with a proportional font — and it doesn’t render MathJax. I was fooled because I published a test post anonymously at first, then moved it to my blog. I had no choice but to revert to the default theme.

By the way, after moving the anonymous post to the blog, I can find it only on the blog itself, not in the lists of posts at https://write.as/me/c/ and https://write.as/me/posts/. So I can’t edit or delete the post. I may delete the blog (it’s new and has just one post) and re-create it, but I don’t know whether I can re-use the name and URL.

8

Just tested and this should work for you, @PaoloAmoroso:

article pre code {
    white-space: pre !important;
}
article pre {
    overflow-x: scroll;
}
9

So, the best way to manage your posts is always from your Blogs page (https://write.as/me/c/). If you click on your blog there, you’ll be able to hover over your post and find the edit, delete, etc. options.

10

@matt Thanks a million, that CSS snippet works perfectly. I’ll experiment with other themes to see which ones preserve the monospace font and wrapping setting of code blocks, and how to customize them (e.g. I’ve seen a Write.as blog with syntax highlighting).

As you explained, I found how to manage the existing post. I initially didn’t realize I had to hover over the post’s title area.

Many thanks also to @jakelacaze who, on Reddit, made me realize Write.as is a good match for my needs. I created a trial account to check out the platform but run into the code wrapping issue, which seemed a deal breaker. Now I’m ready to purchase a Pro subscription.

2 Likes
11

That’s really great to hear! We’ll have easier ways to manage your posts soon, by the way.

For the syntax highlighting, that’s all built-in, no matter what theme you’re using! While writing a post in the Plain Text editor, you can simply add the language name after the three backticks that start your code block, e.g.

```python
12

Doh, you’re of course right :grinning:

13

@matt You may be interested in how researching a blog platform led me here and where wrapping code blocks fits in.

1 Like
14

Absolutely, thanks for sharing! I always love reading these posts – it’s very insightful.

1 Like
15

Hi @PaoloAmoroso!

I am also researching blogging platforms and my concerns have been very similar to yours. Code block wrapping has also been a deal breaker.

Thanks for publishing your journey.

I read a couple of your articles to see how it feels reading a write.as blog.

About the CSS snippet above, I’d suggest one small improvement:

article pre {
  overflow-x: auto; /* instead of "scroll" */
}

This way, code blocks that do not require overflow will not have an unnecessary scroll track at the bottom (you may not see it if you’re using a mac with default settings for scroll behavior)

16

@everdimension I’m on chromeOS and I don’t see the scroll track either under similar circumstances. But I implemented your tweak anyway to provide the best experience over the widest variety of browsers. Thanks!

17

Ah interesting, didn’t know ChromeOS was doing that too