Make `[#tag-alias]([[tag]])` render like `#tag`

Customization
1

I need to find a way to use javascript to make tags and “tag aliases” - in fact, Markdown links with Link Name containing a “#” symbol- look the same. I am using tag-aliases for tags with the same purpose I use named-links for inline references.

I manually tried to replace, in Dev Tools Inspector, the “class=page-ref” with “class=tag” and works wonders but I can’t replicate that with javascript.

For example I have this tag-alias: “[#Luni]([[Monday, 29.04.2024]] “12:00”)” - in this case I am using tag-aliases for localization purposes.

In html, the above looks like this:

<a tabindex="0" data-ref="monday, 29.04.2024" draggable="true" class="page-ref">#Luni</a>

while a simple hashtag would look like:

<a tabindex="0" data-ref="luni" draggable="true" class="tag">#Luni</a>

In rendering it looks bad if I have the two mixed:
image

If I change the "class=page-ref"> to class="tag"> for the “tag-alias”:

image
image869×87 5.47 KB

i get seamless rendering:
image

I have tried several ways to do this in custom.js but neither worked. I will paste one or two such attempts below, maybe you spot what I am doing wrong (maybe the whole approach :slight_smile: ):

document.addEventListener("DOMContentLoaded", function() {
    var links = document.querySelectorAll("a.page-ref");
    links.forEach(function(link) {
        if (link.textContent.startsWith("[#")) {
            link.classList.remove("page-ref");
            link.classList.add("tag");
        }
    });
});

document.addEventListener("DOMContentLoaded", function() {
    var links = document.querySelectorAll("a.page-ref");
    links.forEach(function(link) {
        var text = link.textContent.trim();
        if (text.startsWith("#")) {
            link.classList.remove("page-ref");
            link.classList.add("tag");
        }
    });
});

I don’t even know if the code should target the rendered html (which is simply “#Luni”) or the text before rendering (in which case the first letters would be “[#”)

Thanks.

2

I came to believe that a mutation observer is needed for this but I don’t know enough javascript to write that …

3

I think I managed to do it :partying_face:… posting here should anybody want to comment or make use of it:

const observer = new MutationObserver(() => {
    document.querySelectorAll('a.page-ref').forEach(anchor => {
        const textContent = anchor.textContent.trim();
        if (textContent.startsWith("#")) {
            anchor.classList.add("tag");
        }
    });
});
observer.observe(document.body, { childList: true, subtree: true });

image
image725×242 15.2 KB

4

Why not modifying class page-ref in file custom.css to match class tag ?

5

But how to check for a hash as the first character in the text enclosed by <a> and </a> ?
I’ve seen that one can target like this:

a.tag[data-ref^="bug"]{

but how can I target with CSS not the text inside the [[]] but the actual text of the link…

6

I’m not fully following. Could you share the full markdown of two (or more) links, one that you want to target with the css rule and one that you don’t want to?

7
  • want to target: [#tag-alias]([[tag]]) (ex: [#Vineri]([[Friday, 26.04.2024]]) )
  • don’t want to target: [normal Link Name]([[wikilink]] "normal markdown link Title")
8

Now I got it. Indeed, cannot target plain text. Could automate it with an one-time macro, but would risk losing compatibility. I have corrected the title.