https://github.com/junkawa/markdown-it-link-preview
Markdown-it plugin to include link preview in your document
https://github.com/junkawa/markdown-it-link-preview
markdown-it markdown-it-plugin
Last synced: about 1 year ago
JSON representation
Markdown-it plugin to include link preview in your document
- Host: GitHub
- URL: https://github.com/junkawa/markdown-it-link-preview
- Owner: junkawa
- License: mit
- Created: 2020-10-03T12:49:28.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-10-09T12:36:11.000Z (over 1 year ago)
- Last Synced: 2025-03-23T16:40:51.957Z (about 1 year ago)
- Topics: markdown-it, markdown-it-plugin
- Language: JavaScript
- Homepage:
- Size: 561 KB
- Stars: 19
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# markdown-it-link-preview
Markdown-it plugin to include link preview in your document.
``` Markdown
[@preview](https://github.com/junkawa/figma_jp)
```
``` HTML
```
## Install
``` Bash
npm install markdown-it-link-preview --save
```
## Use
``` Javascript
const md = require('markdown-it')();
const linkPreview = require('markdown-it-link-preview');
md.use(linkPreview);
const result = md.render(
'[@preview](https://github.com/junkawa/figma_jp)',
);
result
/*
*/
```
## Syntax
``` Markdown
[@preview](URL)
```
## CSS sample
``` css
.link-preview-widget
{
display: table;
width: 100%;
border: 1px solid #e6e6e6;
border-radius: 4px;
}
.link-preview-widget-title
{
font-size: 16px;
font-weight: 700;
display: -webkit-box;
overflow: hidden;
margin-bottom: 8px;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.link-preview-widget-description
{
font-size: 12px;
font-style: normal;
line-height: 1.5;
display: -webkit-box;
overflow: hidden;
max-height: 3em;
margin-bottom: 4px;
word-break: break-all;
color: #787c7b;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.link-preview-widget-url
{
font-size: 12px;
font-style: normal;
line-height: 1.5;
display: block;
margin-bottom: 0;
color: #222;
}
.link-preview-widget > a
{
display: table-cell;
flex-direction: column;
padding: 16px;
cursor: pointer;
vertical-align: middle;
text-decoration: none;
color: inherit;
background-color: transparent;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-flex: 1;
flex: 1;
}
.link-preview-widget-image
{
width: 225px;
min-width: 220px;
height: 150px;
padding: 0;
vertical-align: middle;
border-left: 1px solid #f2f2f2;
border-radius: 0 3px 3px 0;
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
-webkit-box-flex: 0;
flex: 0;
}
```