Skip to content
CONSTRUCTING

Enhanced <mark> elements v2.5.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:

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

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

Contributors

Changelog