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.

Solution 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.

Solution 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>

Solution 3

Use the include option (2) that JoostS recommended. Here's more specific info that shows how to incorporate a button using includes with parameters. In your _includes folder, create your button template (e.g., button.html), such as this:

<button type="button" class="btn btn-{{include.button_class}} active">{{include.button_name}}</button>

(This HTML code assumes you're using Bootstrap for your buttons.)

Those places where I've written {{include.button_name}} will be the parameters you pass into your include.

Now on your Markdown page, include your button like this:

{% include button.html button_name="My Button" button_class="primary" %}

I use this technique for callouts, images, and alerts in my documentation. Basically any time you have complex HTML formatting, you can hide it away in an include template like this.

Solution 4

To add a simple button, this works fine in any .md file with Jekyll. Simply use it in markdown (.md) file and change the link 'https://bing.com' according to yours.

To open the link in the same tab:

<button onclick="window.location.href='https://bing.com';">Click</button>

To open the link in the new tab:

 <form action="https://stackoverflow.com/" method="get" target="_blank"><button type="submit">Click me</button></form>

View more solutions