主题召集 #426

YangFong · 2024-08-29T06:13:50Z

YangFong
Aug 29, 2024
Maintainer

我们最近新加入了一个功能：主题。也就是样式预设，使用者可以通过选择，快速切换一套方案。

当前，除了以往的「经典」主题之外，我们已加入了一套「优雅」主题，它的样式风格，能够吸引不少人的眼光。

现在，我们公开召集主题样式，使用者们可以分享自己的主题，对于其中有特色的主题，我们会将其作为一套预设方案，提供给所有人选择，如：

Aug 29, 2024

可以直接在该 issue 下留言分享，将「自定义CSS」中的内容发出，比如我这套「红红火火」：

/*
  按Ctrl/Command+F可格式化
*/
/* 一级标题样式 */
h1 {
  color: red;
}
/* 二级标题样式 */
h2 {
 color: red; 
}
/* 三级标题样式 */
h3 {
  color: red;
}
/* 四级标题样式 */
h4 {
  color: red;
}
/* 图片样式 */
image {
}
/* 引用样式 */
blockquote {
}
/* 引用段落样式 */
blockquote_p {
}
/* 段落样式 */
p {
}
/* 分割线样式 */
hr {
}
/* 行内代码样式 */
codespan {
}
/* 粗体样式 */
strong {
}
/* 链接样式 */
link {
}
/* 微信链接样式 */
wx_link {
}
/* 有序列表样式 */
ol {
}
/* 无序列表样式 */
ul {
}
/* 列表项样式 */
li {
}
/* 代码块样式 */
code {
}

View full answer

YangFong · 2024-08-29T06:14:22Z

YangFong
Aug 29, 2024
Maintainer Author

可以直接在该 issue 下留言分享，将「自定义CSS」中的内容发出，比如我这套「红红火火」：

/*
  按Ctrl/Command+F可格式化
*/
/* 一级标题样式 */
h1 {
  color: red;
}
/* 二级标题样式 */
h2 {
 color: red; 
}
/* 三级标题样式 */
h3 {
  color: red;
}
/* 四级标题样式 */
h4 {
  color: red;
}
/* 图片样式 */
image {
}
/* 引用样式 */
blockquote {
}
/* 引用段落样式 */
blockquote_p {
}
/* 段落样式 */
p {
}
/* 分割线样式 */
hr {
}
/* 行内代码样式 */
codespan {
}
/* 粗体样式 */
strong {
}
/* 链接样式 */
link {
}
/* 微信链接样式 */
wx_link {
}
/* 有序列表样式 */
ol {
}
/* 无序列表样式 */
ul {
}
/* 列表项样式 */
li {
}
/* 代码块样式 */
code {
}

0 replies

mybolide · 2024-09-12T10:36:58Z

mybolide
Sep 12, 2024

似乎有点问题，code代码在pre里，pre标签的样式无法覆盖，是否可以添加对pre样式修改的支持

0 replies

YangFong · 2024-09-14T00:57:52Z

YangFong
Sep 14, 2024
Maintainer Author

@mybolide 这是一个疏漏，我已进行了调整，可见 #403

0 replies

DigitalNomad-Chat · 2024-12-05T03:19:59Z

DigitalNomad-Chat
Dec 5, 2024

为什么我刚通过 docker run -d -p 8080:80 doocs/md:latest 部署的项目版本，没有主题这个功能呢？

1 reply

yanglbme Dec 9, 2024
Maintainer

@DigitalNomad-Chat 镜像已更新，可以重新拉一下

YangFong · 2024-12-05T03:25:04Z

YangFong
Dec 5, 2024
Maintainer Author

@DigitalNomad-Chat Docker 版本不是最新版本。在上一个版本之后，更新较多，当前还未稳定下来，所以当前没有去更新 Docker。

0 replies

pod2gR · 2024-12-25T01:55:39Z

pod2gR
Dec 25, 2024

默认的“优雅”主题挺好用，但是二级标题有点太扎眼了，我的自定义方案稍微改了下：

h2 {
color: var(--md-primary-color);
background: transparent !important;
box-shadow: none !important;
}

0 replies

okooo5km · 2025-02-26T03:52:28Z

okooo5km
Feb 26, 2025

自用主题 Simple （简洁）

/**
 * 按 Alt/Option + Shift + F 可格式化
 * 如需使用主题色，请使用 var(--md-primary-color) 代替颜色值
 * 如：color: var(--md-primary-color);
 *
 * 召集令：如果你有好看的主题样式，欢迎分享，让更多人能够使用到你的主题。
 * 提交区：https://github.com/doocs/md/discussions/426
 */
/* 顶层容器样式 */
container {
  text-align: left;
  line-height: 1.75;
}
/* 一级标题样式 */
h1 {
  display: table;
  padding: 0.5em 1em;
  border-bottom: 2px solid var(--md-primary-color);
  margin: 2em auto 1em;
  color: hsl(var(--foreground));
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.05);
}
/* 二级标题样式 */
h2 {
  display: table;
  padding: 0.3em 1.2em;
  margin: 4em auto 2em;
  color: #fff;
  background: var(--md-primary-color);
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  border-radius: 8px 24px 8px 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
/* 三级标题样式 */
h3 {
  padding-left: 12px;
  font-size: 1.2em;
  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);
  color: var(--md-primary-color);
  margin: 2em 8px 0.75em 0;
  font-weight: bold;
}
/* 四级标题样式 */
h4 {
  margin: 2em 8px 0.5em;
  color: var(--md-primary-color);
  font-size: 1.1em;
  font-weight: bold;
  border-radius: 6px;
}
/* 五级标题样式 */
h5 {
  margin: 1.5em 8px 0.5em;
  color: var(--md-primary-color);
  font-size: 1em;
  font-weight: bold;
  border-radius: 6px;
}
/* 六级标题样式 */
h6 {
  margin: 1.5em 8px 0.5em;
  font-size: 1em;
  color: var(--md-primary-color);
  border-radius: 6px;
}
/* 图片样式 */
image {
  display: block;
  width: 100% !important;
  margin: 0.1em auto 0.5em;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
/* 引用样式 */
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);
  background: var(--blockquote-background);
  margin-bottom: 1em;
  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);
}
/* 引用段落样式 */
blockquote_p {
  display: block;
  font-size: 1em;
  letter-spacing: 0.1em;
  color: hsl(var(--foreground));
}
/* GFM note 样式 */
blockquote_note {
  font-style: italic;
}
/* GFM tip 样式 */
blockquote_tip {
  font-style: italic;
}
/* GFM important 样式 */
blockquote_important {
  font-style: italic;
}
/* GFM warning 样式 */
blockquote_warning {
  font-style: italic;
}
/* GFM caution 样式 */
blockquote_caution {
  font-style: italic;
}
/* GFM 通用标题 */
blockquote_title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
}
/* GFM note 标题 */
blockquote_title_note {
  color: #478be6;
}
/* GFM tip 标题 */
blockquote_title_tip {
  color: #57ab5a;
}
/* GFM important 标题 */
blockquote_title_important {
  color: #986ee2;
}
/* GFM warning 标题 */
blockquote_title_warning {
  color: #c69026;
}
/* GFM caution 标题 */
blockquote_title_caution {
  color: #e5534b;
}
/* GFM note 段落样式 */
blockquote_p_note {
}
/* GFM tip 段落样式 */
blockquote_p_tip {
}
/* GFM important 段落样式 */
blockquote_p_important {
}
/* GFM warning 段落样式 */
blockquote_p_warning {
}
/* GFM caution 段落样式 */
blockquote_p_caution {
}
/* 段落样式 */
p {
  margin: 1.5em 8px;
  letter-spacing: 0.1em;
  color: hsl(var(--foreground));
  text-align: justify;
}
/* 分割线样式 */
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));
}
/* 行内代码样式 */
codespan {
  font-size: 90%;
  color: #d14;
  background: rgba(27,31,35,.05);
  padding: 3px 5px;
  border-radius: 4px;
}
/* 粗体样式 */
strong {
  color: var(--md-primary-color);
  font-weight: bold;
  font-size: inherit;
}
/* 链接样式 */
link {
  color: #576b95;
}
/* 微信链接样式 */
wx_link {
  color: #576b95;
  text-decoration: none;
}
/* 有序列表样式 */
ol {
  padding-left: 1.5em;
  margin-left: 0;
  color: hsl(var(--foreground));
}
/* 无序列表样式 */
ul {
  list-style: none;
  padding-left: 1.5em;
  margin-left: 0;
  color: hsl(var(--foreground));
}
/* 列表项样式 */
li {
  text-indent: -1em;
  display: block;
  margin: 0.5em 8px;
  color: hsl(var(--foreground));
}
/* 代码块样式 */
code {
  margin: 0;
  white-space: pre-wrap;
  font-family: 'Fira Code', Menlo, Operator Mono, Consolas, Monaco, monospace;
}
/* 代码块外层样式 */
code_pre {
  font-size: 14px;
  overflow-x: auto;
  border-radius: 8px;
  padding: 1em;
  line-height: 1.5;
  margin: 10px 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

3 replies

YangFong Feb 26, 2025
Maintainer Author

很有特色，我准备进行微调之后，将其作为内置主题存在，你看如何

okooo5km Feb 26, 2025

好的呢😉

chen-bingzhi Mar 16, 2025

学习了

YiDingg · 2025-02-27T12:40:48Z

YiDingg
Feb 27, 2025

在 @okooo5km 代码的基础上，修改了部分间距与字号，使排版更紧凑，观感有一定提升，主题颜色为 rgba(107, 97, 235, 1)。

PC 端预览：

手机端预览：

/*自定义样式，实时生效*/

/*自定义样式，实时生效*/

/* 全局属性
 * 页边距 padding:10px;
 * 全文字体 font-family:ptima-Regular;
 * 英文换行 word-break:break-all;
 */
#nice {
  font-family:PingFangSC-Light;
}

/* 段落，下方未标注标签参数均同此处
 * 上边距 margin-top:5px;
 * 下边距 margin-bottom:5px;
 * 行高 line-height:26px;
 * 词间距 word-spacing:3px;
 * 字间距 letter-spacing:3px;
 * 对齐 text-align:left;
 * 颜色 color:#ffffff;
 * 字体大小 font-size:5px;
 * 首行缩进 text-indent:2em;
 */
#nice p {
  margin:0px 0px;
  line-height:1.5;
  letter-spacing:0.2em;
  font-size: 12px;
  word-spacing:0.1em;
}

/* 一级标题 */
#nice h1 {
  border-bottom: 2px solid #0e88eb;
  font-size: 1em;
  text-align: center;
}

/* 一级标题内容 */
#nice h1 .content {
  font-size: 1em;
  display:inline-block;
  font-weight: bold;
  //background: #0e88eb;
  color:#ffffff;
  color: #0e88eb;
  padding:3px 10px 1px;
  border-top-right-radius:3px;
  border-top-left-radius:3px;
  margin-right:3px;
}

/* 一级标题修饰 请参考有实例的主题 */
#nice h1:after {
}
 
/* 二级标题 */
#nice h2 {
  text-align:left;
  margin:20px 10px 0px 0px;
}

/* 二级标题内容 */
#nice h2 .content {
  font-family:STHeitiSC-Light;
  font-size: 14px;
  color:#0e88eb;
  font-weight:bolder;
  display:inline-block;
  padding-left:10px;
  border-left:5px solid #0e88eb;
}

/* 二级标题修饰 请参考有实例的主题 */
#nice h2:after {
}

/* 三级标题 */
#nice h3 {
    font-size: 18px;
     color: #0e88eb;
}

/* 三级标题内容 */
#nice h3 .content {
  font-size: 13px;
  color: #0e88eb;
}

/* 三级标题修饰 请参考有实例的主题 */
#nice h3:after {
}

/* 无序列表整体样式
 * list-style-type: square|circle|disc;
 */
#nice ul {
}

/* 有序列表整体样式
 * list-style-type: upper-roman|lower-greek|lower-alpha;
 */
#nice ol {
}

/* 列表内容，不要设置li
 */
#nice li section {
  font-size: 11px;
}

/* 引用
 * 左边缘颜色 border-left-color:black;
 * 背景色 background:gray;
 */
#nice blockquote {
  font-style:normal;
  border-left:none;
  padding:10px;
  position:relative;
  line-height:1.8;
  border-radius:0px 0px 10px 10px;
  color: #0e88eb;
  background:#fff;
  box-shadow:#84A1A8 0px 10px 15px;
}
#nice blockquote:before {
 % content:"★  ";
  display:inline;
  color: #0e88eb;
  font-size:1.2em;
  font-family:Arial,serif;
  line-height:0em;
  font-weight:700;
}

/* 引用文字 */
#nice blockquote p {
  color: #0e88eb;
  font-size:12px;
  display:inline;
}
#nice blockquote:after {
  %content:"”";
  float:right;
  display:inline;
  color:#0e88eb;
  font-size:1.2em;
  line-height:1em;
  font-weight:500;
}

/* 链接 
 * border-bottom: 1px solid #009688;
 */
#nice a {
  color: #0e88eb;
  border-bottom: 0px solid #ff3502;
  font-family:STHeitiSC-Light;
}

/* 加粗 */
#nice strong {
  font-weight: border;
  color: #0e88eb;
}

/* 斜体 */
#nice em {
  color: #555555;
  letter-spacing:0.0em;
}

/* 加粗斜体 */
#nice em strong {
  color: #0e88fa;
  letter-spacing:0.3em;
}

/* 删除线 */
#nice del {
}
 
/* 分隔线
 * 粗细、样式和颜色
 * border-top:1px solid #3e3e3e;
 */
#nice hr {
  height:1px;
  padding:0;
  border:none;
  border-top:medium solidid #333;
  text-align:center;
  background-image:linear-gradient(to right,rgba(248,57,41,0),#0e88eb,rgba(248,57,41,0));
}

/* 图片
 * 宽度 width:80%;
 * 居中 margin:0 auto;
 * 居左 margin:0 0;
 */
#nice img {
  border-radius:0px 0px 5px 5px;
  display:block;
  margin:20px auto;
  width:85%;
  height:100%;
  object-fit:contain;
  box-shadow:#84A1A8 0px 10px 15px;
}

/* 图片描述文字 */
#nice figcaption {
  display:block;
  font-size:12px;
  font-family:PingFangSC-Light;
}

/* 行内代码 */
#nice p code, #nice li code {
  color:/*自定义样式，实时生效*/
}

/* 非微信代码块
 * 代码块不换行 display:-webkit-box !important;
 * 代码块换行 display:block;
 */
#nice pre code {
}

/*
 * 表格内的单元格
 * 字体大小 font-size: 16px;
 * 边框 border: 1px solid #ccc;
 * 内边距 padding: 5px 10px;
 */
#nice table tr th,
#nice table tr td {
  font-size: 15px;
}

/* 脚注文字 */
#nice .footnote-word {
  color: #2d59b3;
}

/* 脚注上标 */
#nice .footnote-ref {
  color: #6a88c5;
}

/* 非微信代码块
 * 代码块不换行 display:-webkit-box !important;
 * 代码块换行 display:block;
 */
#nice pre code {
}

/* 脚注文字 */
#nice .footnote-word {
  color: #0e88eb;
}

/* 脚注上标 */
#nice .footnote-ref {
  color: #0e88eb;
}

/*脚注链接样式*/
#nice .footnote-item em {
  color: #082a71;
  font-size:12px;
}

/* "参考资料"四个字 
 * 内容 content: "参考资料";
 */
#nice .footnotes-sep:before {
}

/* 参考资料编号 */
#nice .footnote-num {
}

/* 参考资料文字 */
#nice .footnote-item p { 
}

/* 参考资料解释 */
#nice .footnote-item p em {
}

/* 行间公式
 * 最大宽度 max-width: 300% !important;
 */
#nice .block-equation svg {
  width:60%;
  height:100%;
}

/* 行内公式
 */
#nice .inline-equation svg {
}

3 replies

prjoker Aug 27, 2025

你这是markdown nice的语法吧？

YiDingg Aug 27, 2025

你这是markdown nice的语法吧？

css 语法

prjoker Aug 27, 2025

你这是markdown nice的语法吧？

css 语法

哦我知道是css语法，但是这个名称写的像是markdown nice的名称。

hello-qu · 2025-04-23T06:24:41Z

hello-qu
Apr 23, 2025

开发者你好，我在自定义CSS 中没有看到斜体的 CSS自定义em {} 似乎不生效？

1 reply

YangFong Apr 23, 2025
Maintainer Author

开发者你好，我在自定义CSS 中没有看到斜体的 CSS自定义em {} 似乎不生效？

这确实是个 Bug，当 #654 关闭时，修复便完成了。

dabing1022 · 2025-04-29T01:15:27Z

dabing1022
Apr 29, 2025

要是有能够在线直接预览的模块就好了以ugc的形式用户提交上去其他人可以直接预览使用

0 replies

harryluo163 · 2025-07-16T07:11:56Z

harryluo163
Jul 16, 2025

修改了h1 、h2、P ，顺便截取url参数值（markdown格式），直接调viewHTML，就可以直接浏览，供第三方直接调用。

1 reply

harryluo163 Jul 16, 2025

实现比较粗暴简单，就是postProcessHtml，生成html，过程中将html，在处理下

export function beautifyHtml(htmlString) {
const tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;

const h2Elements = Array.from(tempDiv.querySelectorAll('h2'));
if (h2Elements.length === 0) return htmlString;

const fragment = document.createDocumentFragment();
let lastProcessedNode = tempDiv.firstChild;

h2Elements.forEach((h2, index) => {
// 1. 添加当前 h2 之前的所有节点
while (lastProcessedNode && lastProcessedNode !== h2) {
const nextNode = lastProcessedNode.nextSibling;
fragment.appendChild(lastProcessedNode.cloneNode(true));
lastProcessedNode = nextNode;
}

// 2. 创建 wrapperDiv（作为相对定位的容器）
const wrapperDiv = document.createElement('div');
wrapperDiv.setAttribute('style', `
     margin: 10px;
       background-color: white;
      padding: 10px;
      border: 15px solid #1595f6;
      border-radius: 15px;

      padding: 19px;
      background-clip: padding-box;
`);


// 3. 创建 h2Container（用于包裹 h2 和 img）
const h2Container = document.createElement('div');
h2Container.style.display = 'flex'; // 关键：父容器设为相对定位
h2Container.style['justify-content'] = 'center'; // 为图片预留空间（图片宽度 + 间距）

// 4. 克隆 h2 元素
const h2Clone = h2.cloneNode(true); // 深克隆，保留所有子节点
h2Clone.style.marginLeft = '0'; // 避免默认 margin 影响

// 5. 创建图片元素（绝对定位在 h2Container 内）
const img = document.createElement('img');
img.src = '/md2html/assets/images/h2.png';
img.style.position = 'relative'; // 关键：绝对定位
img.style.left = '0px'; // 固定在 h2Container 内部左侧
img.style.top = '5px'; // 固定在 h2Container 内部左侧


img.style.width = '50px'; // 图片宽度
img.style.height = '50px'; // 图片高度

// 6. 将 img 和 h2Clone 添加到 h2Container
h2Container.appendChild(img);
h2Container.appendChild(h2Clone);

// 7. 将 h2Container 添加到 wrapperDiv
wrapperDiv.appendChild(h2Container);

// 8. 收集 h2 之后的所有同级节点
let currentNode = h2.nextSibling;
while (currentNode) {
  if (currentNode.nodeType === Node.ELEMENT_NODE && currentNode.tagName === 'H2') {
    break;
  }
  wrapperDiv.appendChild(currentNode.cloneNode(true));
  currentNode = currentNode.nextSibling;
}

// 9. 将 wrapperDiv 添加到片段
fragment.appendChild(wrapperDiv);

// 10. 更新 lastProcessedNode
lastProcessedNode = h2Elements[index + 1] || null;

});

// 11. 处理最后一个 h2 之后的所有节点
while (lastProcessedNode) {
const nextNode = lastProcessedNode.nextSibling;
fragment.appendChild(lastProcessedNode.cloneNode(true));
lastProcessedNode = nextNode;
}

// 12. 替换 tempDiv 的内容
tempDiv.innerHTML = '';
tempDiv.appendChild(fragment);

return tempDiv.innerHTML;
}

Uh oh!

主题召集 #426

Uh oh!

YangFong Aug 29, 2024 Maintainer

Replies: 11 comments · 9 replies

Uh oh!

YangFong Aug 29, 2024 Maintainer Author

Uh oh!

Uh oh!

YangFong Sep 14, 2024 Maintainer Author

Uh oh!

Uh oh!

yanglbme Dec 9, 2024 Maintainer

Uh oh!

YangFong Dec 5, 2024 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

YangFong Feb 26, 2025 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

YangFong Apr 23, 2025 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

YangFong
Aug 29, 2024
Maintainer

Replies: 11 comments 9 replies

YangFong
Aug 29, 2024
Maintainer Author

YangFong
Sep 14, 2024
Maintainer Author

yanglbme Dec 9, 2024
Maintainer

YangFong
Dec 5, 2024
Maintainer Author

YangFong Feb 26, 2025
Maintainer Author

YangFong Apr 23, 2025
Maintainer Author