Skip to content
CONSTRUCTING

Lazy loading blurred thumbnails v2.11.1

Word count
297 words
Reading time
2 minutes

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:

shell
ni @nolebase/markdown-it-unlazy-img -D
shell
pnpm add @nolebase/markdown-it-unlazy-img -D
shell
npm install @nolebase/markdown-it-unlazy-img -D
shell
yarn add @nolebase/markdown-it-unlazy-img -D

Configuration

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:

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

typescript
import { defineConfigWithTheme } from 'vitepress'
import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img'

export default defineConfigWithTheme({
  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(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:

typescript
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:

typescript
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

Changelog