Changing the style of a paragraph that meets a certain criteria

[alelun]

Hi,

Is there a way of changing the style of a paragraph that meets a certain criteria?

I am taking notes in Obidian and using Obsidian_to_Anki plugin to seamlessly make flashcards. It is working really well for me. See xample below.

The flashcard syntax uses regex
Q: question
A: answer

I like to add flashcards continuously in the text, but they do take a bit of visual space and interrupts the text. I would like to somehow change the style of this entire paragraph, but to do it with as little manual work as possible. As Obsidian_to_Anki can find these conditions, I would think there is another way of using regex to identify and change the style of the text. I.e. make it italic and give it a smaller font size.

Can anyone give me directions?

Example:

[holroy]

Here is a little out of the box solution using inline fields from Dataview which should be possible to make compatible with the anki plugin by extending the regex a little.

With this markup:

[Q:: What two modern notions about architecture do we need to leave behind to understand Egyptian architechture?]
[A:: The need for change and innovation, and the need for an appropriate relation between material and form.]


[Q:: Which is the first letter of the alphabet?]
[A:: A]


- [Q:: Can inline field be connected in a list item] [A:: Surely, and it's overall a safer option to do so]

And this CSS:

body .inline-field-key[data-dv-key="Q"],
body .inline-field-key[data-dv-key="A"] {
  font-size: 80%;
  
  &::after{
    content: "";
  }

  & + .inline-field-value {
    display: none;
  }
  &:hover + .inline-field-value {
    display: inherit;
    background-color: inherit; 
  }
}

All the questions and answers are hidden until you hover either the Q or A key:

And when hovering over the second question:

The example looks a little bit silly with no filler text in between, but you get the gist of it. This would also allow yourself to do impromptu Q&A when you’re reading through your text as well. And by sliding the mouse slightly to the right, you can check whether you got the answer correct.

If you don’t like this hide-and-seek styling, the CSS will still show the correct targets to use, and you can change the styling of the bits and pieces as you see fit.

---

Other targeting options

For CSS to be able to style these paragraphs you do need to have something for it to target, which the inline fields provide above. Anki can do it using regex, but that isn’t available in CSS. Another options besides inline fields is possibly to use tags, like I’ve done in this post: How to target Dataview queries for CSS styling .

And yet another option could be to use tasks with special status characters for the Q&A, which also would provide targets for the CSS to latch on to.