Is it possible to turn off code block wrapping?

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?

Does putting this in the CSS work?

pre {
    white-space: nowrap;
}

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

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

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.

I need @help with this.

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.

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

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

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.

@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

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

Doh, you’re of course right :grinning:

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

1 Like

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

1 Like