Styling Links in a Markdown Component?

Elements
1

How are we supposed to style links in a Markdown component?

Creating a Markdown typography object with link styling does not appear to work, as the links are never styled. It appears the settings in the typography object are not being respected by Elements.

Is this a known bug, and if it is, when can we expect to see a fix?

2

I’ve just tested it here and it’s working fine. I wonder what is causing it in your setup :thinking:

Can you share a small test project that shows the issues?

3

OK, I’ll have to build one to see if I can reproduce it outside the site I’m working on.

4

@dan It does work fine in most cases, but when you have an ordered list that you want to use a link in, the link is not styled. The minute I changed it to not be a list item, it worked fine. But then when I turned it back into a list item, it stopped working.

There is no way to style links for lists, so I assume it uses the styling from a paragraph, which does not appear to be working.

5

Ah-ha! We don’t yet offer controls to style links in lists. For now you’ll need to manually style them. Check the docs for examples and details on how do to this :backhand_index_pointing_down:

6

I don’t how acceptable or widely used it is, but I’ve been writing markdown and mixing in HTML links for years (it helps us add aria labels). It would also allow you to put in an organized list and add the links.

7

This is the wonderful thing about web design, there’s always multiple ways to get the result you need :smiling_face_with_three_hearts:

8

Hmm, I don’t see anything in these docs that shows how to style links in an ordered list in a markdown file. Can you point me to the code?

9

You need to add the link a attribute, just ask @elementsbot for the exact style you need and it’ll produce the Tailwind Code for you to paste in :slight_smile:

[&_ol_li_a]:text-primary
[&_ol_li_a]:no-underline
[&_ol_li_a:hover]:underline

This is what I’m using on my personal site I’m just putting together:

[&_ul]:pb-3
[&_ul]:pt-0
[&_img]:rounded-lg
[&_img]:shadow-sm
[&_img]:my-6
[&_ul_li_a]:text-accent-500
[&_ul_li_a:hover]:text-accent-700
[&_ul_li_a]:underline

Edit: I’ve also just updated the docs to include an example for links in lists.

10

When styling links in a Markdown list within Elements, use Tailwind CSS directly in your styling options. To achieve the look you want for links in ordered lists, you can use the following Tailwind code snippet:

[&_ol_li_a]:text-primary
[&_ol_li_a]:no-underline
[&_ol_li_a:hover]:underline

This will style the links within your ordered list to have a primary text color, remove underlines by default, and add an underline on hover. If you need to apply this site-wide, consider creating a Custom Component or adding it to your Template under Project Settings.

Remember, sometimes I might be wrong since I’m just a dumb bot, but give this a whirl! If it doesn’t work out, don’t hesitate to ask one of the real experts here like Dan or handshaper. They’ll sort you out.