Search code examples
textcolorshyperlinkgithub-pagesgithub-flavored-markdown

How to change hyperlink color in github markdown


I'm creating a webpage using markdown hosted by github.io. I really don't like the blue color of the hyperlink automatically generated by markdown and I'm wondering if it's possible to change it. More specifically, I'd like the text to stay black and the solid underline to become dashed underline. Here is a sample code:

Support static-based commenting via [Staticman](https://staticman.net/) for sites hosted with GitHub Pages. [#424](https://github.com/mmistakes/minimal-mistakes/issues/424)

I heard github markdown is different from traditional markdown, but I've seen people changed the link color and underline type with the same website template so I think it's still possible to change. Any suggestions?


Solution

  • Since GitHub uses its own styling after it processes your markdown file, any custom stylings will be overwritten. However, in a broader case, you can always use HTML elements in your markdown files. Take this example:

    [normal link](https://www.google.com/)
    
    <a href="https://www.google.com/" style="color: black; text-decoration: underline;text-decoration-style: dotted;">custom link</a>
    

    The first one will appear as a normal blue link which will be underlined when you hover your mouse over it. The second one is a link that matches your requirements for black color and dotted underline.

    I tested it on my local machine and it renders just fine in VSCode, but all styling is lost when I put it on GitHub.

    Though, since you're going for a webpage, I really recommend going for HTML and CSS. They're really easy if you know MD and are much much more customizable.