Open
Description
In what scenarios do you need this feature?
目前思源笔记的预览模式复制到公众号我发现两个主要问题
- 不支持设置背景，比如方格样式
- 不支持复制伪元素到微信公众号
在思源里的样式
样式部分代码
.protyle-preview>.b3-typography {
font-size: 14px !important;
/* line-height: 1.75; */
color: #595959;
font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light;
letter-spacing: 2px;
background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);
background-size: 20px 20px;
background-position: center center;
}
.protyle-preview>.b3-typography blockquote::before {
content: "❝";
color: #9d97a3;
font-size: 34px;
line-height: 1;
font-weight: 700;
}
.protyle-preview>.b3-typography blockquote::after {
content: "❞";
float: right;
color: #9d97a3;
}
[data-theme-mode="light"] .protyle-preview>.b3-typography h1,
#preview .protyle-wysiwyg .h1{
font-weight: bold;
border-bottom: 2px solid rgba(15, 76, 129, 1);
text-align: center;
color: rgba(15, 76, 129, 1);
}在复制到公众号
而使用这个编辑器是可以复制完整样式到微信公众号的：https://markdown.com.cn/editor（使用主题为蔷薇紫）
Describe the optimal solution
比较思源复制和https://markdown.com.cn/editor复制的html结果（使用主题为蔷薇紫）
思源
<h1 id="20240501121746-ujmdeg9" updated="20240501121746"
style="margin: 10px 0px 1.5em; padding: 0.3em 4px; font-weight: bold; line-height: 1.25; font-size: 24px !important; text-align: center; color: rgb(15, 76, 129); border-bottom: 2px solid rgb(15, 76, 129); border-radius: 0px !important; font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light; font-style: normal; font-variant-ligatures: no-common-ligatures; font-variant-caps: normal; letter-spacing: 2px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
测试思源笔记预览模式复制到微信公众号</h1>
<p id="20240501121746-rsjtg0g" updated="20240501121746"
style="margin: 2px 0px; line-height: 1.625; padding: 4px; border-radius: var(--b3-border-radius); color: rgb(89, 89, 89); font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light; font-size: 14px; font-style: normal; font-variant-ligatures: no-common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: 2px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
测试</p>
<blockquote id="20240501121746-xm434pl" updated="20240501121746"
style="margin: 4px 0px; padding: 2px 4px; color: rgb(106, 105, 105); border: 1px solid rgb(224, 239, 249); background-color: rgba(115, 168, 199, 0.06); border-radius: 7px !important; font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light; font-size: 14px; font-style: normal; font-variant-ligatures: no-common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: 2px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
<p id="20240501121746-ro1jnqm" updated="20240501121746"
style="margin: 2px 0px 2px 1em; line-height: 1.625; padding: 4px; border-radius: var(--b3-border-radius);">
Google 搜索<span data-type="strong"
style="font-weight: bold; color: var(--b3-protyle-inline-strong-color);">自动补全功能</span>的强大，相信不少朋友都能感受到，它帮助我们更快地“补全”我们所要输入的搜索关键字。那么，它怎么知道我们要输入什么内容？它又是如何工作的？在这篇文章里，我们一起来看看。
</p>
</blockquote>
<p id="20240501121746-5fn4354" updated="20240501121746"
style="margin: 2px 0px; line-height: 1.625; padding: 4px; border-radius: var(--b3-border-radius); color: rgb(89, 89, 89); font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light; font-size: 14px; font-style: normal; font-variant-ligatures: no-common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: 2px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
</p>另一款markdown转微信公众号编辑器
<section id="nice" data-tool="markdown编辑器" data-website="https://markdown.com.cn/editor"
style="font-size: 16px; padding: 25px 30px; word-spacing: 0px; word-break: break-word; word-wrap: break-word; text-align: justify; margin-top: -10px; line-height: 1.75; color: #595959; font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light; letter-spacing: 2px; background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); background-size: 20px 20px; background-position: center center;">
<h1 data-tool="markdown.com.cn编辑器"
style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 25px;"><span
class="prefix" style="display: none;"></span><span class="content"
style="display: inline-block; font-weight: bold; color: #595959;">测试思源笔记预览模式复制到微信公众号</span><span
class="suffix"></span></h1>
<p data-tool="markdown.com.cn编辑器"
style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">
测试</p>
<blockquote data-tool="markdown.com.cn编辑器"
style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; text-size-adjust: 100%; line-height: 1.55em; font-weight: 400; border-radius: 6px; color: #595959; font-style: normal; text-align: left; box-sizing: inherit; border-left: none; border: 1px solid #DEC6FB; background: #F6EEFF;">
<span style="color: #DEC6FB; font-size: 34px; line-height: 1; font-weight: 700;">❝</span>
<p
style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px; margin: 0px; line-height: 26px; color: #595959;">
Google 搜索<strong
style="color: #595959; font-weight: bold;"><span>「</span>自动补全功能<span>」</span></strong>的强大，相信不少朋友都能感受到，它帮助我们更快地“补全”我们所要输入的搜索关键字。那么，它怎么知道我们要输入什么内容？它又是如何工作的？在这篇文章里，我们一起来看看。
</p>
<span style="float: right; color: #DEC6FB;">❞</span>
</blockquote>
<p data-tool="markdown.com.cn编辑器"
style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">
</p>
</section>可以发现
- 思源在复制到微信公众号的时候，并没有用section包裹，导致针对.b3-typography设置的背景丢失
- 另一款编辑器在导出时，会把伪元素改为span标签，把之前针对伪元素的css样式加到该标签去
思源可以参考下
Describe the candidate solution
无
Other information
No response
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
Activity