feat(baoyu-markdown-to-html): consolidate heritage and warm into modern theme with per-theme color defaults
This commit is contained in:
Jim Liu 宝玉
parent
208bb20e98
commit
7133d54f04
|
|
@ -92,8 +92,7 @@ test -f "$HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md" && grep -o 'default
|
|||
| `default` (Recommended) | 经典主题 - 传统排版，标题居中带底边，二级标题白字彩底 |
|
||||
| `grace` | 优雅主题 - 文字阴影，圆角卡片，精致引用块 |
|
||||
| `simple` | 简洁主题 - 现代极简风，不对称圆角，清爽留白 |
|
||||
| `heritage` | 传统主题 - 宋体排版，传统书法风格，默认红金配色 |
|
||||
| `warm` | 温暖主题 - 暖色调现代风，宽松行距，圆角装饰 |
|
||||
| `modern` | 现代主题 - 大圆角、药丸形标题、宽松行距（搭配 `--color red` 还原传统红金风格） |
|
||||
|
||||
### Step 2: Convert
|
||||
|
||||
|
|
@ -115,7 +114,7 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> [options]
|
|||
|
||||
| Option | Description | Default |
|
||||
|--------|-------------|---------|
|
||||
| `--theme <name>` | Theme name (default, grace, simple, heritage, warm) | default |
|
||||
| `--theme <name>` | Theme name (default, grace, simple, modern) | default |
|
||||
| `--color <name\|hex>` | Primary color: preset name or hex value | theme default |
|
||||
| `--font-family <name>` | Font: sans, serif, serif-cjk, mono, or CSS value | theme default |
|
||||
| `--font-size <N>` | Font size: 14px, 15px, 16px, 17px, 18px | 16px |
|
||||
|
|
@ -138,8 +137,8 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> [options]
|
|||
| black | #333333 | 石墨黑 |
|
||||
| gray | #A9A9A9 | 雾烟灰 |
|
||||
| pink | #FFB7C5 | 樱花粉 |
|
||||
| red | #A93226 | 中国红 (heritage default) |
|
||||
| orange | #D97757 | 暖橘 (warm default) |
|
||||
| red | #A93226 | 中国红 |
|
||||
| orange | #D97757 | 暖橘 (modern default) |
|
||||
|
||||
**Examples:**
|
||||
|
||||
|
|
@ -151,7 +150,7 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts article.md
|
|||
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --theme grace
|
||||
|
||||
# Theme with custom color
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --theme heritage --color green
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --theme modern --color red
|
||||
|
||||
# Keep the first heading in content
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --keep-title
|
||||
|
|
@ -195,8 +194,7 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --title "My Article"
|
|||
| `default` | 经典主题 - 传统排版，标题居中带底边，二级标题白字彩底 |
|
||||
| `grace` | 优雅主题 - 文字阴影，圆角卡片，精致引用块 (by @brzhang) |
|
||||
| `simple` | 简洁主题 - 现代极简风，不对称圆角，清爽留白 (by @okooo5km) |
|
||||
| `heritage` | 传统主题 - 宋体排版，传统书法风格，默认红金配色 |
|
||||
| `warm` | 温暖主题 - 暖色调现代风，宽松行距，圆角装饰 |
|
||||
| `modern` | 现代主题 - 大圆角、药丸形标题、宽松行距（搭配 `--color red` 还原传统红金风格） |
|
||||
|
||||
## Supported Markdown Features
|
||||
|
||||
|
|
|
|||
|
|
@ -109,14 +109,16 @@ const DEFAULT_STYLE: StyleConfig = {
|
|||
};
|
||||
|
||||
const THEME_STYLE_DEFAULTS: Record<string, Partial<StyleConfig>> = {
|
||||
heritage: {
|
||||
primaryColor: COLOR_PRESETS.red,
|
||||
accentColor: "#D4AC0D",
|
||||
containerBg: "rgba(255, 251, 240, 1)",
|
||||
fontFamily: FONT_FAMILY_MAP["serif-cjk"],
|
||||
blockquoteBackground: "rgba(253, 237, 236, 1)",
|
||||
default: {
|
||||
primaryColor: COLOR_PRESETS.blue,
|
||||
},
|
||||
warm: {
|
||||
grace: {
|
||||
primaryColor: COLOR_PRESETS.purple,
|
||||
},
|
||||
simple: {
|
||||
primaryColor: COLOR_PRESETS.green,
|
||||
},
|
||||
modern: {
|
||||
primaryColor: COLOR_PRESETS.orange,
|
||||
accentColor: "#E4B1A0",
|
||||
containerBg: "rgba(250, 249, 245, 1)",
|
||||
|
|
|
|||
|
|
@ -1,183 +0,0 @@
|
|||
/**
|
||||
* MD 传统主题 (heritage)
|
||||
* 传统书法风格，宋体排版，默认红金配色
|
||||
*/
|
||||
|
||||
/* ==================== 容器样式覆盖 ==================== */
|
||||
section,
|
||||
container {
|
||||
font-family: var(--md-font-family);
|
||||
font-size: var(--md-font-size);
|
||||
line-height: 1.8;
|
||||
background-color: var(--md-container-bg);
|
||||
border: 4px solid var(--md-primary-color);
|
||||
border-radius: 12px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
#output {
|
||||
font-family: var(--md-font-family);
|
||||
font-size: var(--md-font-size);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* ==================== 一级标题 ==================== */
|
||||
h1 {
|
||||
display: table;
|
||||
padding: 0 1em;
|
||||
border-bottom: 2px solid var(--md-primary-color);
|
||||
margin: 30px auto 20px;
|
||||
color: var(--md-primary-color);
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ==================== 二级标题 ==================== */
|
||||
h2 {
|
||||
display: block;
|
||||
width: fit-content;
|
||||
padding: 6px 20px;
|
||||
margin: 30px auto 20px;
|
||||
color: #FFFFFF;
|
||||
background-color: var(--md-primary-color);
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
/* ==================== 三级标题 ==================== */
|
||||
h3 {
|
||||
padding-left: 8px;
|
||||
border-left: 3px solid var(--md-primary-color);
|
||||
margin: 20px 8px 10px 0;
|
||||
color: var(--md-primary-color);
|
||||
font-size: 17px;
|
||||
font-weight: normal;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* ==================== 四级标题 ==================== */
|
||||
h4 {
|
||||
margin: 10px 8px;
|
||||
color: var(--md-accent-color);
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* ==================== 五级标题 ==================== */
|
||||
h5 {
|
||||
margin: 10px 8px;
|
||||
color: #797D7F;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* ==================== 六级标题 ==================== */
|
||||
h6 {
|
||||
margin: 10px 8px;
|
||||
color: #797D7F;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* ==================== 段落 ==================== */
|
||||
p {
|
||||
margin: 16px 0;
|
||||
letter-spacing: 0.5px;
|
||||
color: hsl(var(--foreground));
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* ==================== 引用块 ==================== */
|
||||
blockquote {
|
||||
font-style: normal;
|
||||
padding: 15px 12px;
|
||||
border-left: 2px solid color-mix(in srgb, var(--md-primary-color) 80%, transparent);
|
||||
border-radius: 4px;
|
||||
color: hsl(var(--foreground));
|
||||
background-color: var(--blockquote-background);
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
blockquote > p {
|
||||
color: hsl(var(--foreground));
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==================== 代码块 ==================== */
|
||||
pre.code__pre,
|
||||
.hljs.code__pre {
|
||||
font-size: 13px;
|
||||
border: 1px solid var(--md-accent-color);
|
||||
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* ==================== 图片 ==================== */
|
||||
img {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--md-accent-color);
|
||||
margin: 20px auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* ==================== 列表 ==================== */
|
||||
ol {
|
||||
padding-left: 1em;
|
||||
margin: 15px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 15px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.2em 0;
|
||||
color: hsl(var(--foreground));
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* ==================== 分隔线 ==================== */
|
||||
hr {
|
||||
border-style: solid;
|
||||
border-width: 2px 0 0;
|
||||
border-color: var(--md-accent-color);
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
/* ==================== 强调 ==================== */
|
||||
strong {
|
||||
color: var(--md-primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ==================== 标记高亮 ==================== */
|
||||
.markup-highlight {
|
||||
background-color: color-mix(in srgb, var(--md-primary-color) 15%, white);
|
||||
padding: 5px;
|
||||
color: var(--md-primary-color);
|
||||
}
|
||||
|
||||
.markup-underline {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--md-accent-color);
|
||||
}
|
||||
|
||||
/* ==================== 链接 ==================== */
|
||||
a {
|
||||
color: var(--md-primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ==================== 表格 ==================== */
|
||||
th {
|
||||
background: color-mix(in srgb, var(--md-primary-color) 10%, transparent);
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* MD 温暖主题 (warm)
|
||||
* 暖色调现代风，默认橙色主色，宽松行距
|
||||
* MD 现代主题 (modern)
|
||||
* 大圆角、药丸形标题、宽松行距、现代感
|
||||
*/
|
||||
|
||||
/* ==================== 容器样式覆盖 ==================== */
|
||||
Loading…
Reference in New Issue