Enhanced `<mark>` elements v2.9.0

Word count

448 words

Reading time

3 minutes

As an interesting little plugin, it adds a sliding animation to your <mark> highlighted elements.

🤔 Performance drop? No!

This plugin doesn't contain any JavaScript code, only one stylesheet is provided.

Therefore, it should be theoretically performant, and won't cause any page lag.

Features

No JavaScripts

Stunning looking animations

Multi-line supports

Day / Night theme (Dark mode) supported

Natively compatible with VitePress design

Take a look

It works like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet augue ac est iaculis, sed laoreet leo sodales. Curabitur varius elit sed semper vehicula. Fusce luctus velit vel lacinia sagittis. Nullam sed nisl dictum augue accumsan placerat accumsan sed libero. Morbi aliquam felis id sem sollicitudin, sit amet convallis velit fermentum. Ut hendrerit leo sodales, placerat nibh ac, consequat purus. Integer turpis dui, viverra id nunc vestibulum, condimentum ultrices arcu.

Or in blockquotes:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet augue ac est iaculis, sed laoreet leo sodales. Curabitur varius elit sed semper vehicula. Fusce luctus velit vel lacinia sagittis. Nullam sed nisl dictum augue accumsan placerat accumsan sed libero. Morbi aliquam felis id sem sollicitudin, sit amet convallis velit fermentum. Ut hendrerit leo sodales, placerat nibh ac, consequat purus. Integer turpis dui, viverra id nunc vestibulum, condimentum ultrices arcu.

Installation

Install @nolebase/vitepress-plugin-enhanced-mark to your project dependencies by running the following command:

@antfu/nipnpmnpmyarn

shell

ni @nolebase/vitepress-plugin-enhanced-mark -D

shell

pnpm add @nolebase/vitepress-plugin-enhanced-mark -D

shell

npm install @nolebase/vitepress-plugin-enhanced-mark -D

shell

yarn add @nolebase/vitepress-plugin-enhanced-mark -D

Configuration

In VitePress's theme configuration file (note that it's not a configuration file, it's usually located at docs/.vitepress/theme/index.ts, file paths and extensions may be vary), import the enhanced mark style:

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

.vitepress/theme/index.ts

typescript

import { h
 } from 'vue'
import DefaultTheme
 from 'vitepress/theme'
import type { Theme
 as ThemeConfig } from 'vitepress'

import '@nolebase/vitepress-plugin-enhanced-mark/client/style.css'

export const Theme
: ThemeConfig = {
  extends
: DefaultTheme
,
  Layout
: () => {
    // other configurations...
  },
  enhanceApp
({ app
 }) {
    // other configurations...
  },
}

export default Theme