自定义了样式设置,但是粘贴到微信编辑器后有问题,有的样式生效有的样式未生效
Opened this issue · 2 comments
volcanolin commented
我个人觉得标题之间的段落间距过大, 就更改了样式设置,缩小了标题之间的段落间距,并修改了经典主题的二级标题样式。样式修改后,在编辑器页面渲染是正常的,是我想要的效果,但是粘贴到微信编辑器后大部分自定义样式未生效,仅有少部分样式生效了。我试过在微信编辑器链接后加&mpeditor=0
,并没有用。
我用自己部署的 Docker 版本和 README中的 https://doocs.github.io/md 都会出现一样的问题。
下边的截图分别是是md编辑器页面、微信编辑器页面、文章预览页面的效果。
以下是我修改后的样式设置,以供参考:
/**
* 按 Alt/Option + Shift + F 可格式化
* 如需使用主题色,请使用 var(--md-primary-color) 代替颜色值
* 如:color: var(--md-primary-color);
*
* 召集令:如果你有好看的主题样式,欢迎分享,让更多人能够使用到你的主题。
* 提交区:https://github.com/doocs/md/discussions/426
*/
/* 顶层容器样式 */
container {
}
/* 一级标题样式 */
h1 {
margin-top: 10px; /* 设置段落元素与其上方元素的间距 */
margin-bottom: 10px; /* 设置段落元素与下方文本的间距 */
}
/* 二级标题样式 */
h2 {
margin-top: 10px; /* 设置段落元素与其上方元素的间距 */
margin-bottom: 10px; /* 设置段落元素与下方文本的间距 */
border-radius: 8px; /* 设置边框圆角像素 */
background-color: var(--md-primary-color); /* 设置背景颜色为主题色 */
padding-top: 0px; /* 设置顶部内边距像素 */
padding-bottom: 0px; /* 设置底部内边距像素 */
padding-left: 10px; /* 设置左侧内边距像素 */
padding-right: 10px; /* 设置右侧内边距像素 */
color: white; /* 设置文本颜色为白色 */
}
/* 三级标题样式 */
h3 {
margin-top: 10px; /* 设置段落元素与其上方元素的间距 */
margin-bottom: 10px; /* 设置段落元素与下方文本的间距 */
}
/* 四级标题样式 */
h4 {
margin-top: 10px; /* 设置段落元素与其上方元素的间距 */
margin-bottom: 10px; /* 设置段落元素与下方文本的间距 */
}
/* 五级标题样式 */
h5 {
margin-top: 10px; /* 设置段落元素与其上方元素的间距 */
margin-bottom: 10px; /* 设置段落元素与下方文本的间距 */
}
/* 六级标题样式 */
h6 {
margin-top: 10px; /* 设置段落元素与其上方元素的间距 */
margin-bottom: 10px; /* 设置段落元素与下方文本的间距 */
}
/* 图片样式 */
image {
margin-top: 10px; /* 设置元素与其上方元素的间距 */
margin-bottom: 10px; /* 设置元素与下方文本的间距 */
}
/* 引用样式 */
blockquote {
margin-top: 10px; /* 设置元素与其上方元素的间距 */
margin-bottom: 10px; /* 设置元素与下方文本的间距 */
border-left: 3px solid var(--md-primary-color); /* 3px宽的实线,颜色为#4A90E2 */
padding-left: 10px; /* 为文本内容和边框之间添加一些间距 */
margin-left: 0; /* 根据需要调整外边距 */
}
/* 引用段落样式 */
blockquote_p {
}
/* GFM note 样式 */
blockquote_note {
}
/* GFM tip 样式 */
blockquote_tip {
}
/* GFM important 样式 */
blockquote_important {
}
/* GFM warning 样式 */
blockquote_warning {
}
/* GFM caution 样式 */
blockquote_caution {
}
/* GFM 通用标题 */
blockquote_title {
}
/* GFM note 标题 */
blockquote_title_note {
}
/* GFM tip 标题 */
blockquote_title_tip {
}
/* GFM important 标题 */
blockquote_title_important {
}
/* GFM warning 标题 */
blockquote_title_warning {
}
/* GFM caution 标题 */
blockquote_title_caution {
}
/* 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-top: 10px; /* 设置元素与其上方元素的间距 */
margin-bottom: 10px; /* 设置元素与下方文本的间距 */
}
/* 分割线样式 */
hr {
}
/* 行内代码样式 */
codespan {
}
/* 粗体样式 */
strong {
}
/* 链接样式 */
link {
}
/* 微信链接样式 */
wx_link {
}
/* 有序列表样式 */
ol {
}
/* 无序列表样式 */
ul {
}
/* 列表项样式 */
li {
}
/* 代码块样式 */
code {
}
/* 代码块外层样式 */
code_pre {
}
很喜欢这个编辑器,希望能够解决一下这个问题,祝越来越好😄
yanglbme commented
我们看看啥问题
volcanolin commented
我们看看啥问题
多谢多谢,辛苦了