Gatsby plugin to embed external links beautifully in markdown, as you can see below.
npm install gatsby-remark-blog-card
or
yarn add gatsby-remark-blog-card
// In your gatsby-config.js
module.exports = {
plugins: [
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
{
resolve: "gatsby-remark-blog-card",
}
},
},
],
};
You specify the title and URL.
Better accessibility than Usage 2.
`blogcard:[*** TITLE ***](*** URL ***)`
Example below:
`blogcard:[Portfolio](https://w2-yamaguchi.web.app/)`
The resulting HTML generated from the Markdown:
<iframe
style="width:100%;height:155px;max-width:680px;"
title="Portfolio"
src="https://hatenablog-parts.com/embed?url=https://w2-yamaguchi.web.app/"
width="300"
height="200"
frameborder="0"
scrolling="no"
/></iframe>
Also, You can specify only URL.
The title is Blog Card
by default.
`blogcard:*** URL ***`
Example below:
`blogcard:https://w2-yamaguchi.web.app/`
<iframe
style="width:100%;height:155px;max-width:680px;"
title="Blog Card"
src="https://hatenablog-parts.com/embed?url=https://w2-yamaguchi.web.app/"
width="300"
height="200"
frameborder="0"
scrolling="no"
/></iframe>