Enhanced <mark>
elements v2.5.0
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
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:
ni @nolebase/vitepress-plugin-enhanced-mark -D
pnpm add @nolebase/vitepress-plugin-enhanced-mark -D
npm install @nolebase/vitepress-plugin-enhanced-mark -D
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
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