diff --git a/skills/baoyu-markdown-to-html/SKILL.md b/skills/baoyu-markdown-to-html/SKILL.md
index 8cabe8d..40b2cf0 100644
--- a/skills/baoyu-markdown-to-html/SKILL.md
+++ b/skills/baoyu-markdown-to-html/SKILL.md
@@ -92,8 +92,8 @@ test -f "$HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md" && grep -o 'default
| `default` (Recommended) | 经典主题 - 传统排版,标题居中带底边,二级标题白字彩底 |
| `grace` | 优雅主题 - 文字阴影,圆角卡片,精致引用块 |
| `simple` | 简洁主题 - 现代极简风,不对称圆角,清爽留白 |
-| `red` | 红色主题 - 红金配色,宋体排版,传统书法风格 |
-| `orange` | 橙色主题 - 暖色调现代风,宽松行距,圆角装饰 |
+| `heritage` | 传统主题 - 宋体排版,传统书法风格,默认红金配色 |
+| `warm` | 温暖主题 - 暖色调现代风,宽松行距,圆角装饰 |
### Step 2: Convert
@@ -115,11 +115,32 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts [options]
| Option | Description | Default |
|--------|-------------|---------|
-| `--theme ` | Theme name (default, grace, simple, red, orange) | default |
+| `--theme ` | Theme name (default, grace, simple, heritage, warm) | default |
+| `--color ` | Primary color: preset name or hex value | theme default |
+| `--font-family ` | Font: sans, serif, serif-cjk, mono, or CSS value | theme default |
+| `--font-size ` | Font size: 14px, 15px, 16px, 17px, 18px | 16px |
| `--title ` | Override title from frontmatter | |
| `--keep-title` | Keep the first heading in content | false (removed) |
| `--help` | Show help | |
+**Color Presets:**
+
+| Name | Hex | Label |
+|------|-----|-------|
+| blue | #0F4C81 | 经典蓝 |
+| green | #009874 | 翡翠绿 |
+| vermilion | #FA5151 | 活力橘 |
+| yellow | #FECE00 | 柠檬黄 |
+| purple | #92617E | 薰衣紫 |
+| sky | #55C9EA | 天空蓝 |
+| rose | #B76E79 | 玫瑰金 |
+| olive | #556B2F | 橄榄绿 |
+| black | #333333 | 石墨黑 |
+| gray | #A9A9A9 | 雾烟灰 |
+| pink | #FFB7C5 | 樱花粉 |
+| red | #A93226 | 中国红 (heritage default) |
+| orange | #D97757 | 暖橘 (warm default) |
+
**Examples:**
```bash
@@ -129,6 +150,9 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts article.md
# With specific theme
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
+
# Keep the first heading in content
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --keep-title
@@ -171,8 +195,8 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --title "My Article"
| `default` | 经典主题 - 传统排版,标题居中带底边,二级标题白字彩底 |
| `grace` | 优雅主题 - 文字阴影,圆角卡片,精致引用块 (by @brzhang) |
| `simple` | 简洁主题 - 现代极简风,不对称圆角,清爽留白 (by @okooo5km) |
-| `red` | 红色主题 - 红金配色,宋体排版,传统书法风格 |
-| `orange` | 橙色主题 - 暖色调现代风,宽松行距,圆角装饰 |
+| `heritage` | 传统主题 - 宋体排版,传统书法风格,默认红金配色 |
+| `warm` | 温暖主题 - 暖色调现代风,宽松行距,圆角装饰 |
## Supported Markdown Features
diff --git a/skills/baoyu-markdown-to-html/scripts/md/render.ts b/skills/baoyu-markdown-to-html/scripts/md/render.ts
index 70755f8..31e6f73 100644
--- a/skills/baoyu-markdown-to-html/scripts/md/render.ts
+++ b/skills/baoyu-markdown-to-html/scripts/md/render.ts
@@ -44,11 +44,28 @@ const FALLBACK_THEMES: ThemeName[] = ["default", "grace", "simple"];
const FONT_FAMILY_MAP: Record = {
sans: `-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif`,
serif: `Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif`,
+ "serif-cjk": `"Source Han Serif SC", "Noto Serif CJK SC", "Source Han Serif CN", STSong, SimSun, serif`,
mono: `Menlo, Monaco, 'Courier New', monospace`,
};
const FONT_SIZE_OPTIONS = ["14px", "15px", "16px", "17px", "18px"];
+const COLOR_PRESETS: Record = {
+ blue: "#0F4C81",
+ green: "#009874",
+ vermilion: "#FA5151",
+ yellow: "#FECE00",
+ purple: "#92617E",
+ sky: "#55C9EA",
+ rose: "#B76E79",
+ olive: "#556B2F",
+ black: "#333333",
+ gray: "#A9A9A9",
+ pink: "#FFB7C5",
+ red: "#A93226",
+ orange: "#D97757",
+};
+
const CODE_BLOCK_THEMES = [
"1c-light", "a11y-dark", "a11y-light", "agate", "an-old-hope",
"androidstudio", "arduino-light", "arta", "ascetic",
@@ -77,6 +94,8 @@ interface StyleConfig {
fontSize: string;
foreground: string;
blockquoteBackground: string;
+ accentColor: string;
+ containerBg: string;
}
const DEFAULT_STYLE: StyleConfig = {
@@ -85,6 +104,26 @@ const DEFAULT_STYLE: StyleConfig = {
fontSize: "16px",
foreground: "0 0% 3.9%",
blockquoteBackground: "#f7f7f7",
+ accentColor: "#6B7280",
+ containerBg: "transparent",
+};
+
+const THEME_STYLE_DEFAULTS: Record> = {
+ 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)",
+ },
+ warm: {
+ primaryColor: COLOR_PRESETS.orange,
+ accentColor: "#E4B1A0",
+ containerBg: "rgba(250, 249, 245, 1)",
+ fontFamily: FONT_FAMILY_MAP.sans,
+ fontSize: "15px",
+ blockquoteBackground: "rgba(255, 255, 255, 0.6)",
+ },
};
Object.entries(COMMON_LANGUAGES).forEach(([name, lang]) => {
@@ -532,8 +571,8 @@ function printUsage(): void {
"",
"Options:",
` --theme Theme (${THEME_NAMES.join(", ")})`,
- ` --color Primary color (default: ${DEFAULT_STYLE.primaryColor})`,
- ` --font-family Font: sans, serif, mono, or CSS value`,
+ ` --color Primary color: ${Object.keys(COLOR_PRESETS).join(", ")}, or hex`,
+ ` --font-family Font: ${Object.keys(FONT_FAMILY_MAP).join(", ")}, or CSS value`,
` --font-size Font size: ${FONT_SIZE_OPTIONS.join(", ")} (default: 16px)`,
` --code-theme Code highlight theme (default: github)`,
` --mac-code-block Show Mac-style code block header`,
@@ -559,15 +598,19 @@ function resolveFontFamily(value: string): string {
return FONT_FAMILY_MAP[value] ?? value;
}
+function resolveColor(value: string): string {
+ return COLOR_PRESETS[value] ?? value;
+}
+
function parseArgs(argv: string[]): CliOptions | null {
const ext = loadExtendConfig();
let inputPath = "";
let theme: ThemeName = ext.default_theme ?? "default";
let keepTitle = ext.keep_title ?? false;
- let primaryColor = ext.default_color ?? DEFAULT_STYLE.primaryColor;
- let fontFamily = ext.default_font_family ? resolveFontFamily(ext.default_font_family) : DEFAULT_STYLE.fontFamily;
- let fontSize = ext.default_font_size ?? DEFAULT_STYLE.fontSize;
+ let primaryColor: string | undefined = ext.default_color ? resolveColor(ext.default_color) : undefined;
+ let fontFamily: string | undefined = ext.default_font_family ? resolveFontFamily(ext.default_font_family) : undefined;
+ let fontSize: string | undefined = ext.default_font_size ?? undefined;
let codeTheme = ext.default_code_theme ?? "github";
let isMacCodeBlock = ext.mac_code_block ?? true;
let isShowLineNumber = ext.show_line_number ?? false;
@@ -605,7 +648,7 @@ function parseArgs(argv: string[]): CliOptions | null {
if (arg === "--color" || arg.startsWith("--color=")) {
const val = parseArgValue(argv, i, "--color");
if (!val) { console.error("Missing value for --color"); return null; }
- primaryColor = val;
+ primaryColor = resolveColor(val);
if (!arg.includes("=")) i += 1;
continue;
}
@@ -678,9 +721,9 @@ interface CliOptions {
inputPath: string;
theme: ThemeName;
keepTitle: boolean;
- primaryColor: string;
- fontFamily: string;
- fontSize: string;
+ primaryColor?: string;
+ fontFamily?: string;
+ fontSize?: string;
codeTheme: string;
isMacCodeBlock: boolean;
isShowLineNumber: boolean;
@@ -883,6 +926,8 @@ function buildCss(baseCss: string, themeCss: string, style: StyleConfig = DEFAUL
--md-font-size: ${style.fontSize};
--foreground: ${style.foreground};
--blockquote-background: ${style.blockquoteBackground};
+ --md-accent-color: ${style.accentColor};
+ --md-container-bg: ${style.containerBg};
}
body {
@@ -978,11 +1023,15 @@ function normalizeCssText(cssText: string, style: StyleConfig = DEFAULT_STYLE):
.replace(/var\(--md-font-family\)/g, style.fontFamily)
.replace(/var\(--md-font-size\)/g, style.fontSize)
.replace(/var\(--blockquote-background\)/g, style.blockquoteBackground)
+ .replace(/var\(--md-accent-color\)/g, style.accentColor)
+ .replace(/var\(--md-container-bg\)/g, style.containerBg)
.replace(/hsl\(var\(--foreground\)\)/g, "#3f3f3f")
.replace(/--md-primary-color:\s*[^;"']+;?/g, "")
.replace(/--md-font-family:\s*[^;"']+;?/g, "")
.replace(/--md-font-size:\s*[^;"']+;?/g, "")
.replace(/--blockquote-background:\s*[^;"']+;?/g, "")
+ .replace(/--md-accent-color:\s*[^;"']+;?/g, "")
+ .replace(/--md-container-bg:\s*[^;"']+;?/g, "")
.replace(/--foreground:\s*[^;"']+;?/g, "");
}
@@ -1038,11 +1087,13 @@ async function main(): Promise {
options.inputPath.replace(/\.md$/i, ".html")
);
+ const themeDefaults = THEME_STYLE_DEFAULTS[options.theme] ?? {};
const style: StyleConfig = {
...DEFAULT_STYLE,
- primaryColor: options.primaryColor,
- fontFamily: options.fontFamily,
- fontSize: options.fontSize,
+ ...themeDefaults,
+ ...(options.primaryColor !== undefined ? { primaryColor: options.primaryColor } : {}),
+ ...(options.fontFamily !== undefined ? { fontFamily: options.fontFamily } : {}),
+ ...(options.fontSize !== undefined ? { fontSize: options.fontSize } : {}),
};
const { baseCss, themeCss } = loadThemeCss(options.theme);
diff --git a/skills/baoyu-markdown-to-html/scripts/md/themes/red.css b/skills/baoyu-markdown-to-html/scripts/md/themes/heritage.css
similarity index 66%
rename from skills/baoyu-markdown-to-html/scripts/md/themes/red.css
rename to skills/baoyu-markdown-to-html/scripts/md/themes/heritage.css
index 2e88e79..e5c88d0 100644
--- a/skills/baoyu-markdown-to-html/scripts/md/themes/red.css
+++ b/skills/baoyu-markdown-to-html/scripts/md/themes/heritage.css
@@ -1,23 +1,23 @@
/**
- * MD 红色主题
- * 传统书法风格,红金配色,宋体排版
+ * MD 传统主题 (heritage)
+ * 传统书法风格,宋体排版,默认红金配色
*/
-/* ==================== 容器字体覆盖 ==================== */
+/* ==================== 容器样式覆盖 ==================== */
section,
container {
- font-family: "Source Han Serif SC", "Noto Serif CJK SC", "Source Han Serif CN", STSong, SimSun, serif;
- font-size: 16px;
+ font-family: var(--md-font-family);
+ font-size: var(--md-font-size);
line-height: 1.8;
- background-color: rgba(255, 251, 240, 1);
- border: 4px solid rgba(169, 50, 38, 1);
+ background-color: var(--md-container-bg);
+ border: 4px solid var(--md-primary-color);
border-radius: 12px;
padding: 6px 12px;
}
#output {
- font-family: "Source Han Serif SC", "Noto Serif CJK SC", "Source Han Serif CN", STSong, SimSun, serif;
- font-size: 16px;
+ font-family: var(--md-font-family);
+ font-size: var(--md-font-size);
line-height: 1.8;
}
@@ -25,9 +25,9 @@ container {
h1 {
display: table;
padding: 0 1em;
- border-bottom: 2px solid #A93226;
+ border-bottom: 2px solid var(--md-primary-color);
margin: 30px auto 20px;
- color: #A93226;
+ color: var(--md-primary-color);
font-size: 24px;
font-weight: bold;
text-align: center;
@@ -40,7 +40,7 @@ h2 {
padding: 6px 20px;
margin: 30px auto 20px;
color: #FFFFFF;
- background-color: #A93226;
+ background-color: var(--md-primary-color);
font-size: 18px;
font-weight: bold;
text-align: center;
@@ -52,9 +52,9 @@ h2 {
/* ==================== 三级标题 ==================== */
h3 {
padding-left: 8px;
- border-left: 3px solid #A93226;
+ border-left: 3px solid var(--md-primary-color);
margin: 20px 8px 10px 0;
- color: #A93226;
+ color: var(--md-primary-color);
font-size: 17px;
font-weight: normal;
line-height: 1.2;
@@ -63,7 +63,7 @@ h3 {
/* ==================== 四级标题 ==================== */
h4 {
margin: 10px 8px;
- color: #D4AC0D;
+ color: var(--md-accent-color);
font-size: 16px;
font-weight: normal;
}
@@ -88,7 +88,7 @@ h6 {
p {
margin: 16px 0;
letter-spacing: 0.5px;
- color: #2C2C2C;
+ color: hsl(var(--foreground));
line-height: 1.8;
}
@@ -96,15 +96,15 @@ p {
blockquote {
font-style: normal;
padding: 15px 12px;
- border-left: 2px solid rgba(169, 50, 38, 0.8);
+ border-left: 2px solid color-mix(in srgb, var(--md-primary-color) 80%, transparent);
border-radius: 4px;
- color: #5D4037;
- background-color: rgba(253, 237, 236, 1);
+ color: hsl(var(--foreground));
+ background-color: var(--blockquote-background);
margin: 12px 0;
}
blockquote > p {
- color: #5D4037;
+ color: hsl(var(--foreground));
font-size: 14px;
margin: 0;
}
@@ -113,14 +113,14 @@ blockquote > p {
pre.code__pre,
.hljs.code__pre {
font-size: 13px;
- border: 1px solid #D4AC0D;
+ 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 #D4AC0D;
+ border: 1px solid var(--md-accent-color);
margin: 20px auto;
padding: 5px;
}
@@ -141,7 +141,7 @@ ul {
li {
margin: 0.2em 0;
- color: #2C2C2C;
+ color: hsl(var(--foreground));
font-size: 16px;
}
@@ -149,35 +149,35 @@ li {
hr {
border-style: solid;
border-width: 2px 0 0;
- border-color: #D4AC0D;
+ border-color: var(--md-accent-color);
margin: 40px 0;
}
/* ==================== 强调 ==================== */
strong {
- color: #A93226;
+ color: var(--md-primary-color);
font-weight: bold;
}
/* ==================== 标记高亮 ==================== */
.markup-highlight {
- background-color: #FADBD8;
+ background-color: color-mix(in srgb, var(--md-primary-color) 15%, white);
padding: 5px;
- color: #A93226;
+ color: var(--md-primary-color);
}
.markup-underline {
text-decoration: underline;
- text-decoration-color: #D4AC0D;
+ text-decoration-color: var(--md-accent-color);
}
/* ==================== 链接 ==================== */
a {
- color: #A93226;
+ color: var(--md-primary-color);
text-decoration: none;
}
/* ==================== 表格 ==================== */
th {
- background: rgba(169, 50, 38, 0.1);
+ background: color-mix(in srgb, var(--md-primary-color) 10%, transparent);
}
diff --git a/skills/baoyu-markdown-to-html/scripts/md/themes/orange.css b/skills/baoyu-markdown-to-html/scripts/md/themes/warm.css
similarity index 71%
rename from skills/baoyu-markdown-to-html/scripts/md/themes/orange.css
rename to skills/baoyu-markdown-to-html/scripts/md/themes/warm.css
index 6fb764c..89ba61b 100644
--- a/skills/baoyu-markdown-to-html/scripts/md/themes/orange.css
+++ b/skills/baoyu-markdown-to-html/scripts/md/themes/warm.css
@@ -1,23 +1,23 @@
/**
- * MD 橙色主题
- * 暖色调现代风,橙色主色,宽松行距
+ * MD 温暖主题 (warm)
+ * 暖色调现代风,默认橙色主色,宽松行距
*/
/* ==================== 容器样式覆盖 ==================== */
section,
container {
- font-family: PingFang SC, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Arial, sans-serif;
- font-size: 15px;
+ font-family: var(--md-font-family);
+ font-size: var(--md-font-size);
line-height: 2;
- background-color: rgba(250, 249, 245, 1);
+ background-color: var(--md-container-bg);
border: 1px solid rgba(255, 255, 255, 0.01);
border-radius: 25px;
padding: 12px 12px;
}
#output {
- font-family: PingFang SC, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Arial, sans-serif;
- font-size: 15px;
+ font-family: var(--md-font-family);
+ font-size: var(--md-font-size);
line-height: 2;
}
@@ -26,8 +26,8 @@ h1 {
display: table;
padding: 0.3em 1em;
margin: 20px auto;
- color: #3B3B38;
- background: #D97757;
+ color: hsl(var(--foreground));
+ background: var(--md-primary-color);
border-radius: 15px;
font-size: 28px;
font-weight: bold;
@@ -41,16 +41,16 @@ h2 {
padding-bottom: 0;
margin: 0 auto 20px;
width: 100%;
- color: #D97757;
+ color: var(--md-primary-color);
font-size: 20px;
font-weight: bold;
- border-bottom: 2px solid #E4B1A0;
+ border-bottom: 2px solid var(--md-accent-color);
}
/* ==================== 三级标题 ==================== */
h3 {
margin: 0 8px 10px;
- color: #3B3B38;
+ color: hsl(var(--foreground));
font-size: 18px;
font-weight: bold;
}
@@ -58,7 +58,7 @@ h3 {
/* ==================== 四级标题 ==================== */
h4 {
margin: 0 8px 10px;
- color: #D97757;
+ color: var(--md-primary-color);
font-size: 16px;
font-weight: bold;
}
@@ -68,7 +68,7 @@ h5 {
display: inline-block;
margin: 0 8px 10px;
padding: 4px 10px;
- color: #3B3B38;
+ color: hsl(var(--foreground));
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgb(189, 224, 254);
border-radius: 20px;
@@ -79,7 +79,7 @@ h5 {
/* ==================== 六级标题 ==================== */
h6 {
margin: 0 8px 10px;
- color: #D97757;
+ color: var(--md-primary-color);
font-size: 16px;
font-weight: bold;
}
@@ -87,7 +87,7 @@ h6 {
/* ==================== 段落 ==================== */
p {
margin: 20px 0;
- color: #3B3B38;
+ color: hsl(var(--foreground));
line-height: 2;
letter-spacing: 0px;
font-size: 15px;
@@ -97,15 +97,15 @@ p {
blockquote {
font-style: normal;
padding: 15px 12px;
- border-left: 7px solid rgba(228, 177, 160, 1);
+ border-left: 7px solid var(--md-accent-color);
border-radius: 10px;
- color: #3B3B38;
- background-color: rgba(255, 255, 255, 0.6);
+ color: hsl(var(--foreground));
+ background-color: var(--blockquote-background);
margin: 12px 0;
}
blockquote > p {
- color: #3B3B38;
+ color: hsl(var(--foreground));
font-size: 14px;
margin: 0;
}
@@ -139,7 +139,7 @@ ul {
li {
margin: 0.2em 0;
- color: #3B3B38;
+ color: hsl(var(--foreground));
font-size: 15px;
}
@@ -147,35 +147,35 @@ li {
hr {
border-style: solid;
border-width: 1px 0 0;
- border-color: #D97757;
+ border-color: var(--md-primary-color);
margin: 0;
}
/* ==================== 强调 ==================== */
strong {
- color: #3B3B38;
+ color: hsl(var(--foreground));
font-weight: bold;
}
/* ==================== 标记高亮 ==================== */
.markup-highlight {
- background-color: #3B3B3B;
+ background-color: hsl(var(--foreground));
padding: 10px;
- color: #FAF9F5;
+ color: var(--md-container-bg);
}
.markup-underline {
text-decoration: underline;
- text-decoration-color: #E4B1A0;
+ text-decoration-color: var(--md-accent-color);
}
/* ==================== 链接 ==================== */
a {
- color: #D97757;
+ color: var(--md-primary-color);
text-decoration: none;
}
/* ==================== 表格 ==================== */
th {
- background: rgba(217, 119, 87, 0.1);
+ background: color-mix(in srgb, var(--md-primary-color) 10%, transparent);
}