zhenghaoyang24 9f99ae3ca7
docs: add en markdown doc (#538)
* docs: add markdown-basic en

* docs: add markdown-extensions en

* docs: add markdown-icons en

* docs: add markdown-mark en , change file structure

* docs: update usage

* docs: add to markdown-caniuse en

* docs: add en docs markdown - import files

* docs: add en docs markdown - collapse

* chore: fix package lock file

---------

Co-authored-by: pengzhanbo <volodymyr@foxmail.com>
2025-03-27 21:06:53 +08:00

2.1 KiB

title, createTime, icon, permalink
title createTime icon permalink
Secret Text 2025/03/24 16:56:15 weui:eyes-off-outlined /en/guide/markdown/plot/

Overview

Sometimes you may want to partially conceal text content rather than displaying it outright - whether to spark readers' curiosity or simply add an element of playful interactivity.

To fulfill this whimsical need, the theme provides an interesting 'secret text' feature. Here's how it looks:

:::demo-wrapper Did you know that !!Lu Xun!! once said: "!!I never said this quote!!!" This revelation struck me with sudden clarity, inspiring me with unparalleled energy! Consequently, !!I rolled over in bed!!! :::

Readers can't directly view the complete content - concealed portions require mouse hover to reveal.

Configuration

This feature is disabled by default. Enable it in theme configuration:

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      plot: true, // [!code ++]
    }
  })
})

markdownPower.plot accepts boolean | PlotOptions type:

interface PlotOptions {
  /**
   * Enable `!! !!` markdown syntax (non-standard markup, requires plugin)
   * If false, only <Plot /> component can be used
   * @default true
   */
  tag?: boolean

  /**
   * Mask layer color
   */
  mask?: string | { light: string, dark: string }

  /**
   * Text color
   */
  color?: string | { light: string, dark: string }

  /**
   * Trigger method
   *
   * @default 'hover'
   */
  trigger?: 'hover' | 'click'
}

Syntax

!!Content to conceal!!

If you prefer not to use non-standard !! !! syntax, set plot.tag to false and use the <Plot /> component instead.

Examples

Input:

Did you know that !!Lu Xun!! once said: "!!I never said this quote!!!" This revelation struck me with sudden clarity, inspiring me with unparalleled energy! Consequently, !!I rolled over in bed!!!

Output:

:::demo-wrapper Did you know that !!Lu Xun!! once said: "!!I never said this quote!!!" This revelation struck me with sudden clarity, inspiring me with unparalleled energy! Consequently, !!I rolled over in bed!!! :::