From f6bf94b664d879e88520475973e73bf96c6453ee Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Sat, 16 Mar 2024 10:57:00 +0800 Subject: [PATCH] feat: support for github alert. --- docs/markdown/extended-syntax.md | 35 ++++++++++++++ package.json | 1 + src/markdown/markdown.ts | 2 + themes/default/css/main.css | 80 ++++++++++++++++++++++++++++++++ 4 files changed, 118 insertions(+) diff --git a/docs/markdown/extended-syntax.md b/docs/markdown/extended-syntax.md index 3e8359a1..96048624 100644 --- a/docs/markdown/extended-syntax.md +++ b/docs/markdown/extended-syntax.md @@ -55,6 +55,41 @@ Markdown[^1] 可以提高排版效率，并将文本转换为 HTML[^html] 示例展示：来自 GFM[^1] 特性 +## 警报 + +```markdown +> [!NOTE] +> 用户应该知道的有用信息，即使在浏览内容时也是如此。 + +> [!TIP] +> 有助于更好或更轻松地做事的有用建议。 + +> [!IMPORTANT] +> 用户需要了解实现其目标的关键信息。 + +> [!WARNING] +> 需要用户立即注意以避免出现问题的紧急信息。 + +> [!CAUTION] +> 针对某些行动的风险或负面结果提出建议。 +``` + + +> [!NOTE] +> 用户应该知道的有用信息，即使在浏览内容时也是如此。 + +> [!TIP] +> 有助于更好或更轻松地做事的有用建议。 + +> [!IMPORTANT] +> 用户需要了解实现其目标的关键信息。 + +> [!WARNING] +> 需要用户立即注意以避免出现问题的紧急信息。 + +> [!CAUTION] +> 针对某些行动的风险或负面结果提出建议。 + ## 示例预览 示例语法扩展，正对需要预览的 HTML 提供了一个 `idoc:preview` 标记，会自动生成 HTML 预览结果到页面，通过按钮点击可以切换 `代码` 和 `预览`，注意下面示例中的 `idoc:preview` 标记： diff --git a/package.json b/package.json index 86c04e36..0c3e37e6 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "rehype-minify-whitespace": "^6.0.0", "rehype-parse": "^9.0.0", "rehype-slug": "~6.0.0", + "remark-github-blockquote-alert": "^1.0.2", "yaml": "^2.0.0" }, "devDependencies": { diff --git a/src/markdown/markdown.ts b/src/markdown/markdown.ts index c080f265..85c1d15e 100644 --- a/src/markdown/markdown.ts +++ b/src/markdown/markdown.ts @@ -16,6 +16,7 @@ import ignore from 'rehype-ignore'; import rehypeFormat from 'rehype-format'; import { getCodeString } from 'rehype-rewrite'; import slug from 'rehype-slug'; +import { remarkAlert } from 'remark-github-blockquote-alert'; import { config, MenuData, Config, SiteGlobalConfig } from '../utils/conf.js'; import rehypeUrls from './rehype-urls.js'; import { formatChapters, Chapter } from '../utils/chapters.js'; @@ -75,6 +76,7 @@ interface ConfigData extends TemplateData, PageConfig { export async function createHTML(mdStr: string = '', fromPath: string, toPath: string) { const mdOptions: Options = {}; + mdOptions.remarkPlugins = [remarkAlert]; mdOptions.rehypePlugins = [ [ ignore, diff --git a/themes/default/css/main.css b/themes/default/css/main.css index 218c9394..d6131004 100644 --- a/themes/default/css/main.css +++ b/themes/default/css/main.css @@ -4,6 +4,18 @@ --color-header-border: #21262d7a; --color-hover: #ffffff1c; --color-hoc-bg: #fffefe08; + + --color-border-default: #d0d7de; + --color-accent-fg: #0969da; + --color-accent-emphasis: #0969da; + --color-danger-fg: #d1242f; + --color-danger-emphasis: #cf222e; + --color-attention-fg: #9a6700; + --color-attention-emphasis: #9a6700; + --color-done-fg: #8250df; + --color-done-emphasis: #8250df; + --color-success-fg: #1a7f37; + --color-success-emphasis: #1f883d; } [data-color-mode*='light'], @@ -12,6 +24,18 @@ --color-header-border: #0000001c; --color-hover: #0000001a; --color-hoc-bg: #00000008; + + --color-border-default: #30363d; + --color-accent-fg: #58a6ff; + --color-accent-emphasis: #1f6feb; + --color-danger-fg: #f85149; + --color-danger-emphasis: #da3633; + --color-attention-fg: #d29922; + --color-attention-emphasis: #9e6a03; + --color-done-fg: #a371f7; + --color-done-emphasis: #8957e5; + --color-success-fg: #3fb950; + --color-success-emphasis: #238636; } *, @@ -256,3 +280,59 @@ section.article-footer .atime { color: var(--color-fg-muted); font-size: 14px; } + +.markdown-alert { + border-left: 0.25em solid var(--borderColor-default, var(--color-border-default)); + color: inherit; + margin-bottom: 16px; + padding: 0.5rem 1em; +} +.markdown-alert > :last-child { + margin-bottom: 0 !important; +} +.markdown-alert .markdown-alert-title { + align-items: center; + display: flex; + font-size: 14px; + font-weight: 500; + line-height: 1; +} +.markdown-alert .markdown-alert-title svg.octicon { + margin-right: 8px !important; + margin-right: var(--base-size-8, 8px) !important; +} +.markdown-alert.markdown-alert-note { + border-left-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis)); +} +.markdown-alert.markdown-alert-note .markdown-alert-title { + color: var(--color-accent-fg); + color: var(--fgColor-accent, var(--color-accent-fg)); +} +.markdown-alert.markdown-alert-tip { + border-left-color: var(--borderColor-success-emphasis, var(--color-success-emphasis)); +} +.markdown-alert.markdown-alert-tip .markdown-alert-title { + color: var(--color-success-fg); + color: var(--fgColor-success, var(--color-success-fg)); +} +.markdown-alert.markdown-alert-important { + border-left-color: var(--borderColor-done-emphasis, var(--color-done-emphasis)); +} +.markdown-alert.markdown-alert-important .markdown-alert-title { + color: var(--color-done-fg); + color: var(--fgColor-done, var(--color-done-fg)); +} +.markdown-alert.markdown-alert-warning { + border-left-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis)); +} +.markdown-alert.markdown-alert-warning .markdown-alert-title { + color: var(--color-attention-fg); + color: var(--fgColor-attention, var(--color-attention-fg)); +} +.markdown-alert.markdown-alert-caution { + border-left-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis)); +} +.markdown-alert.markdown-alert-caution .markdown-alert-title { + color: var(--color-danger-fg); + color: var(--fgColor-danger, var(--color-danger-fg)); +}