Jekyll

The

integration is pretty similar to the Vanilla approach.

Just you need to be sure to load the script. A good place to put it's _layouts/default.html:


<script src="//cdn.jsdelivr.net/npm/@microlink/vanilla@latest/umd/microlink.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.card-preview')
  })
</script>

In the code above, we are associating microlink cards with the class name card-preview.

So now, when we write a new jekyll post, we are going to associate card-preview class name with the links we want to convert into previews.


[](https://www.theverge.com/2016/4/1/11342104/tesla-model-3-announcement-photos){:.card-preview}

Then the link will be rendered as

You can pass any Microlink API query parameter as a data-* field.


[](https://www.theverge.com/2016/4/1/11342104/tesla-model-3-announcement-photos){:.card-preview data-size="large"}

It's the equivalent to passing {size: 'large'} with the Vanilla integration.

If you want to customize the style, it can be done using

CSS variables

or CSS classes.