How to add internal links inside HTML component

Help
1

First, search the help docs and this forum. Maybe your question has been answered! The debugging steps can help, too. Still stuck? Delete this line and proceed.

What I’m trying to do

Hello, I’m trying to make this works (inserting obsidian internal links in a HTML component)

<div style="display: flex; justify-content: space-between; text-transform: uppercase;">
    <div style="display: flex; gap: 10px; align-items: center; text-decoration: none">
        <span style="font-size: 1.1em; padding-bottom: 3px; font-weight: 600">&lt;&lt;</span>
        <span style="font-size: 0.8em !important; letter-spacing: 2px; font-weight: bold">[[<% tp.date.now("DD MMM YYYY", -1) %>|Yesterday]]</span>
    </div>
    ...
</div>

Things I have tried

I’ve tried using the anchor tag, but that doesn’t create internal links, just a normal link in obsidian.

<div style="display: flex; justify-content: space-between; text-transform: uppercase;">
    <a href="<% tp.date.now("DD MMM YYYY", -1) %>" class="internal-link" style="display: flex; gap: 10px; align-items: center; text-decoration: none">
        <span style="font-size: 1.1em; padding-bottom: 3px; font-weight: 600">&lt;&lt;</span>
        <span style="font-size: 0.8em !important; letter-spacing: 2px; font-weight: bold">Yesterday</span>
    </a>
    ...
</div>
1 Like
2

I believe that’s not possible, as least within block elements like div.

3

What kind of style are you looking to achieve with that html?

4

Hi, sorry for the late reply, I was trying to use flexbox css to make 2 internal links that are in the same line with blank spaces between them. It’s like one is aligned to the elft and the other to the right. Is there a way to do this in markdown?

5

You could use a table (see Help), or there are some multi-column solutions. I forget if they’re plugins or CSS snippets — I’m guessing snippets, maybe in conjunction with callouts.

6

this worked for me:

<p>Some text, <a href="Home.md" class="internal-link">Home file</a></p>

If your note is in a folder then it should look like this href=“…/folder/note.md”

7

Do those links appear in the linked notes’ backlinks?

8

I’ve tried those, but it doesn’t appear in the linked notes’ backlinks

9

Thanks for your reply. I will try searching for multi-column solutions or at last use a table for it.

10

I’ve been a little busy lately, but what about this markup:

[[Left note]] #right [[Right note]]

With the following in a CSS snippet:

[href="#right"],
.is-live-preview .cm-line:not(.cm-active) .cm-tag-right {
   display: none;
}

.is-live-preview .cm-line:not(.cm-active) > .cm-tag-right ~ .cm-hmd-internal-link, 
[href="#right"] + a {
  float: right;
}

In live preview and reading mode this looks something like:

image

11

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.