feat(baoyu-markdown-to-html): add markdown to HTML converter skill

Converts markdown to styled HTML with inline CSS, code highlighting,
math, PlantUML, footnotes, alerts, and WeChat-compatible themes.
This commit is contained in:
Jim Liu 宝玉
2026-01-28 21:37:30 -06:00
parent 40363194be
commit 5f994589b3
19 changed files with 3595 additions and 0 deletions
@@ -0,0 +1,34 @@
/**
* MD 基础主题样式
* 包含所有元素的基础样式和 CSS 变量定义
*/
/* ==================== 容器样式 ==================== */
section,
container {
font-family: var(--md-font-family);
font-size: var(--md-font-size);
line-height: 1.75;
text-align: left;
}
/* 确保 #output 容器应用基础样式 */
#output {
font-family: var(--md-font-family);
font-size: var(--md-font-size);
line-height: 1.75;
text-align: left;
}
/* ==================== Global resets ==================== */
blockquote {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
/* 去除第一个元素的 margin-top */
#output section > :first-child {
margin-top: 0 !important;
}
@@ -0,0 +1,433 @@
/**
* MD 默认主题(经典主题)
* 按 Alt/Option + Shift + F 可格式化
* 如需使用主题色,请使用 var(--md-primary-color) 代替颜色值
*/
/* ==================== 一级标题 ==================== */
h1 {
display: table;
padding: 0 1em;
border-bottom: 2px solid var(--md-primary-color);
margin: 2em auto 1em;
color: hsl(var(--foreground));
font-size: calc(var(--md-font-size) * 1.2);
font-weight: bold;
text-align: center;
}
/* ==================== 二级标题 ==================== */
h2 {
display: table;
padding: 0 0.2em;
margin: 4em auto 2em;
color: #fff;
background: var(--md-primary-color);
font-size: calc(var(--md-font-size) * 1.2);
font-weight: bold;
text-align: center;
}
/* ==================== 三级标题 ==================== */
h3 {
padding-left: 8px;
border-left: 3px solid var(--md-primary-color);
margin: 2em 8px 0.75em 0;
color: hsl(var(--foreground));
font-size: calc(var(--md-font-size) * 1.1);
font-weight: bold;
line-height: 1.2;
}
/* ==================== 四级标题 ==================== */
h4 {
margin: 2em 8px 0.5em;
color: var(--md-primary-color);
font-size: calc(var(--md-font-size) * 1);
font-weight: bold;
}
/* ==================== 五级标题 ==================== */
h5 {
margin: 1.5em 8px 0.5em;
color: var(--md-primary-color);
font-size: calc(var(--md-font-size) * 1);
font-weight: bold;
}
/* ==================== 六级标题 ==================== */
h6 {
margin: 1.5em 8px 0.5em;
font-size: calc(var(--md-font-size) * 1);
color: var(--md-primary-color);
}
/* ==================== 段落 ==================== */
p {
margin: 1.5em 8px;
letter-spacing: 0.1em;
color: hsl(var(--foreground));
}
/* ==================== 引用块 ==================== */
blockquote {
font-style: normal;
padding: 1em;
border-left: 4px solid var(--md-primary-color);
border-radius: 6px;
color: hsl(var(--foreground));
background: var(--blockquote-background);
margin-bottom: 1em;
}
blockquote > p {
display: block;
font-size: 1em;
letter-spacing: 0.1em;
color: hsl(var(--foreground));
margin: 0;
}
/* ==================== GFM 警告块 ==================== */
.alert-title-note,
.alert-title-tip,
.alert-title-info,
.alert-title-important,
.alert-title-warning,
.alert-title-caution,
.alert-title-abstract,
.alert-title-summary,
.alert-title-tldr,
.alert-title-todo,
.alert-title-success,
.alert-title-done,
.alert-title-question,
.alert-title-help,
.alert-title-faq,
.alert-title-failure,
.alert-title-fail,
.alert-title-missing,
.alert-title-danger,
.alert-title-error,
.alert-title-bug,
.alert-title-example,
.alert-title-quote,
.alert-title-cite {
display: flex;
align-items: center;
gap: 0.5em;
margin-bottom: 0.5em;
}
.alert-title-note {
color: #478be6;
}
.alert-title-tip {
color: #57ab5a;
}
.alert-title-info {
color: #93c5fd;
}
.alert-title-important {
color: #986ee2;
}
.alert-title-warning {
color: #c69026;
}
.alert-title-caution {
color: #e5534b;
}
/* Obsidian-style callout colors */
.alert-title-abstract,
.alert-title-summary,
.alert-title-tldr {
color: #00bfff;
}
.alert-title-todo {
color: #478be6;
}
.alert-title-success,
.alert-title-done {
color: #57ab5a;
}
.alert-title-question,
.alert-title-help,
.alert-title-faq {
color: #c69026;
}
.alert-title-failure,
.alert-title-fail,
.alert-title-missing {
color: #e5534b;
}
.alert-title-danger,
.alert-title-error {
color: #e5534b;
}
.alert-title-bug {
color: #e5534b;
}
.alert-title-example {
color: #986ee2;
}
.alert-title-quote,
.alert-title-cite {
color: #9ca3af;
}
/* GFM Alert SVG 图标颜色 */
.alert-icon-note {
fill: #478be6;
}
.alert-icon-tip {
fill: #57ab5a;
}
.alert-icon-info {
fill: #93c5fd;
}
.alert-icon-important {
fill: #986ee2;
}
.alert-icon-warning {
fill: #c69026;
}
.alert-icon-caution {
fill: #e5534b;
}
/* Obsidian-style callout icon colors */
.alert-icon-abstract,
.alert-icon-summary,
.alert-icon-tldr {
fill: #00bfff;
}
.alert-icon-todo {
fill: #478be6;
}
.alert-icon-success,
.alert-icon-done {
fill: #57ab5a;
}
.alert-icon-question,
.alert-icon-help,
.alert-icon-faq {
fill: #c69026;
}
.alert-icon-failure,
.alert-icon-fail,
.alert-icon-missing {
fill: #e5534b;
}
.alert-icon-danger,
.alert-icon-error {
fill: #e5534b;
}
.alert-icon-bug {
fill: #e5534b;
}
.alert-icon-example {
fill: #986ee2;
}
.alert-icon-quote,
.alert-icon-cite {
fill: #9ca3af;
}
/* ==================== 代码块 ==================== */
pre.code__pre,
.hljs.code__pre {
font-size: 90%;
overflow-x: auto;
border-radius: 8px;
padding: 0 !important;
line-height: 1.5;
margin: 10px 8px;
}
/* ==================== 图片 ==================== */
img {
display: block;
max-width: 100%;
margin: 0.1em auto 0.5em;
border-radius: 4px;
}
/* ==================== 列表 ==================== */
ol {
padding-left: 1em;
margin-left: 0;
color: hsl(var(--foreground));
}
ul {
list-style: circle;
padding-left: 1em;
margin-left: 0;
color: hsl(var(--foreground));
}
li {
display: block;
margin: 0.2em 8px;
color: hsl(var(--foreground));
}
/* ==================== 脚注 ==================== */
/* footnotes 在 buildFootnotes() 中渲染为 <p> 标签 */
p.footnotes {
margin: 0.5em 8px;
font-size: 80%;
color: hsl(var(--foreground));
}
/* ==================== 图表 ==================== */
figure {
margin: 1.5em 8px;
color: hsl(var(--foreground));
}
figcaption,
.md-figcaption {
text-align: center;
color: #888;
font-size: 0.8em;
}
/* ==================== 分隔线 ==================== */
hr {
border-style: solid;
border-width: 2px 0 0;
border-color: rgba(0, 0, 0, 0.1);
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1, 0.5);
transform-origin: 0 0;
transform: scale(1, 0.5);
height: 0.4em;
margin: 1.5em 0;
}
/* ==================== 行内代码 ==================== */
code {
font-size: 90%;
color: #d14;
background: rgba(27, 31, 35, 0.05);
padding: 3px 5px;
border-radius: 4px;
}
/* 代码块内的 code 标签需要特殊处理(覆盖行内 code 样式) */
pre.code__pre > code,
.hljs.code__pre > code {
display: -webkit-box;
padding: 0.5em 1em 1em;
overflow-x: auto;
text-indent: 0;
color: inherit;
background: none;
white-space: nowrap;
margin: 0;
}
/* ==================== 强调 ==================== */
em {
font-style: italic;
font-size: inherit;
}
/* ==================== 链接 ==================== */
a {
color: #576b95;
text-decoration: none;
}
/* ==================== 粗体 ==================== */
strong {
color: var(--md-primary-color);
font-weight: bold;
font-size: inherit;
}
/* ==================== 表格 ==================== */
table {
color: hsl(var(--foreground));
}
thead {
font-weight: bold;
color: hsl(var(--foreground));
}
th {
border: 1px solid #dfdfdf;
padding: 0.25em 0.5em;
color: hsl(var(--foreground));
word-break: keep-all;
background: rgba(0, 0, 0, 0.05);
}
td {
border: 1px solid #dfdfdf;
padding: 0.25em 0.5em;
color: hsl(var(--foreground));
word-break: keep-all;
}
/* ==================== KaTeX 公式 ==================== */
.katex-inline {
max-width: 100%;
overflow-x: auto;
}
.katex-block {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 0.5em 0;
text-align: center;
}
/* ==================== 标记高亮 ==================== */
.markup-highlight {
background-color: var(--md-primary-color);
padding: 2px 4px;
border-radius: 2px;
color: #fff;
}
.markup-underline {
text-decoration: underline;
text-decoration-color: var(--md-primary-color);
}
.markup-wavyline {
text-decoration: underline wavy;
text-decoration-color: var(--md-primary-color);
text-decoration-thickness: 2px;
}
@@ -0,0 +1,136 @@
/**
* MD 优雅主题 (@brzhang)
* 在默认主题基础上添加优雅的视觉效果
*/
/* ==================== 标题样式 ==================== */
h1 {
padding: 0.5em 1em;
border-bottom: 2px solid var(--md-primary-color);
font-size: calc(var(--md-font-size) * 1.4);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
h2 {
padding: 0.3em 1em;
border-radius: 8px;
font-size: calc(var(--md-font-size) * 1.3);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h3 {
padding-left: 12px;
font-size: calc(var(--md-font-size) * 1.2);
border-left: 4px solid var(--md-primary-color);
border-bottom: 1px dashed var(--md-primary-color);
}
h4 {
font-size: calc(var(--md-font-size) * 1.1);
}
h5 {
font-size: var(--md-font-size);
}
h6 {
font-size: var(--md-font-size);
}
/* ==================== 引用块 ==================== */
blockquote {
font-style: italic;
padding: 1em 1em 1em 2em;
border-left: 4px solid var(--md-primary-color);
border-radius: 6px;
color: rgba(0, 0, 0, 0.6);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
margin-bottom: 1em;
}
.markdown-alert {
font-style: italic;
}
/* ==================== 代码块 ==================== */
pre.code__pre,
.hljs.code__pre {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}
pre.code__pre > code,
.hljs.code__pre > code {
font-family:
'Fira Code',
Menlo,
Operator Mono,
Consolas,
Monaco,
monospace;
}
/* ==================== 图片 ==================== */
img {
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
figcaption,
.md-figcaption {
text-align: center;
color: #888;
font-size: 0.8em;
}
/* ==================== 列表 ==================== */
ol {
padding-left: 1.5em;
}
ul {
list-style: none;
padding-left: 1.5em;
}
li {
margin: 0.5em 8px;
}
/* ==================== 分隔线 ==================== */
hr {
height: 1px;
border: none;
margin: 2em 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}
/* ==================== 表格 ==================== */
table {
border-collapse: separate;
border-spacing: 0;
border-radius: 8px;
margin: 1em 8px;
color: hsl(var(--foreground));
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
thead {
color: #fff;
}
td {
padding: 0.5em 1em;
}
/* ==================== 强调 ==================== */
em {
font-style: italic;
font-size: inherit;
}
/* ==================== 链接 ==================== */
a {
color: #576b95;
text-decoration: none;
}
@@ -0,0 +1,129 @@
/**
* MD 简洁主题 (@okooo5km)
* 简洁现代的设计风格
*/
/* ==================== 标题样式 ==================== */
h1 {
padding: 0.5em 1em;
font-size: calc(var(--md-font-size) * 1.4);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
}
h2 {
padding: 0.3em 1.2em;
font-size: calc(var(--md-font-size) * 1.3);
border-radius: 8px 24px 8px 24px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
h3 {
padding-left: 12px;
font-size: calc(var(--md-font-size) * 1.2);
border-radius: 6px;
line-height: 2.4em;
border-left: 4px solid var(--md-primary-color);
border-right: 1px solid color-mix(in srgb, var(--md-primary-color) 10%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--md-primary-color) 10%, transparent);
border-top: 1px solid color-mix(in srgb, var(--md-primary-color) 10%, transparent);
background: color-mix(in srgb, var(--md-primary-color) 8%, transparent);
}
h4 {
font-size: calc(var(--md-font-size) * 1.1);
border-radius: 6px;
}
h5 {
font-size: var(--md-font-size);
border-radius: 6px;
}
h6 {
font-size: var(--md-font-size);
border-radius: 6px;
}
/* ==================== 引用块 ==================== */
blockquote {
font-style: italic;
padding: 1em 1em 1em 2em;
color: rgba(0, 0, 0, 0.6);
border-bottom: 0.2px solid rgba(0, 0, 0, 0.04);
border-top: 0.2px solid rgba(0, 0, 0, 0.04);
border-right: 0.2px solid rgba(0, 0, 0, 0.04);
}
/* GFM Alert 样式覆盖 */
.markdown-alert-note,
.markdown-alert-tip,
.markdown-alert-info,
.markdown-alert-important,
.markdown-alert-warning,
.markdown-alert-caution {
font-style: italic;
}
/* ==================== 代码块 ==================== */
pre.code__pre,
.hljs.code__pre {
border: 1px solid rgba(0, 0, 0, 0.04);
}
pre.code__pre > code,
.hljs.code__pre > code {
font-family:
'Fira Code',
Menlo,
Operator Mono,
Consolas,
Monaco,
monospace;
}
/* ==================== 图片 ==================== */
img {
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.04);
}
figcaption,
.md-figcaption {
text-align: center;
color: #888;
font-size: 0.8em;
}
/* ==================== 列表 ==================== */
ol {
padding-left: 1.5em;
}
ul {
list-style: none;
padding-left: 1.5em;
}
li {
margin: 0.5em 8px;
}
/* ==================== 分隔线 ==================== */
hr {
height: 1px;
border: none;
margin: 2em 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}
/* ==================== 强调 ==================== */
em {
font-style: italic;
font-size: inherit;
}
/* ==================== 链接 ==================== */
a {
color: #576b95;
text-decoration: none;
}