Auto Highlight text between a backslash and curly bracket?

[ReaderGuy42]

Continuing the discussion from Any way to auto highlight specific text?:

The snippet in that thread works, but I can’t figure out how to auto highlight text that’s between a \ and a }.

This is specifically for LaTeX citations and footnotes, that look like this \cite[pagenumber]{Smith2020}.

Via the inspector I arrived at this:

.cm-s-obsidian span.cm-escape {
    background-color:green;
    color:white;
}

but this only highlights the very first letter after the \. Is there a way to highlight everything there?
I’d even settle for highlighting the text between the \ and the close square brackets, since I’m seeing in the inspector that } is only recognized as regular text.

[holroy]

Could you give a slightly larger example of where you use this? Is this within another block of sorts? Do you just have a random "\cite[pagenumber]{Smith2020}` in the normal markdown, or what?

This can help us decipher what kind of blocks are available (or not) for targeting with the CSS.

I kind of suspect that, if in normal text, you need for an extra plugin.

[ReaderGuy42]

Yeah sure, so the Smith2020 is my example of a citekey that Zotero (my source program) generates.

So a random passage might look like this:

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo risus id tortor lobortis porta. "Sed et nibh tellus."\footcite{Smith2020Queen}
Nam vitae vestibulum arcu. Vivamus faucibus dictum hendrerit. Proin lacinia id nibh nec facilisis. Vivamus "in porta libero, ornare accumsan mauris." 
Vivamus lacinia bibendum purus, id tincidunt elit luctus non.\footnote{\cite[42]{Johnson2003Civil}; \cite[199]{Salsbury1998Steak}}
Suspendisse euismod leo nec turpis mollis varius. Ut egestas urna orci, dictum dapibus lectus porttitor sed. 
Ut cursus dolor ex, vitae venenatis purus cursus vitae. 
Donec a ligula lorem. 
Fusce congue iaculis ex vitae pellentesque. Morbi maximus velit augue, in faucibus metus viverra nec.

Does that help? Beyond this I’m not sure what you meant.
These passages also often include "quotation" marks, or actually the ones that Smart Typography plugin generates that look like “this”.

Thanks

[ZenMoto]

It would be good to see the Element tree for one of your citations.

For example, if you:

1. open Dev Tools
2. click the arrow in the top left corner (so it turns blue)
3. then, on the Obsidian window, click directly on the citation text “\footcite{Smith2020Queen}” (the thing you want to colorize).

When you do that, DevTools will unfold all Elements above it.

If you could screenshot that Element branch, perhaps there will be a useful selector.

This is how it would look, so that everything above is expanded, and the classes are visible (especially at the ‘end/bottom’ of the branch).

[in that example, I got the “blue-arrow”, then clicked on “level 2”]

[ReaderGuy42]

The most efficient way I could think of was to make a screen recording. My dev view looks a little different, so I’m not sure if I’m doing it right, but you can see that the inspector finds something for the \, an escape character, then views the text footcite as regular text, then sees the [barelink], and the stuff in {curly brackets} as regular text.

Is there anything you can do with this?

Thanks

[holroy]

For the following markdown:

Vivamus lacinia bibendum purus, id tincidunt elit luctus non.\footnote{\cite[42]{Johnson2003Civil}; \cite[199]{Salsbury1998Steak}}
Suspendisse euismod leo nec turpis mollis varius.

it produces the following DOM:

<div class="cm-line">Vivamus lacinia bibendum purus, id tincidunt elit luctus non. <span class="cm-formatting-escape cm-hmd-escape-backslash">\</span>
  <span class="cm-escape cm-hmd-escape-char">f</span>ootnote{ <span class="cm-formatting-escape cm-hmd-escape-backslash">\</span>
  <span class="cm-escape cm-hmd-escape-char">c</span>ite <span class="cm-formatting cm-formatting-link cm-hmd-barelink cm-link" spellcheck="false">[</span>
  <span class="cm-hmd-barelink cm-link">42</span>
  <span class="cm-formatting cm-formatting-link cm-hmd-barelink cm-link" spellcheck="false">]</span>{Johnson2003Civil}; <span class="cm-formatting-escape cm-hmd-escape-backslash">\</span>
  <span class="cm-escape cm-hmd-escape-char">c</span>ite <span class="cm-formatting cm-formatting-link cm-hmd-barelink cm-link" spellcheck="false">[</span>
  <span class="cm-hmd-barelink cm-link">199</span>
  <span class="cm-formatting cm-formatting-link cm-hmd-barelink cm-link" spellcheck="false">]</span>{Salsbury1998Steak}} Suspendisse euismod leo nec turpis mollis varius.
</div>

As an image in the source mode:

The sad thing is that there is nothing to connect to, neither the \footnote{ ... } nor the \cite{ ... }. Neither elements are markdown elements, which translates into DOM/html-elements targetable by CSS.

So the question then becomes is this a fixed format, does it need to be this format, or can it translated into something else which could be formatted by CSS? I’m afraid the answer might be no, since it seems likely that the output/post-processing of these are to be done in LaTeX.

If that is the case, you’ve not got a whole lot of options. There is the Dynamic Highlight plugin, which can format it whilst in either source mode or live preview, but not in reading (or preview) mode.

If you’re not going to do something within LaTeX with afterwards, you might consider changing the formatting accordingly to something like the Pandoc Reference List, or similar. Or you could also venture to do something like using Dataview’s dv.view() command to build you a proper <span> element which you could format to your hearts desire.

But alas, with the text as it stands, there is no easy way to format it using CSS.

[ReaderGuy42]

That’s what I was afraid of. I tried using Dynamic Highlights, but it doesn’t seem to work with regular expressions, even though it’s supposed to. I opened an issue here, but haven’t heard anything back.

I’m using LaTeX for references because that has worked out the best. Pandoc doesn’t quite work.

How would I build my own <span> element like you said? That might work?

Thanks!

[holroy]

You could either do it fully manually, and insert stuff like:

My cite:  <span class="cite">Smith2020</span>

Or if you feel adventurous, you could implement your own view, so that you could write:

My cite: `$= dv.view("js/cite", "Smith2020") `

And then let Dataview handle the writing of the <span>. In either case, you’d get a proper element which you could format as you’d like within CSS (or directly in the view script).

Sadly, both of these options is a little more visually cluttering than the original text, but it will looks nice in both live preview or reading view.

[ReaderGuy42]

All right, but neither of these options would let me declare a span and then it would automatically recognize it as such, I assume?

But that’s an idea. thanks!

[holroy]

What do you mean recognise as such? Both of these options do (or can for the dv.view()) declare the proper <span> recognisable by CSS.

[ReaderGuy42]

My hope was that I would create a file or a frontmatter that declared \cite... to be a certain span class and then the CSS would style these automatically without having to always put the stuff $= dv.view("js/cite", "Smith2020") in manually.

I’d really be all right with just having it highlighted e.g. with Dynamic Highlighting, but as mentioned that doesn’t work.

[holroy]

I’ve not come across a plugin which allows you to define new functions directly like that, no. So as said, it’ll become a little cluttered visually.

You could possibly add it to the frontmatter, but still referencing it will not look very good. Here is an actual example showing some of these alternatives:

The first line dereferences the frontmatter field. The second line show two examples using the dv.view() method (with a cryptic name, which could be simplified), one within a footnote, as well.

[ReaderGuy42]

Ah, yes that is quite cluttered.

Well, thanks anyway, I appreciate the effort!!

[holroy]

I’m back again, now with a very different proposal: Have you seen the Supercharged Links plugin? It adds attributes to internal links with the values of target note’s frontmatter attributes.

Translated, if you change your cite references to [[Smith2020]], and add something to the frontmatter of your citations, like a cite field, you can format the link to your hearts contents.

This I think really would solve all your problems, it’ll also provide with the option to preview the citation when you hover over the link. How neat’s that?

[ZenMoto]

Here’s a weird idea:

What if you put the whole citation in triple stars:
***\footnote[51]{Smith2020}***

That way - each segment (including the ‘escaped’ text) automatically gains a tag [.cm-em.cm-strong]

And then you apply your style (and strip the italics / bold effects):

/* make citation green and white */
.cm-em.cm-strong, strong > em, .cm-s-obsidian span.cm-hmd-escape-char  {
	background-color:green;
    color:white;
	font-style:normal;
	font-weight:normal;
}

**

This is how it might appear:

SOURCE VIEW

LIVE-PREVIEW

READING-VIEW

[Maybe it will work ]

[ReaderGuy42]

This is perfect, thank you! Now I just have to find a filter to remove the three *** when transferring to LaTeX. Really appreciate it!

[ReaderGuy42]

Thanks, I appreciate it! But I think that would have made the formatting of citations more complicated it.

[ZenMoto]

To replace the stars - you could just do:

• Edit > Replace
• Find: ***
• Replace:

Replace All

Then hit ctrl z to undo [if you want to restore all the green citations (after making the latex copy/transfer)]

[ReaderGuy42]

Thanks

[ReaderGuy42]

So your solution works, but I found a better one. I got Dynamic Highlights working! Thanks @holroy for making me have another look at it.

I think the plugin isn’t working the way it should, but I got it to work, and if anyone comes looking for an automatic highlighting, this is how you do it.

Go to the plugin’s Github page and copy one of the author’s templates. I used the Pandoc one because I also want to capture groups.

Then in the plugin’s settings in Obsidian go to Import and paste the template. Rename it to whatever you like. Then you can replace the template’s regex query with something you need to capture.

For me this never worked, as it always complained about malformed escape characters or something like that. So Ctrl+Z your way back to the template’s regex query and just hit Save.

Then you hit the edit button and instead of editing the Custom CSS field, you change the “Search Term” field, where you should be seeing the template’s query. You put your own query in their and hit the Save button (make sure not to accidentally turn on/off the “Enable regex” button, as there’s some overlap in hitboxes), and then it should work!

Remember to choose a color you can actually see because for me it was defaulting to an almost invisible color of grey.

And now it works. For me the query was \\.+?\}, to capture everything between a \ and a }, which is how LaTeX citations work.

But actually I just tried exporting my Dynamic highlighting setting, and it exports to this:

  "Whole-Cite": {
    "class": "Whole-Cite",
    "color": "#2FB90882",
    "regex": true,
    "query": "\\\\.+?\\}",
    "mark": [
      "match",
      "group"
    ],
    "css": ""
  }
}

So it seems that the problem that it somehow wants/needs double or triple (?) escape characters.

Anyways, this works for me I’d love to see an update version of this plugin to make it a little more straightforward but overall I’m happy to have solved this.
The advantage of this solution is that I don’t need to worry about Lua filters or deleting asterisks or spans, even though that would have also worked.
Thanks all for the help!!