Lazy loading blurred thumbnails v2.11.1
A markdown-it plugin wraps and transforms image tags to support unlazy lazy loading with blurhash, thumbhash encoding, and more.
Installation
Install @nolebase/markdown-it-unlazy-img to your project dependencies by running the following command:
ni @nolebase/markdown-it-unlazy-img -Dpnpm add @nolebase/markdown-it-unlazy-img -Dnpm install @nolebase/markdown-it-unlazy-img -Dyarn add @nolebase/markdown-it-unlazy-img -DConfiguration
Integrate with VitePress
In the VitePress configuration file (usually docs/.vitepress/config.ts, the file path and extension may be different), import @nolebase/markdown-it-unlazy-img as a plugin, and use it as a markdown-it plugin in the markdown option, specify how to handle the image resource paths of the NolebaseUnlazyImg tag in Vue templates to ensure that VitePress can correctly resolve and transform the image resource paths during the build process:
If you've never seen a colored diff before
This is a markup rule for displaying diff in the user interface (UI).
Red parts usually represents the lines you are going to remove, commonly appeared with a Minus sign -, or you could simply understand it as: this line will be removed.
Green parts usually represents the lines you are going to add, commonly appeared with a Plus sign +, or you could simply understand it as: this line will be added.
To learn more about diff, you can check out this answer about the history of diffutils and Git's documentation
import { defineConfigWithTheme } from 'vitepress'
import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img'
export default defineConfigWithTheme({
vue: {
template: {
transformAssetUrls: {
// Other configurations...
NolebaseUnlazyImg: ['src'],
},
},
},
lang: 'en',
title: 'Site name', // For reference only, please do not copy directly
description: 'Description', // For reference only, please do not copy directly
themeConfig: {
// Other configurations...
},
markdown: {
config: (md) => {
md.use(UnlazyImages(), {
imgElementTag: 'NolebaseUnlazyImg',
})
},
},
})Integrate on-demand
Caution
Configure on your own is for those who know and understand what they are doing. If you don't know what you are doing or encounter problems during configuration, please read and follow the Integrate with VitePress section.
Import this plugin into the file where you can access the markdown-it instance, and use it as a markdown-it plugin:
import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img'Then you need to use the use() member methods from the markdown-it instance to use this plugin:
import MarkdownIt from 'markdown-it'
let markdownIt: MarkdownIt = null as unknown as MarkdownIt
// ---cut---
import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img'
// Rest of the code...
// @noErrors
markdownIt.use(UnlazyImages(), {
imgElementTag: 'NolebaseUnlazyImg',
}) Contributors
Neko
Alaye Dong