diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts index cb91c0da..97c8ccc0 100644 --- a/docs/.vuepress/theme.ts +++ b/docs/.vuepress/theme.ts @@ -13,7 +13,7 @@ export const theme: Theme = themePlume({ url: '/plume.png', name: 'Plume Theme', description: 'The Theme for Vuepress 2.0', - location: 'Guangzhou, China', + location: 'GuangZhou, China', organization: 'pengzhanbo', }, @@ -40,6 +40,7 @@ export const theme: Theme = themePlume({ { icon: 'steam', link: 'https://pengzhanbo.cn' }, { icon: 'xbox', link: 'https://pengzhanbo.cn' }, ], + navbarSocialInclude: ['github'], watermark: { global: false, @@ -74,6 +75,7 @@ export const theme: Theme = themePlume({ markdownPower: { pdf: true, caniuse: true, + plot: true, bilibili: true, youtube: true, icons: true, diff --git a/plugins/plugin-md-power/src/client/components/Plot.vue b/plugins/plugin-md-power/src/client/components/Plot.vue new file mode 100644 index 00000000..988693f5 --- /dev/null +++ b/plugins/plugin-md-power/src/client/components/Plot.vue @@ -0,0 +1,97 @@ + + + + + diff --git a/plugins/plugin-md-power/src/node/features/plot.ts b/plugins/plugin-md-power/src/node/features/plot.ts new file mode 100644 index 00000000..c5341856 --- /dev/null +++ b/plugins/plugin-md-power/src/node/features/plot.ts @@ -0,0 +1,73 @@ +/** + * =|这里的文本将被黑幕隐藏,通过点击或者 hover 才可重现|= + */ +import type { PluginWithOptions } from 'markdown-it' +import type { RuleInline } from 'markdown-it/lib/parser_inline.mjs' + +const [openTag, endTag] = ['=|', '|='] + +function createTokenizer(): RuleInline { + return (state, silent) => { + let found = false + const max = state.posMax + const start = state.pos + + if (state.src.slice(start, start + 2) !== openTag) + return false + + if (silent) + return false + + // =||= + if (max - start < 5) + return false + + state.pos = start + 2 + + while (state.pos < max) { + if (state.src.slice(state.pos - 1, state.pos + 1) === endTag) { + found = true + break + } + + state.md.inline.skipToken(state) + } + + if (!found || start + 2 === state.pos) { + state.pos = start + + return false + } + const content = state.src.slice(start + 2, state.pos - 1) + + // 不允许前后带有空格 + if (/^\s|\s$/.test(content)) { + state.pos = start + return false + } + + // found! + state.posMax = state.pos - 1 + state.pos = start + 2 + + const open = state.push('plot_open', 'Plot', 1) + open.markup = openTag + + const text = state.push('text', '', 0) + text.content = content + + const close = state.push('plot_close', 'Plot', -1) + close.markup = endTag + + state.pos = state.posMax + 2 + state.posMax = max + + return true + } +} + +export const plotPlugin: PluginWithOptions = ( + md, +) => { + md.inline.ruler.before('emphasis', 'plot', createTokenizer()) +} diff --git a/plugins/plugin-md-power/src/shared/index.ts b/plugins/plugin-md-power/src/shared/index.ts index e4e2dd10..a943a2ec 100644 --- a/plugins/plugin-md-power/src/shared/index.ts +++ b/plugins/plugin-md-power/src/shared/index.ts @@ -6,5 +6,6 @@ export * from './codepen.js' export * from './codeSandbox.js' export * from './replit.js' export * from './jsfiddle.js' +export * from './plot.js' export * from './plugin.js' diff --git a/plugins/plugin-md-power/src/shared/plot.ts b/plugins/plugin-md-power/src/shared/plot.ts new file mode 100644 index 00000000..c03fcf0e --- /dev/null +++ b/plugins/plugin-md-power/src/shared/plot.ts @@ -0,0 +1,24 @@ +export interface PlotOptions { + /** + * 是否启用 `=| |=` markdown (该标记为非标准标记,脱离插件将不生效) + * @default true + */ + tag?: boolean + + /** + * 遮罩层颜色 + */ + mask?: string | { light: string, dark: string } + + /** + * 文本颜色 + */ + color?: string | { light: string, dark: string } + + /** + * 触发方式 + * + * @default 'hover' + */ + trigger?: 'hover' | 'click' +} diff --git a/plugins/plugin-md-power/src/shared/plugin.ts b/plugins/plugin-md-power/src/shared/plugin.ts index 66b120cc..d3cbbfa2 100644 --- a/plugins/plugin-md-power/src/shared/plugin.ts +++ b/plugins/plugin-md-power/src/shared/plugin.ts @@ -1,12 +1,14 @@ import type { CanIUseOptions } from './caniuse.js' import type { PDFOptions } from './pdf.js' import type { IconsOptions } from './icons.js' +import type { PlotOptions } from './plot.js' export interface MarkdownPowerPluginOptions { pdf?: boolean | PDFOptions // new syntax icons?: boolean | IconsOptions + plot?: boolean | PlotOptions // video embed bilibili?: boolean diff --git a/theme/src/client/styles/vars.scss b/theme/src/client/styles/vars.scss index d31e521d..e91a6e30 100644 --- a/theme/src/client/styles/vars.scss +++ b/theme/src/client/styles/vars.scss @@ -666,3 +666,11 @@ html.dark { --code-bg-color: var(--vp-code-block-bg); --medium-zoom-bg-color: var(--vp-c-bg); } + +/* md power plot */ +:root { + --vp-c-plot-light: var(--vp-c-bg); + --vp-c-bg-plot-light: var(--vp-c-text-1); + --vp-c-plot-dark: var(--vp-c-bg); + --vp-c-bg-plot-dark: var(--vp-c-text-2); +} diff --git a/theme/src/node/plugins.ts b/theme/src/node/plugins.ts index 0df1e038..1425b626 100644 --- a/theme/src/node/plugins.ts +++ b/theme/src/node/plugins.ts @@ -15,7 +15,7 @@ import { iconifyPlugin } from '@vuepress-plume/plugin-iconify' import { notesDataPlugin } from '@vuepress-plume/plugin-notes-data' import { shikiPlugin } from '@vuepress-plume/plugin-shikiji' import { commentPlugin } from '@vuepress/plugin-comment' -import { type MarkdownEnhanceOptions, mdEnhancePlugin } from 'vuepress-plugin-md-enhance' +import { type MarkdownEnhancePluginOptions, mdEnhancePlugin } from 'vuepress-plugin-md-enhance' import { readingTimePlugin } from '@vuepress/plugin-reading-time' import { seoPlugin } from '@vuepress/plugin-seo' import { sitemapPlugin } from '@vuepress/plugin-sitemap' @@ -196,7 +196,7 @@ export function setupPlugins( alert: true, footnote: true, katex: true, - } as MarkdownEnhanceOptions, + } as MarkdownEnhancePluginOptions, options.markdownEnhance || {}, ), )) diff --git a/theme/src/shared/options/plugins.ts b/theme/src/shared/options/plugins.ts index 33e5b9e6..34941c24 100644 --- a/theme/src/shared/options/plugins.ts +++ b/theme/src/shared/options/plugins.ts @@ -5,7 +5,7 @@ import type { BaiduTongjiOptions } from '@vuepress-plume/plugin-baidu-tongji' import type { CopyCodeOptions } from '@vuepress-plume/plugin-copy-code' import type { ShikiPluginOptions } from '@vuepress-plume/plugin-shikiji' import type { CommentPluginOptions } from '@vuepress/plugin-comment' -import type { MarkdownEnhanceOptions } from 'vuepress-plugin-md-enhance' +import type { MarkdownEnhancePluginOptions } from 'vuepress-plugin-md-enhance' import type { ReadingTimePluginOptions } from '@vuepress/plugin-reading-time' import type { MarkdownPowerPluginOptions } from 'vuepress-plugin-md-power' @@ -54,7 +54,7 @@ export interface PlumeThemePluginOptions { copyCode?: false | CopyCodeOptions - markdownEnhance?: false | MarkdownEnhanceOptions + markdownEnhance?: false | MarkdownEnhancePluginOptions markdownPower?: false | MarkdownPowerPluginOptions