Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐞Links can't be styled #41

Open
3 of 7 tasks
Graywaren opened this issue Sep 25, 2024 · 0 comments
Open
3 of 7 tasks

🐞Links can't be styled #41

Graywaren opened this issue Sep 25, 2024 · 0 comments

Comments

@Graywaren
Copy link

Check for existing bug reports before submitting.

  • I searched for existing Bug Reports and found no similar reports.

Expected Behavior

I would expect that following the documentation of how to style links would result in the link displaying the style.

Current behaviour

The markdown attributes do not apply and hide at all and no styles are applied in either editing/live preview or reading views.

The only method I've been able to get the markdown attributes to apply to anything related to a link is following the method here of [[Link|Alias{.class}]] or [Link{.class}](url), which applies the style, but only to the alias itself/plain text before it's a link and therefore it only shows as styled when your cursor is directly after the link and that little bit of text is visible. The method of [[link{.class}]] mentioned on the same page just breaks the links entirely

For the method of [[Link|Alias{.class}]] the css code of
'.class a { [styling here] }will apply. I'm a bit uncertain if it is working as intended or not, since I didn't originally think to try .class a rather than just .class because I thought it was being applied to the a element itself. It means that I need to add additional code if I have a pre-existing class I use with say, bold text. Since the class is applying to the span containing the link element it makes sense, but it's likely at least worth noting in documentation. Also, you must include an alias in this. If you try to use[[Link|{.class}]]`, the link becomes invisible because the markdown attribute is being used as the alias and then is immediately hidden.

However, that same css code does not work for [Link{.class}](url) links. From inspecting the CSS, this appears related to the issue I posted about here, where the parent element's style is overriding the element where the class is actually applied. I had to use this code to get the link color to change for these links:
.cm-link:has(.class) a { --link-external-color: aqua;}

Also, none of that worked in reading view, so I had to add the following to get the color to apply in reading view

a.internal-link.class.is-unresolved { color: blue; } /* for unvisited links */
a.internal-link.class { color: blue; } /* for visited links */

I haven't figured out a way for the code in the second part to get it to work in reading view to accept my usual method of coding styles. I use [class^="ma-"][class*="class"] so that I can have classes like .ma-blue-bold, since I haven't figured out how to add multiple separate classes with this plug-in. This means that I'll have to put the class in exactly for each compound class I use in a link. I'm hoping it's just a matter of I'm unaware of the proper css here, and with some googling I'll resolve that part of it, but figured I would mention it anyway.

Reproduction

Create a link, follow documentation or the linked thread of how to apply style.

Which Operating Systems are you using?

  • Android
  • iPhone/iPad
  • Linux
  • macOS
  • Windows

Obsidian Version Check

1.67

Plugin Version

1.1.2

Confirmation

  • I have disabled all other plugins and the issue still persists.

Possible solution

If nothing else, the documentation should be updated with instructions for the methods that it becomes possible to style the links.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant