Did you know that Lu Xun once said: "I never said this!" It was an enlightening revelation that deeply inspired me, filling me with unparalleled strength! So, I turned over in bed!
Plot Text
Overview
Sometimes, you may not want to display text content completely unreservedly, preferring to maintain some secrecy. This could be to pique readers' curiosity or simply to add a bit of reading difficulty, making the article more interesting.
To satisfy this playful intention, the theme provides a fun little feature called "plot" text. It looks like this:
Readers cannot directly read the complete content - parts of it are "covered up" and require hovering the mouse over the content to see what's hidden.
Configuration
This feature is disabled by default. You need to enable it in the theme configuration.
export default defineUserConfig({
theme: plumeTheme({
markdown: {
plot: true,
}
})
})markdownPower.plot accepts either boolean | PlotOptions type, which controls the default behavior of this feature.
interface PlotOptions {
/**
* Trigger method
*
* @default 'hover'
*/
trigger?: 'hover' | 'click'
/**
* Mask layer effect
*
* @default 'mask'
*/
effect?: 'mask' | 'blur'
}Syntax
!!hidden content!!You can also control behavior through attribute syntax:
!!hidden content!!{.click}
!!hidden content!!{.hover}
!!hidden content!!{.mask}
!!hidden content!!{.blur}
!!hidden content!!{.blur .click}.click- Trigger on click.hover- Trigger on mouse hover.mask- Mask layer effect.blur- Text blur effect
You can also use the <Plot /> component as an alternative.
Frontmatter
Use the plot option in Frontmatter to control the default behavior of this feature on the current page:
---
plot:
trigger: hover
effect: blur
---Examples
Input:
Did you know that !!Lu Xun!! once said: "!!I never said this!!!" It was an enlightening revelation that deeply inspired me, filling me with unparalleled strength! So, !!I turned over in bed!!!!Output:
Did you know that Lu Xun once said: "I never said this!" It was an enlightening revelation that deeply inspired me, filling me with unparalleled strength! So, I turned over in bed!!
Input:
Mask effect + hover: !!Hover to see me!!{.mask .hover}
Mask effect + click: !!Click to see me!!{.mask .click}
Blur effect + hover: !!Hover to see me!!{.blur .hover}
Blur effect + click: !!Click to see me!!{.blur .click}Output:
Mask effect + hover: Hover to see me
Mask effect + click: Click to see me
Blur effect + hover: Hover to see me
Blur effect + click: Click to see me
