Make reference labels look nicer?

[jacobbien]

Instead of showing up as ###"my-label"###, I was thinking it might be nice if the chunk could have a box around it and the label might be in the border. I think this can be done with some css. Here's some information about styling code chunks:

https://bookdown.org/yihui/rmarkdown-cookbook/chunk-styling.html

And here's some information about the sort of css that might be required:

https://stackoverflow.com/questions/45150781/placing-label-text-inside-the-border-of-a-text-input

[patrickvossler18]

Is this something like what you had in mind? This is just from prototyping using devtools in the browser but it is possible from an HTML and CSS point of view. This would likely require parsing the html file using something like xml2

[jacobbien]

Yeah that looks great! I wonder if there's a way in css to specify that we want a style applied when some content between tags starts with "###label###"? If so that might mean we don't need to change the tags themselves? Anyway, not sure if that's easier/harder than what you suggest in terms of altering the xml.

[patrickvossler18]

Yeah, that could work if we want to highlight the label like this:

We could do this by adding a class to the span when we create the id in add_chunk_label_hyperlinks: https://github.com/jacobbien/litr-project/blob/main/create-litr.Rmd#L1163. I'm not sure if we can

But if we want to have a border around the code, we need to wrap the tags for the code chunks with additional tags. Once we are doing that, I think it will be easier to manipulate xml instead of using regular expressions

[jacobbien]

Got it. I think the border around the code would be much nicer.