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

Question

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 1

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.

Answer 2

From John Gruber himself:

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose.

A button is not prose. To create, you must use HTML:

<button name="button">Click me</button>