Jekyll

Installation

The Jekyll integration is pretty similar to the vanilla approach.
You just need to be sure to load the script. For example, at the end of _layouts/default.html:
<script type="text/javascript" src="//unpkg.com/[email protected]"></script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    microlink('.card-preview', {round: true})
  });
</script>

Basic Usage

In the code above, we are associating microlink cards with the class card-preview. So now, when we write a new markdown post, we are going to use the card-preview class to associate the link:
[](https://www.theverge.com/2016/4/1/11342104/tesla-model-3-announcement-photos){:.card-preview}
You can pass custom options too:
[](https://www.theverge.com/2016/4/1/11342104/tesla-model-3-announcement-photos){:.card-preview data-image="logo"}

Styling

We don't inject any CSS into your application. The card previsualization is shipped with a default minimal inline style.
If you need to adapt the look and feel, each component of the card has been assigned a BEM class name:
  • microlink_card: The root div of the card.
  • microlink_card__media_image: The div holding the background-image of the image preview of the link.
  • microlink_card__media_video_wrapper: The wrapper div around the video preview of the link.
  • microlink_card__media_video: The video element for the video preview of the link.
  • microlink_card__content: The wrapper div around the content preview of the link.
  • microlink_card__content_title: The p tag of the card title.
  • microlink_card__content_description: The p tag of the card description.
  • microlink_card__content_url: The span tag of the card url link.
In order to apply your custom styles, just define your CSS rules using the appropriate class name.
For example, lets modify the font family used in the preview cards:
<style>
  .microlink-card {
    font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
    max-width: 100%;
  }
</style>
and voilá!