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 src="//cdn.jsdelivr.net/npm/[email protected]/umd/microlink.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    microlink('.card-preview')
  });
</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á!