Enable rendering of inline fields in Live Preview

[RyotaUshio]

Hi, thank you for creating & maintaining this great plugin.

Currently, inline fields are not rendered in the live preview.
I found myself avoiding using inline fields due to this fact, despite their usefulness.
Now that front matters are prettily rendered as "properties" rather than raw YAML, I think more and more people might feel the same as me.

So, I decided to make a change that makes them rendered in the live preview as well.

Here's a demo.

<- Live preview | Reading view ->

Screen.Recording.2023-10-05.at.2.43.59.mov

Canvas:

Screen.Recording.2023-10-05.at.2.49.04.mov

source:

Unwrapped field :: not rendered
[wrapped field :: rendered]
[**Inline markdown syntax**:: *Looks Good*]
(this is :: hidden field)

What do you think?

[RyotaUshio]

After sending this PR, I found a related feature request: #1058

[blacksmithgu]

Wow, very impressive! Thanks!

[sdht0]

Hi. I liked the earlier "no-rendering" style was because it was visually distinct from the text, just like tags. Compare:
Before:

After:

Now the inline fields can't be easily distinguished from the surrounding text at all! I think it'd b better if there was an option to make inline fields match the style of tags. Is there a css snippet I can use to enable that?

Customary xkcd: https://xkcd.com/1172/

[RyotaUshio]

@sdht0 Once another PR of mine #2091 is merged, you will be able to turn off the inline fields rendering. Until then, you can use an older version of Dataview (manually download main.js, manifest.js & styles.css from the Assets section of the release page, and then put them in your .obsidian/plugins/dataview folder).

Also, you can style inline fields by CSS snippets targeting the CSS classes

• .dataview.inline-field
• .dataview.inline-field-key: only key of [[key:: value]]
• .dataview.inline-field-value: only value of [[key:: value]]
• .dataview.inline-field-standalone-value: value of (key:: value)

Just a quick example:

.dataview.inline-field-key {
    background-color: red;
}

.dataview.inline-field-value {
    background-color: blue;
}

See also:

• https://www.reddit.com/r/ObsidianMD/comments/15be3p7/dataview_snippet_for_inlinefieldkey/

[RyotaUshio]

More usable example:

.dataview.inline-field {
    color: var(--tag-color);
}

.dataview.inline-field-key {
    padding-top: var(--tag-padding-y);
    padding-bottom: var(--tag-padding-y);
    padding-left: var(--tag-padding-x);
    border-top-left-radius: var(--tag-radius);
    border-bottom-left-radius: var(--tag-radius);
    background-color: hsla(var(--interactive-accent-hsl), 0.2);
}

.dataview.inline-field-value {
    padding-top: var(--tag-padding-y);
    padding-bottom: var(--tag-padding-y);
    padding-right: var(--tag-padding-x);
    border-top-right-radius: var(--tag-radius);
    border-bottom-right-radius: var(--tag-radius);
    background-color: hsla(var(--interactive-accent-hsl), 0.1);
}

[sdht0]

Thanks a lot for the ready made css! Have you considered adding this as an option somehow? That looks pretty cool.

I did try the prettyRenderInlineFields option, which naturally didn't work coz of the bug.

Cheers

[RyotaUshio]

I'm not a maintainer of Dataview, so if you want it to come true, create a new issue.

But to me, it doesn't make sense because users are already able to customize the appearance using CSS snippets.