Applying a class to a Markdown link

Ever wish you could add a CSS class to a Markdown link? Here's how I did it.

Joel Clermont
Joel Clermont
2023-10-05

All of these tips are written in Markdown and go through our normal code review process. Last week, Aaron pointed out a raw HTML link I had used in a tip, and asked "Can't you specify classes in the Markdown parser we're using?"

I had never even tried, so I dug into the docs, and sure enough - Aaron was right!

We use the excellent CommonMark package to parse Markdown, and it comes with an attributes extension which is what Aaron was thinking of.

Instead of needing to write HTML in my markdown, like this:

<a href="some-url" class="btn btn-primary">Some Text</a>

I could use the following Markdown syntax instead:

[Some Text](some-url){ .btn .btn-primary }

Not a huge difference, and both produce the same output, but it is definitely a little nicer to keep it all in Markdown. Hooray for code review!

Here to help,

Joel

P.S. We all get stuck sometimes! Need a quick pairing session with a Laravel expert to get unstuck?

Toss a coin in the jar if you found this helpful.
Want a tip like this in your inbox every weekday? Sign up below 👇🏼

Level up your Laravel skills!

Each 2-minute email has real-world advice you can use.