Bad formatting of code in module input description

App Building
, ,
1

goal: to format code inside the description/tooltip for inputs of a module
actual behavior:

image
image1714×668 140 KB

here's the source for the bboxes input description:

array of objects with keys: l, t, w, and h (left, top, width, and height)

recommended query for minimum total data  size passed into module:
```sql
select
  round(bbox_left::numeric, 3) as l,
  round(bbox_top::numeric, 3) as t,
  round(bbox_width::numeric, 3) as w,
  round(bbox_height::numeric, 3) as h
from rekog
limit 40
˙```
2

Hello @trz-justin-dev!

Wow that font is very odd, thanks for sharing this I haven't seen anything like that from a markdown before :sweat_smile: What type of image component are you using and which version of retool are you on? I am going to try to reproduce this.

What is your goal for how the code snippet inside the triple ` to look? Have you tried double or single instead of triple?

3

hi @Jack_T !

The component is actually a module, and then inside the module i'm just doing an HTML frame with an <img... tag and (overly-complicated CSS) to zoom in to a selected bounding boxe upon hovering over the image.

I believe this formatting goes badly regardless of the module implementation though.

safari version: 17.1.2 (19616.2.9.11.12)
retool version: v3.53.0-432fed2 (Build 172663)

do note that i just copied the retool version now, and it's likely to have been a different version back when i reported this bug

goal for how it should look was something like:

select
  round(bbox_left::numeric, 3) as l,
  round(bbox_top::numeric, 3) as t,
  round(bbox_width::numeric, 3) as w,
  round(bbox_height::numeric, 3) as h
from rekog
limit 40

thanks for your help!

4

Thanks for the information!

When you publish the app and visit the site, are you able to inspect the page and use chrome dev tools to see what CSS is being applied to the SQL query text in the description/tooltip?

I would say, if you are able to find the CSS class/ID for the description/tool tip try to add into the HTML frame's CSS to grab the entire description and override the style being applied.

Can you export your app so we can try to reproduce it and see where in the CSS there might be an issue changing the triple back tics are styled? Thank you!