# Rich Text Code Wrapping

**URL:** <https://community.weweb.io/t/rich-text-code-wrapping/3100>\
**Category:** How do I?\
**Created:** [June 17, 2023, 9:20pm UTC](https://community.weweb.io/t/rich-text-code-wrapping/3100 "2023-06-17T21:20:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![BuildLikePeter](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/buildlikepeter/32/2674_2.png) [@BuildLikePeter](https://community.weweb.io/u/BuildLikePeter)\
**Post date:** [June 17, 2023, 9:20pm UTC](https://community.weweb.io/t/rich-text-code-wrapping/3100/1 "2023-06-17T21:20:49Z")

</div>

I have a rich text element that contains formatted code using the triple backtick formatting (```python…).

I am having an issue that this code is not wrapping properly on the front end.

Is there a way to address this?

 ![Screenshot 2023-06-17 at 2.20.40 PM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/431182cba88779e6c9458c9e6cbaa9148b9473a9.png)

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [June 19, 2023, 2:26pm UTC](https://community.weweb.io/t/rich-text-code-wrapping/3100/2 "2023-06-19T14:26:33Z")

</div>

Hi @BuildLikePeter 👋

A couple of questions.

1- are you using the Rich text or Rich text input?

 ![CleanShot 2023-06-19 at 16.23.07@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/13c94599df9481e3871512ba6a34f66ccdbb4f8e.png)

2- could you go on the element in the navigator and show us the various CSS styles that are applied?

For example here I’m on a Rich text element and I can see the text is displayed differently when I play around with the width or padding of the element:

![CleanShot 2023-06-19 at 16.24.06](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4f59a8a70f3d542d2930de2a340252cdc097dcb3.gif)

---

<div class="post-metadata">

**Author:** ![BuildLikePeter](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/buildlikepeter/32/2674_2.png) [@BuildLikePeter](https://community.weweb.io/u/BuildLikePeter)\
**Post date:** [June 19, 2023, 7:23pm UTC](https://community.weweb.io/t/rich-text-code-wrapping/3100/3 "2023-06-19T19:23:05Z")

</div>

I am using the Rich Text Element. And using the triple back tick markdown code block notation. I tried it with the \< code \> \< / code \> notation and it wraps. But the text is coming from an API that uses the markdown version so I can’t manually adjust it.

Here is another example:

 ![Screenshot 2023-06-19 at 12.18.53 PM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/84f03a0ca49a7373c5ffe970ab1cb3662eebb9be.png)

And here are the settings

 ![Screenshot 2023-06-19 at 12.21.06 PM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/5af7f3dabde8960eaba86c58c8cb304ee5bdbe09.png)

 ![Screenshot 2023-06-19 at 12.21.48 PM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/95520649b2a8927d3dbe8cd904de70da35510950.png)

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [June 22, 2023, 3:22pm UTC](https://community.weweb.io/t/rich-text-code-wrapping/3100/4 "2023-06-22T15:22:31Z")

</div>

Ok, my first recommendation would be to set the width property to `auto` but I’m guessing you chose a fixed width of `350px` because you want nice space on the left and right of the text 🙂

So the other (quick & dirty) solution I can think of is to:

- place the rich text element inside a container
- have 100% width on the rich text element
- and your 350px width on the container
- set a “Scroll” or “Auto” overflow on the container:

 ![CleanShot 2023-06-22 at 17.16.48@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/22643f677c55176c08c2441b89a18742e5d7cc18.png)

I realize this is not ideal in terms of user experience so will investigate further with the tech team…

Can you tell me more about how you used the \< code \> \< / code \> notation to make it wrap ? (I’m thinking perhaps we could use a formula to change the backquotes into tags when binding the original markdown to the element)

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [June 22, 2023, 4:02pm UTC](https://community.weweb.io/t/rich-text-code-wrapping/3100/5 "2023-06-22T16:02:42Z")

</div>

Yes I think you can do it with javascript, when you bind the variable you can use this snippet :

````auto
return myVar.replaceAll("```python", "<code>").replaceAll("```", "</code>")

````