feat(baoyu-markdown-to-html): consolidate heritage and warm into modern theme with per-theme color defaults
This commit is contained in:
parent
208bb20e98
commit
7133d54f04
|
|
@ -92,8 +92,7 @@ test -f "$HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md" && grep -o 'default
|
||||||
| `default` (Recommended) | 经典主题 - 传统排版,标题居中带底边,二级标题白字彩底 |
|
| `default` (Recommended) | 经典主题 - 传统排版,标题居中带底边,二级标题白字彩底 |
|
||||||
| `grace` | 优雅主题 - 文字阴影,圆角卡片,精致引用块 |
|
| `grace` | 优雅主题 - 文字阴影,圆角卡片,精致引用块 |
|
||||||
| `simple` | 简洁主题 - 现代极简风,不对称圆角,清爽留白 |
|
| `simple` | 简洁主题 - 现代极简风,不对称圆角,清爽留白 |
|
||||||
| `heritage` | 传统主题 - 宋体排版,传统书法风格,默认红金配色 |
|
| `modern` | 现代主题 - 大圆角、药丸形标题、宽松行距(搭配 `--color red` 还原传统红金风格) |
|
||||||
| `warm` | 温暖主题 - 暖色调现代风,宽松行距,圆角装饰 |
|
|
||||||
|
|
||||||
### Step 2: Convert
|
### Step 2: Convert
|
||||||
|
|
||||||
|
|
@ -115,7 +114,7 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> [options]
|
||||||
|
|
||||||
| Option | Description | Default |
|
| 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 |
|
| `--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-family <name>` | Font: sans, serif, serif-cjk, mono, or CSS value | theme default |
|
||||||
| `--font-size <N>` | Font size: 14px, 15px, 16px, 17px, 18px | 16px |
|
| `--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 | 石墨黑 |
|
| black | #333333 | 石墨黑 |
|
||||||
| gray | #A9A9A9 | 雾烟灰 |
|
| gray | #A9A9A9 | 雾烟灰 |
|
||||||
| pink | #FFB7C5 | 樱花粉 |
|
| pink | #FFB7C5 | 樱花粉 |
|
||||||
| red | #A93226 | 中国红 (heritage default) |
|
| red | #A93226 | 中国红 |
|
||||||
| orange | #D97757 | 暖橘 (warm default) |
|
| orange | #D97757 | 暖橘 (modern default) |
|
||||||
|
|
||||||
**Examples:**
|
**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
|
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --theme grace
|
||||||
|
|
||||||
# Theme with custom color
|
# 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
|
# Keep the first heading in content
|
||||||
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --keep-title
|
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` | 经典主题 - 传统排版,标题居中带底边,二级标题白字彩底 |
|
| `default` | 经典主题 - 传统排版,标题居中带底边,二级标题白字彩底 |
|
||||||
| `grace` | 优雅主题 - 文字阴影,圆角卡片,精致引用块 (by @brzhang) |
|
| `grace` | 优雅主题 - 文字阴影,圆角卡片,精致引用块 (by @brzhang) |
|
||||||
| `simple` | 简洁主题 - 现代极简风,不对称圆角,清爽留白 (by @okooo5km) |
|
| `simple` | 简洁主题 - 现代极简风,不对称圆角,清爽留白 (by @okooo5km) |
|
||||||
| `heritage` | 传统主题 - 宋体排版,传统书法风格,默认红金配色 |
|
| `modern` | 现代主题 - 大圆角、药丸形标题、宽松行距(搭配 `--color red` 还原传统红金风格) |
|
||||||
| `warm` | 温暖主题 - 暖色调现代风,宽松行距,圆角装饰 |
|
|
||||||
|
|
||||||
## Supported Markdown Features
|
## Supported Markdown Features
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -109,14 +109,16 @@ const DEFAULT_STYLE: StyleConfig = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const THEME_STYLE_DEFAULTS: Record<string, Partial<StyleConfig>> = {
|
const THEME_STYLE_DEFAULTS: Record<string, Partial<StyleConfig>> = {
|
||||||
heritage: {
|
default: {
|
||||||
primaryColor: COLOR_PRESETS.red,
|
primaryColor: COLOR_PRESETS.blue,
|
||||||
accentColor: "#D4AC0D",
|
|
||||||
containerBg: "rgba(255, 251, 240, 1)",
|
|
||||||
fontFamily: FONT_FAMILY_MAP["serif-cjk"],
|
|
||||||
blockquoteBackground: "rgba(253, 237, 236, 1)",
|
|
||||||
},
|
},
|
||||||
warm: {
|
grace: {
|
||||||
|
primaryColor: COLOR_PRESETS.purple,
|
||||||
|
},
|
||||||
|
simple: {
|
||||||
|
primaryColor: COLOR_PRESETS.green,
|
||||||
|
},
|
||||||
|
modern: {
|
||||||
primaryColor: COLOR_PRESETS.orange,
|
primaryColor: COLOR_PRESETS.orange,
|
||||||
accentColor: "#E4B1A0",
|
accentColor: "#E4B1A0",
|
||||||
containerBg: "rgba(250, 249, 245, 1)",
|
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