Inigo Mantoya Inigo Mantoya - 17 days ago 5
Markdown Question

How can I add a button in a .md file with Jekyll

Is there a way to add a simple HTML button, with some CSS formatting to a Markdown file using Jekyll? I am very new to Jekyll and don't really know my way around it. I would like to make this button link to external URL for a file download.

Answer

Option 1. Shortcode + javascript

The first is using shortcodes WordPress style and replacing them with jQuery. You will need some clever regex in javascript to achieve this. In that case your markdown can look like this:

Lorem ipsum dolor sit amet.

[button url="http://www.google.com"]

Option 2. Include Jekyll file

Another option is to use a Jekyll include:

Lorem ipsum dolor sit amet.

{% include button.html url="http://www.google.com" %}

Option 3. Plain HTML

The third option is to write plain HTML:

Lorem ipsum dolor sit amet.

<button name="button" onclick="http://www.google.com">Click me</button>

Option 4. The markdown way

The last option is to use markdown to add a class and use CSS to style the link as a button.

Lorem ipsum dolor sit amet.

[Click me](http://www.google.com){: .btn}

Conclusion

What you choose will depend on your preferences. The first solution is the simplest if you want to port from or to WordPress. The second one is the true Jekyll way. The third (HTML) just makes sense too. The last one, the markdown way, is the most beautiful (in my opinion), but does not generate a true button.