Improve visibility of code, kbd and clickable references in editor help

[Calinou]

This adds a background color for inline code, code blocks, keyboard shortcuts and clickable references (such as [member something]).

See godotengine/godot-proposals#4804.

Note: Not cherry-pickable to 3.x unless [bgcolor] is backported.

Preview

All descriptions are from the GraphNode class.

[akien-mga]

It would be great if the [codeblock] background could span the whole block and not be line by line. Otherwise it looks like inline code and is not as readable.

[Calinou]

It would be great if the [codeblock] background could span the whole block and not be line by line. Otherwise it looks like inline code and is not as readable.

Unfortunately, this can't be done unless we add [fgcolorblock] and [bgcolorblock] tags that always span the entire line. While godotengine/godot-proposals#4808 could bridge the gaps between lines, individual lines would retain their own width for the background color.

@bruvzg Any ideas on how to tackle this (ideally without adding new tags)?

[akien-mga]

Maybe we can use tables with a single cell for codeblocks? Table cells seem to support background colors.

This is some text.
Here's code:

[table=1]
[cell bg=#bbbbbb,]func _ready():
    pass[/cell]
[/table]

Not sure if we have documentation for the table/cell syntax, I read the RTL code to figure it out. Valid options for cell are bg=color1,color2 (I guess color1/2 used for alternating rows) and border=color.

[bruvzg]

It can be done without any RTL modification, by using table with single column:

	rt->push_table(1);
	rt->push_cell();
	rt->set_cell_row_background_color(bgcolor, bgcolor);
		// codeblock content
	rt->pop();
	rt->pop();

It's gonna cover it full background of the block if all code is added to a singe cell, or each line can be added as a cell and two colors used to get alternate odd/even row backgrounds.

[Calinou]

It can be done without any RTL modification, by using table with single column:

Done. Thanks for the tip 🙂

Is there a way to add padding to the table cell on all sides? I'd like to add a few pixels of padding so the highlight doesn't "touch" the edges of the text.

[akien-mga]

@Calinou You could make it a 3x3 table with thin first and last rows and columns (9-patch style), though that feels a bit convoluted.

Could maybe be possible to add a padding option to [cell] too.

Alternatively / longer term, it would be nice to have a proper [codeblock] tag in RichTextLabel that could do nice code formatting (and possibly syntax highlighting for GDScript), but that sounds like something that could make RTL a bit bloated. Also to better handle wrapping long lines as shown in the screenshot.

[Calinou]

Could this be merged as-is for now? I'm not sure about adding more rows and columns, as it may impact documentation page generation performance. I think it'd be better to add a padding option to [cell] instead.

[akien-mga]

Thanks!

[bruvzg]

Is there a way to add padding to the table cell on all sides? I'd like to add a few pixels of padding so the highlight doesn't "touch" the edges of the text.

Sorry, have not noticed it earlier, padding can be set with:

p_rt->set_cell_padding(Rect2(20,30,50,100)); // left, top, right, bottom