Proper CSS for links in Live Preview

[Nevertheless]

Im trying to center a line with internal links in live preview.

Things I have tried

Applying this CSS Snippet for alignment

.center-align {
  display: block;
  text-align: center;
}

.right-align {
  display: block;
  text-align: right;
}

.left-align {
  display: block;
  text-align: left;
}

using in note

<span class="center-align">()</span>

This results in Live preview mode

What I’m trying to do

this is what Reading mode looks like

im trying to get it to look like that in Live preview mode whenever i click away from that text block, same as a dataview query or the same links without the CSS stiling would behave

[holroy]

Since you’re introducing html code into the paragraph, live preview identifies the next angle bracket as the start of the next html tag. You need to at least escape the start bracket, by doing `< or similar means. You might also need to something like that at the end, as well.

In general be on the alert when using the angle brackets in text, especially within the live preview. It causes some anomalies.

[Nevertheless]

i think thats the problem, because, following your advice (trying with `<,and /< but settling with the html &t;) now gets rid of a previous red coloured part, till it gets to the angled bracket “<” from the “<%” templater syntax

is there any way i can tell live preview to not identify these brackets as an html tag, or changing the templater syntax in a way that works normally but doesnt interfere with the html rendering?

[holroy]

As long as the span element is there you’ll trigger that response. You could try \<, but that could break the <%.

But then again, this is a template, so does it really matter if there is some red in there? It’ll not be in the end note, as long as you’re not using dynamic templates.

Another alternative, which I incorporate in my daily notes, is to use a call to dv.view(). It builds the entire journal navigation header for me. This also has the advantage that if I get tired of it, or want a different header I can just replace the function and all daily notes get the new header.

[holroy]

@Nevertheless

im trying to get it to look like that in Live preview mode whenever i click away from that text block,

By the way, how does it look in live preview?

That is, how does it look in a note where you’ve inserted that template?

[Nevertheless]

You’re absolutely right, i was so bummed by the error that i totally forgot about the template disappearing into the daily note

However now i got the problem of links not displaying properly in live preview mode

@holroy

By the way, how does it look in live preview?

Live preview when the block is not selected

Live preview with the block selected

Reading mode

is there a way to force live preview to interpret the md link inside the html casing?

@holroy

Another alternative, which I incorporate in my daily notes, is to use a call to dv.view()

i didn’t knew about that, im curious, does it work pasting a sort of a “template header” into the template file? would it allow having the links like that but centered?

[holroy]

@Nevertheless

is there a way to force live preview to interpret the md link inside the html casing?

I’m a little unsure, but I tend not wanting any html-tags, as that does convolute stuff…

@Nevertheless

@holroy

Another alternative, which I incorporate in my daily notes, is to use a call to dv.view()

i didn’t knew about that, im curious, does it work pasting a sort of a “template header” into the template file? would it allow having the links like that but centered?

It took me way to long to get it to work, before I realised that I could get the dv.view() to use moment() directly, which is what Templater uses. Argghh… Oh well, I’ve not got a working(?) example for you.

Image from the live-preview with todays note as the test note. And here are the requirements for this to work.

Template

In your template for the daily note you add the following (as text):

```dataviewjs
dv.view("_js/journalHeader")
```

Javascript file

In your vault, you create a folder _js, and create the file journalHeader.js with the following content:

// Get the file date from the file title
// and use moment to verify it is according to format
const mFormat = "YYMMDD - ddd D MMM, YYYY"
const fileDate = moment(dv.current().file.name, mFormat)

if ( !fileDate.isValid ) {
   return "Not a valid date " - dv.current().file.name
} else {
  const yesterday = moment(fileDate).add(-1,  'days', -1).format(mFormat)
  const tomorrow = moment(fileDate).add(1, 'days').format(mFormat)
  dv.container.className += " journalHeader"
  return `<---- [[ ${ yesterday } | Yesterday ]] --- | --- [[ ${ tomorrow } | Tomorrow ]] ---->`
}

Note that this file must be named javascript.js, so it needs to be created with a text editor outside of Obsidian.

CSS

The accompanying CSS is rather simple:

.journalHeader {
 text-align: center;
}

Store this in a snippet of yours, and be sure to enable it afterwards.

---

And there you have it, a header which you can change whenever you want, and which is easy to format using CSS, and works in both live-preview and reading mode.

One change just for the fun of it, is to change the last line to:

 return `⟵ [[ ${ yesterday } | Yesterday ]] — | — [[ ${ tomorrow } | Tomorrow ]] ⟶`

If you want some fancier line/arrows, and your font supports it…

[Nevertheless]

Thank you so much!!!

not only worked charms but now i also want to add the file title above in another date format, colors with the CSS now that i can use HTML on it and on and on!

Edit: i modified a little your code in order to do that

// Get the file date from the file title
// and use moment to verify it is according to format
const mFormat = "YYMMDD - ddd D MMM, YYYY"
const mFormat2 = "dddd Do MMMM, YYYY"
const fileDate = moment(dv.current().file.name, mFormat)

if ( !fileDate.isValid ) {
   return "Not a valid date " - dv.current().file.name
} else {
  const yesterday = moment(fileDate).add(-1,  'days', -1).format(mFormat)
  const tomorrow = moment(fileDate).add(1, 'days').format(mFormat)
  const today = moment(fileDate).format(mFormat2)
  dv.container.className += " journalHeader"
  return ` # [[ ${ today } ]]

##### ⇠┅┅ [[ ${ yesterday } | Ayer ]] ┅● | ●┅ [[ ${ tomorrow } | Mañana ]] ┅⇢`
}

this results in:

im really new to all of this, i want to learn how to meddle with the header code, is that Dataviewjs am i right? to learn from the right documentation haha

After a couple of googling and bothering poor old chatgpt im now skimming through dataview and moment.js docs to get familiar with it

Thank you so much again for taking the time to do that, i couldn’t have made that in a million years

(previous post deleted due to not having the possibility to edit it anymore)