Search code examples
cssmarkdownjekyll

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 would like to make this button link to external URL for a file download.


Solution

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