# Is it possible to turn off code block wrapping?

**URL:** <https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801>\
**Category:** Help\
**Created:** [February 27, 2022, 4:51pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801 "2022-02-27T16:51:16Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![PaoloAmoroso](https://discuss.write.as/user_avatar/discuss.write.as/paoloamoroso/32/1659_2.png) [@PaoloAmoroso](https://discuss.write.as/u/PaoloAmoroso)\
**Post date:** [February 27, 2022, 4:51pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/1 "2022-02-27T16:51:17Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jakelacaze](https://discuss.write.as/user_avatar/discuss.write.as/jakelacaze/32/1223_2.png) [@jakelacaze](https://discuss.write.as/u/jakelacaze)\
**Post date:** [February 27, 2022, 6:21pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/2 "2022-02-27T18:21:43Z")

</div>

Does putting this in the CSS work?

```auto
pre {
    white-space: nowrap;
}
```

---

<div class="post-metadata">

**Author:** ![PaoloAmoroso](https://discuss.write.as/user_avatar/discuss.write.as/paoloamoroso/32/1659_2.png) [@PaoloAmoroso](https://discuss.write.as/u/PaoloAmoroso)\
**Post date:** [February 27, 2022, 6:26pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/3 "2022-02-27T18:26:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![PaoloAmoroso](https://discuss.write.as/user_avatar/discuss.write.as/paoloamoroso/32/1659_2.png) [@PaoloAmoroso](https://discuss.write.as/u/PaoloAmoroso)\
**Post date:** [February 27, 2022, 6:47pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/4 "2022-02-27T18:47:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![PaoloAmoroso](https://discuss.write.as/user_avatar/discuss.write.as/paoloamoroso/32/1659_2.png) [@PaoloAmoroso](https://discuss.write.as/u/PaoloAmoroso)\
**Post date:** [February 27, 2022, 8:00pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/5 "2022-02-27T20:00:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![PaoloAmoroso](https://discuss.write.as/user_avatar/discuss.write.as/paoloamoroso/32/1659_2.png) [@PaoloAmoroso](https://discuss.write.as/u/PaoloAmoroso)\
**Post date:** [February 27, 2022, 9:25pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/6 "2022-02-27T21:25:42Z")

</div>

I need [@help](https://discuss.write.as/groups/help) with this.

---

<div class="post-metadata">

**Author:** ![PaoloAmoroso](https://discuss.write.as/user_avatar/discuss.write.as/paoloamoroso/32/1659_2.png) [@PaoloAmoroso](https://discuss.write.as/u/PaoloAmoroso)\
**Post date:** [February 28, 2022, 7:11am UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/7 "2022-02-28T07:11:54Z")

</div>

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](https://paoloamoroso.writeas.com/markdown-test) 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](https://paoloamoroso.writeas.com/), 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.

---

<div class="post-metadata">

**Author:** ![matt](https://discuss.write.as/user_avatar/discuss.write.as/matt/32/2760_2.png) [@matt](https://discuss.write.as/u/matt)\
**Post date:** [February 28, 2022, 5:09pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/8 "2022-02-28T17:09:17Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![matt](https://discuss.write.as/user_avatar/discuss.write.as/matt/32/2760_2.png) [@matt](https://discuss.write.as/u/matt)\
**Post date:** [February 28, 2022, 5:12pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/9 "2022-02-28T17:12:41Z")

</div>

> [@PaoloAmoroso](#):
>
> By the way, after moving the anonymous post to the [blog](https://paoloamoroso.writeas.com/), 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.

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.

---

<div class="post-metadata">

**Author:** ![PaoloAmoroso](https://discuss.write.as/user_avatar/discuss.write.as/paoloamoroso/32/1659_2.png) [@PaoloAmoroso](https://discuss.write.as/u/PaoloAmoroso)\
**Post date:** [February 28, 2022, 6:40pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/10 "2022-02-28T18:40:57Z")

</div>

@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](https://write.as/arnov/bayesian-linear-regression-in-three-languages)).

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.

---

<div class="post-metadata">

**Author:** ![matt](https://discuss.write.as/user_avatar/discuss.write.as/matt/32/2760_2.png) [@matt](https://discuss.write.as/u/matt)\
**Post date:** [February 28, 2022, 6:49pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/11 "2022-02-28T18:49:56Z")

</div>

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.

````auto
```python
````

---

<div class="post-metadata">

**Author:** ![PaoloAmoroso](https://discuss.write.as/user_avatar/discuss.write.as/paoloamoroso/32/1659_2.png) [@PaoloAmoroso](https://discuss.write.as/u/PaoloAmoroso)\
**Post date:** [February 28, 2022, 7:03pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/12 "2022-02-28T19:03:29Z")

</div>

Doh, you’re of course right 😀

---

<div class="post-metadata">

**Author:** ![PaoloAmoroso](https://discuss.write.as/user_avatar/discuss.write.as/paoloamoroso/32/1659_2.png) [@PaoloAmoroso](https://discuss.write.as/u/PaoloAmoroso)\
**Post date:** [March 1, 2022, 7:11pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/13 "2022-03-01T19:11:55Z")

</div>

@matt You may be interested in [how researching a blog platform led me here](https://journal.paoloamoroso.com/the-challenges-of-picking-a-blogging-platform-for-technical-writing) and where wrapping code blocks fits in.

---

<div class="post-metadata">

**Author:** ![matt](https://discuss.write.as/user_avatar/discuss.write.as/matt/32/2760_2.png) [@matt](https://discuss.write.as/u/matt)\
**Post date:** [March 1, 2022, 7:45pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/14 "2022-03-01T19:45:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![everdimension](https://discuss.write.as/user_avatar/discuss.write.as/everdimension/32/3018_2.png) [@everdimension](https://discuss.write.as/u/everdimension)\
**Post date:** [June 18, 2023, 9:37am UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/15 "2023-06-18T09:37:08Z")

</div>

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:

```css
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)

---

<div class="post-metadata">

**Author:** ![PaoloAmoroso](https://discuss.write.as/user_avatar/discuss.write.as/paoloamoroso/32/1659_2.png) [@PaoloAmoroso](https://discuss.write.as/u/PaoloAmoroso)\
**Post date:** [June 18, 2023, 11:30am UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/16 "2023-06-18T11:30:57Z")

</div>

@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!

---

<div class="post-metadata">

**Author:** ![everdimension](https://discuss.write.as/user_avatar/discuss.write.as/everdimension/32/3018_2.png) [@everdimension](https://discuss.write.as/u/everdimension)\
**Post date:** [June 18, 2023, 2:43pm UTC](https://discuss.write.as/t/is-it-possible-to-turn-off-code-block-wrapping/4801/17 "2023-06-18T14:43:20Z")

</div>

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