mdnice / markdown-nice Goto Github PK

View Code? Open in Web Editor NEW

4.1K 4.1K 640.0 3.46 MB

支持主题设计的 Markdown 编辑器，让排版变 Nice

Home Page: https://mdnice.com/

License: GNU General Public License v3.0

HTML 0.43% CSS 4.59% JavaScript 94.97%

antd markdown react wechat

markdown-nice's People

Stargazers

Watchers

Forkers

qhhsy abnercai chenfh5 lx3xun otto-j betgar riversword awesome-archive tc9011 simlan deppwang bd2star houyujiang xiaolonglee huojunning devenlu nianzhechao qq781548819 gmtju hugoren banben codefunstech gc888 ifengkou lxfriday journeytonewland kylewhao liubiantao qianjigit ideas-design jeremyyin11 torns ylfeng250 popeye-liuxw ziyunhx kaedelin nongzhenli imloama jafeney ywenhao libin1991 journeyc raysonfang boomxy shalove gsy13213009 hhy5277 vseal001 liuchaonuaa kejishou views63 fear-wall dut3062796s qzztf jangocheng heyren66666 zliang66666ll awfeequdng danffer2019 davidalphafox iwahaha888 monkeyfx electron-boilerplate yicm caichengtech mokite alice-marsd bobodeng 375ro zq-jhon lemonc9 keming2008 qilifengxiang trantorrepository mpw0311 lookphper vleuschen chenquan yangpeng14 shfshanyue bianchengnan pylixm uvcc honlyhuang manjingzi lunawen macrozheng magic-coder flashield luzhiyuan787 microstrong0305 xkcoding arlionn colynn lnsongxf ws-php shhider plwater lichengtao1989 fanwangm

markdown-nice's Issues

请检查行内公式是否包含空格或中文

$a=1$

类似如上的写法会报错：

提示：请检查行内公式是否包含空格或中文。
$a=1$

当改成这种写法时就不会报错了：

$a \equiv 1$

测试+*-这类运算符也会报错，请问是无法直接使用这些符号吗？

工具2.0.0版本开发中，进行主题管理

自定义主题 by lemon-green-cell

/* 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 * 英文换行 word-break: break-all;
 */
.layout {
}

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

/* 一级标题 */
h1 {
}

/* 一级标题内容 */
h1 span {
}

/* 一级标题修饰 请参考有实例的主题 */
h1:after {
}

/* 二级标题 */
h2 {
  border-bottom: 2px solid rgb(239, 112, 96);
  font-size: 1.3em;
}

/* 二级标题内容 */
h2 span {
  display: inline-block;
  font-weight: bold;
  background: rgb(239, 112, 96);
  color: #ffffff;
  padding: 3px 10px 1px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  margin-right: 3px;
}

/* 二级标题修饰 请参考有实例的主题 */
h2:after {
  display: inline-block;
  content: " ";
  vertical-align: bottom;
  border-bottom: 36px solid #efebe9;
  border-right: 20px solid transparent;
}

/* 三级标题 */
h3 {
}

/* 三级标题内容 */
h3 span {
}

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

/* 列表内容 */
li {
}

/* 引用
 * 左边缘颜色 border-left-color: black;
 * 背景色 background: gray;
 */
blockquote {
  border-left-color: rgb(239, 112, 96);
  background: #fff9f9;
}

/* 引用文字 */
blockquote p {
}

/* 链接 */
a {
  color: rgb(239, 112, 96);
  border-bottom: 1px solid rgb(239, 112, 96);
}

/* 加粗 */
strong {
}

/* 斜体 */
em {
}

/* 加粗斜体 */
strong em {
}

/* 删除线 */
del {
}

/* 分隔线
 * 粗细、样式和颜色
 * border-top: 1px solid #3e3e3e;
 */
hr {
}

/* 图片
 * 宽度 width: 80%;
 * 居中 margin: 0 auto;
 * 居左 margin: 0 0;
 */
img {
}

/* 图片描述文字 */
figcaption {
}

/* 行内代码 */
p code, li code {
  color: rgb(239, 112, 96);
}

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

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

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

/* 脚注上标 */
.footnote-ref {
  color: rgb(239, 112, 96);
}

/* "参考资料"四个字 */
.footnotes-sep {
}

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

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

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

需要自定义图床的feature

工具很忙，但是能自定义图床很重要。我的公众号需要有很多数学公式，就是因为微信屏蔽了七牛云的免费域名才放弃md2all的。sm.ms的图片似乎也是屏蔽的。

我希望能有自定义图传功能，希望有限实现aliyun的，谢谢：）

ul ol 粘贴失去 margin-top 和 margin-bottom

运行环境：

操作系统	浏览器
macOS	Chrome

Markdown文本内容：

例如：

- 巨大边距列表
- 列表
- 列表

1. 另一个列表
2. 列表
3. 列表

ol,
ul {
  margin: 3em 2em;
  padding-left: 2em;
}

错误详情：

粘贴到微信原生图文编辑器后失去 margin-top 和 bottom（然而，left 和 right 是没有问题的）

另外，我发现 li 不能改颜色的原因是复制到微信后 li 变成了 li p……

自定义主题 by vseal001

/* 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 * 英文换行 word-break: break-all;
 */
.layout {
}

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

/* 一级标题 */
h1 {
}

/* 一级标题内容 */
h1 span {
}

/* 一级标题修饰 请参考有实例的主题 */
h1:after {
}

/* 二级标题 */
h2 {
}

/* 二级标题内容 */
h2 span {
}

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

/* 三级标题 */
h3 {
}

/* 三级标题内容 */
h3 span {
}

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

/* 列表内容 */
li {
}

/* 引用
* 左边缘颜色 border-left-color: black;
* 背景色 background: gray;
*/
blockquote {
}

/* 引用文字 */
blockquote p {
}

/* 链接 */
a {
}

/* 加粗 */
strong {
}

/* 斜体 */
em {
}

/* 加粗斜体 */
strong em {
}

/* 删除线 */
del {
}

/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
hr {
}

/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
img {
}

/* 图片描述文字 */
figcaption {
}

/* 行内代码 */
p code, li code {
}

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

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

/* 脚注文字 */
.footnote-word {
}

/* 脚注上标 */
.footnote-ref {
}

/* "参考资料"四个字 */
.footnotes-sep {
}

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

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

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

fork 之后，怎么修改成自己的多套样式来使用？

如题，fork 之后，想要修改成自己的多套样式，然后给同事使用。需要修改哪些配置？

代码中含有数学公式，转换似乎难以完成？

你好，如果markdown文件中含有数学latex数学公式，那么转换的时候非常慢，而且似乎难以完成。

七牛图片上传之后，域名应该修改为我自己的域名

运行环境：

操作系统	浏览器
windows	Chrome

Markdown文本内容：

七牛图片上传成功了，但是域名是 mdnice 的，需要有一个配置自己的域名的地方，以免每次上传完都要更改为自己的域名

可以调整代码块中字体大小么

我没有找到相关的，是没有还是我没有找到？

感谢作者提供了这么好用的工具。

自定义主题 by askuyue

/* 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 */
.layout {
}

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

/* 一级标题 */
h1 {
}

/* 一级标题内容 */
h1 span {
}

/* 一级标题修饰 请参考有实例的主题 */
h1:after {
}

/* 二级标题 */
h2 {
}

/* 二级标题内容 */
h2 span {
}

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

/* 三级标题 */
h3 {
}

/* 三级标题内容 */
h3 span {
}

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

/* 列表内容 */
li {
}

/* 引用
* 左边缘颜色 border-left-color: black;
* 背景色 background: gray;
*/
blockquote {
}

/* 引用文字 */
blockquote p {
}

/* 链接 */
a {
}

/* 加粗 */
strong {
}

/* 斜体 */
em {
}

/* 加粗斜体 */
strong em {
}

/* 删除线 */
del {
}

/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
hr {
}

/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
img {
}

/* 图片描述文字 */
figcaption {
}

/* 行内代码 */
p code, li code {
}

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

/* 脚注文字 */
.footnote-word {
}

/* 脚注上标 */
.footnote-ref {
}

非 mp.weixin.qq.com 的url链接无法插入

您这个工具一键转化后，排版很漂亮。但是非mp.weixin.qq.com 的url链接，在微信公众号中其实是无法插入的，还需要手动去删除太麻烦了。能不能将连接像这个转换工具一样做成References

一直报错 “行内公式格式错误，无法进行转换”

块级公式格式错误，无法进行转换

运行环境：

操作系统	浏览器
windows	Chrome

Google Chrome Version 76.0.3809.132 (Official Build) (64-bit)

出错md：

Provider Consumer 是 context 的两个属性。

  var context = {
    $$typeof: REACT_CONTEXT_TYPE,
    _currentValue: defaultValue,
    _currentValue2: defaultValue,
    Provider: null,
    Consumer: null
  };

Provider 的 $$typeof 是 REACT_PROVIDER_TYPE，它带有一个 _context 属性，指向的就是 context 本身，也就是自己的儿子有一个属性指向自己！！！

  context.Provider = {
    $$typeof: REACT_PROVIDER_TYPE,
    _context: context
  };

Consumer 的 $$typeof 是 REACT_CONTEXT_TYPE，它带也有一个 _context 属性，也是自己的儿子有一个属性指向自己！！！

  var Consumer = {
    $$typeof: REACT_CONTEXT_TYPE,
    _context: context,
    _calculateChangedBits: context._calculateChangedBits
  };

所以可以做一个猜想， Provider 的 value 属性赋予的新值肯定通过 _context 属性传到了 context 上，修改了 _currentValue。同样，Consumer 也是依据 _context 拿到了 context 的 _currentValue，然后 render(newValue) 执行 children 函数。

错误详情：

块级公式转换错误，控制台不报错

3q

楼主超级棒~~路过感谢~~

WeChat format 样式含有TOC目录的markdown转换存在问题？

形如这样的TOC:

转换后还是存在链接：

而这种链接wechat中仍不支持

Firefox下点击“复制”按钮报错

Chrome没问题

代码块在 iphone 手机无法滚动

发现在最新版本 Chrome 编辑好的文章，粘贴到公众号后，代码块在 iphone 手机无法左右滚动，在安卓手机中滚动却是正常的。

Md2All 也有这个问题（作者不知道为什么一直都没有修复），但是在 Firefox 中是没问题的。

最好，谢谢作者的这个工具，希望越来越好！

复制到微信时多出空行

运行环境：

操作系统	浏览器
macOS	Chrome

HTML 内容：

例如：

<section id="frontmatter">
    <section id="frontmatter-left">
        <img id="avatar" src="https://tva1.sinaimg.cn/large/006y8mN6gy1g73qxb4k8xj30dw0dwgmu.jpg">
        <p id="name">谭淞宸</p>
    </section>
    <section id="frontmatter-right">
        <p id="number">Vol. 00</p>
        <p id="word-count">📝 0.0 千字</p>
        <p id="time-estimation">🕒 0.0 分钟</p>
    </section>
</section>

对应的 CSS 见附件黄.txt。

错误详情：

在 Nice 编辑器内部显示正确：

但复制到微信时凭空多出了一个空行：

通过检查发现空行中有几个空格：

请问这有可能是什么原因？

格式化过程中替换 * 为 _

运行环境：

操作系统	浏览器
macOS	Chrome

Markdown文本内容：

见附件格式化示例.zip，部分 * 被替换为了 _，不影响使用，但可能有潜在的问题。

自定义主题 by tansongchen

/* 推荐名称：蓝莹 */

/* 主题颜色代号：
 * 主题色 hsl(210, 100%, 70%)
 * 加深色 hsl(210, 80%, 40%)
 * 减浅色 hsl(210, 100%, 90%)
 * 红移色 hsl(160, 100%, 45%)
 * 蓝移色 hsl(240, 100%, 70%)
 */

/* 全局属性 */

.layout {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif
}

/* 前言 */

#frontmatter-left {
  display: inline-block;
  width: 49%;
  border-right: 1px solid hsl(210, 100%, 70%);
  padding: 20px;
}

#avatar {
  border-radius: 5px;
}

#frontmatter-right {
  display: inline-block;
  width: 49%;
  vertical-align: top;
  padding: 20px;
}

#name, #number, #word-count, #time-estimation, #end {
  text-align: center;
}

#number {
  font-size: 1.7em;
  color: hsl(210, 100%, 70%);
  margin: 10px;
}

#end {
  color: #fff;
  background: hsl(210, 100%, 70%);
  width: 80%;
  margin: 10px auto 20px auto;
}

/* 标题 */

h1 {
  font-size: 1.7em;
  font-weight: normal;
  border-bottom: 2px solid hsl(210, 100%, 70%);
}

h1 span {
  background: hsl(210, 100%, 70%);
  color: white;
  padding: 3px 10px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  margin-right: 3px;
}

h2 {
  font-weight: normal;
  color: #333;
  font-size: 1.4em;
  border-bottom: 1px solid hsl(210, 100%, 70%);
}

h2 span{
  border-bottom: 1px solid hsl(210, 100%, 70%);
}

h3 {
  font-weight: normal;
  color: #333;
  font-size: 1.2em;
}

/* 特殊规定：
 * h4 → 摘要
 * h5 → 强调
 * h6 → 七句人话
 * em → 高亮
 */

h4 {
  background-color: hsl(210, 100%, 90%);
  padding: 10px;
  color: #333;
}

h5 {
  font-weight: normal;
  border: 2px dashed hsl(240, 100%, 70%);
  border-radius: 1em;
  padding: 20px;
}

h6 {
  font-size: 1.5em;
  font-weight: normal;
  font-style: italic;
  color: hsl(240, 100%, 70%);
  border-bottom: 2px solid hsl(240, 100%, 70%);
}

em strong {
  font-style: normal;
  font-weight: normal;
  color: white;
  background: hsl(240, 100%, 70%);
  padding: 2px 5px;
}

/* 其他需要修改的内容 */

a {
  color: hsl(210, 100%, 70%);
  font-weight: normal;
  text-decoration: underline;
}

a:hover {
  color: hsl(180, 100%, 70%);
  font-weight: normal;
  text-decoration: underline;
}

hr {
  width: 90%;
  margin: 1.5em auto;
  border-top: 2px dashed hsl(210, 100%, 70%);
}

strong {
  color: hsl(210, 80%, 40%);
}

s {
  color: #999;
}

p, li, h4, h5, table tr td {
  color: #666;
}

table tr th {
  color: #333;
  font-weight: normal;
}

ol, ul {
  padding-left: 2em;
}

blockquote {
  background: #f8f8f8;
  border-left-color: hsl(210, 100%, 70%);
}

blockquote p {
  color: #999;
  padding: 3px 0;
}

p code, li code {
  color: hsl(210, 100%, 70%);
}

sup {
  line-height: 0;
}

.footnote-word, .footnote-ref {
  font-weight: normal;
  color: hsl(160, 100%, 45%);
}

.footnotes-sep {
  font-family: inherit;
}

.footnote-num {
  font-family: inherit;
}

.footnote-item p {
  color: #666;
}

.footnote-item p em {
  color: #999;
  font-style: normal;
  background: transparent;
}

自定义主题 by equinoxe1

/* 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 * 英文换行 word-break: break-all;
 */
.layout {
}

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

/* 一级标题 */
h1 {
}

/* 一级标题内容 */
h1 span {
}

/* 一级标题修饰 请参考有实例的主题 */
h1:after {
}

/* 二级标题 */
h2 {
}

/* 二级标题内容 */
h2 span {
}

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

/* 三级标题 */
h3 {
}

/* 三级标题内容 */
h3 span {
}

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

/* 列表内容 */
li {
}

/* 引用
* 左边缘颜色 border-left-color: black;
* 背景色 background: gray;
*/
blockquote {
}

/* 引用文字 */
blockquote p {
}

/* 链接 */
a {
  border-bottom: 1px solid #1e6bb8;
}

/* 加粗 */
strong {
}

/* 斜体 */
em {
}

/* 加粗斜体 */
strong em {
}

/* 删除线 */
del {
}

/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
hr {
}

/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
img {
}

/* 图片描述文字 */
figcaption {
}

/* 行内代码 */
p code, li code {
}

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

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

/* 脚注文字 */
.footnote-word {
}

/* 脚注上标 */
.footnote-ref {
}

添加科技蓝主题

新特性描述：

科技蓝主题

示例：2019 前端秋季社招面试经历总结（二年多经验）

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

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

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

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

/* 一级标题内容 */
h1 span {
  font-size: 1.4em;
  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;
}

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

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

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

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

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

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

/* 列表内容 */
li {
  font-size: 15px;
}

/* 引用
 * 左边缘颜色 border-left-color:black;
 * 背景色 background:gray;
 */
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;
}
blockquote:before {
  content:"★ ";
  display:inline;
  color: #0e88eb;
  font-size:4em;
  font-family:Arial,serif;
  line-height:1em;
  font-weight:700;
}

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

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

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

/* 斜体 */
em {
  color: #0e88eb;
  letter-spacing:0.3em;
}

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

/* 删除线 */
del {
}
 
/* 分隔线
 * 粗细、样式和颜色
 * border-top:1px solid #3e3e3e;
 */
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;
 */
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;
}

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

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



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

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

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

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

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

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

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

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

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

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

工具真的很 nice，提两个需求，并分享一下我的 css 样式

需求：

css 增加缓存功能
微信外链自动转引用
引用里，中文和链接之间自动换行，不然在手机上排版会乱。

另外，这是我的 css 样式，欢迎大家使用。

增加了三号标题的背景颜色（可根据自己主题风格调整），以及内边距
字体间距调整为 3px，字体大小调整为 17px，阅读更加舒适
图片增加了 5px 圆角
分割线改为浅灰色虚线

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

/* 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 */
.layout {
}

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

/* 一级标题 */
h1 {
}

/* 一级标题内容 */
h1 span {
}

/* 一级标题修饰 请参考有实例的主题 */
h1:after {
}

/* 二级标题 */
h2 {
}

/* 二级标题内容 */
h2 span {
}

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

/* 三级标题 */
h3 {
}

/* 三级标题内容 */
h3 span {
  background-color: #5c5c5c;
  color: white;
  padding: 5px 15px;
  border-radius: 1px;
}

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

/* 列表内容 */
li {
}

/* 引用
* 左边缘颜色 border-left-color: black;
* 背景色 background: gray;
*/
blockquote {
}

/* 引用文字 */
blockquote p {
}

/* 链接 */
a {
}

/* 加粗 */
strong {
}

/* 斜体 */
em {
}

/* 加粗斜体 */
strong em {
}

/* 删除线 */
del {
  
}

/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
hr {
  border-top: 1px dashed #dddddd;
}

/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
img {
  border-radius: 5px;
}

/* 图片描述文字 */
figcaption {
}

/* 脚注上标 */
.footnote-ref {

}

/* 脚注参考资料文字 
 * 隐藏 display: none;
 */
.footnotes-sep {

}

自定义主题 by tansongchen

/* 全局属性 */

.layout {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  word-break: break-all;
}

/* 标题 */

h1 {
  font-size: 1.7em;
  font-weight: normal;
  border-bottom: 2px solid hsl(216, 100%, 68%);
}

h1 span {
  background: hsl(216, 100%, 68%);
  color: white;
  padding: 3px 10px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  margin-right: 3px;
}

h2 {
  font-weight: normal;
  color: #333;
  font-size: 1.4em;
  border-bottom: 1px solid hsl(216, 100%, 68%);
}

h2 span {
  border-bottom: 1px solid hsl(216, 100%, 68%);
}

h3 {
  font-weight: normal;
  color: #333;
  font-size: 1.2em;
}

/* 特殊规定：
 * h4 → 摘要
 * h5 → 强调
 * h6 → 序号
 * em → 高亮
 */

h4 {
  font-weight: normal;
  font-size: 1em;
  width: 80%;
  border: 1px solid hsl(216, 100%, 68%);
  border-top: 4px solid hsl(216, 100%, 68%);
  padding: 10px;
  margin: 30px auto;
  color: #333;
}

h5 {
  font-weight: normal;
  font-size: 1.3em;
  text-align: center;
  background: hsl(216, 100%, 68%);
  border: 3px double #fff;
  width: 80%;
  padding: 10px;
  margin: 30px auto;
  color: #fff;
}

h6 {
  font-size: 1.5em;
  font-weight: normal;
  color: hsl(216, 100%, 68%);
  border-bottom: 1px solid hsl(216, 100%, 68%);
}

em {
  font-style: normal;
  font-weight: normal;
  color: white;
  background: hsl(244, 100%, 75%);
  padding: 2px 4px;
	margin: 0px 2px;
}

/* 其他块元素 */

ol,
ul {
  padding-left: 2em;
}

hr {
  width: 90%;
  margin: 1.5em auto;
  border-top: 2px dashed hsl(216, 100%, 68%);
}

table {
  margin: 1.5em auto;
  width: auto;
}

img {
  width: 90%;
  margin: 0 auto;
  box-shadow: #CCC 0 10px 15px;
}

blockquote {
  background: #f9f9f9;
  border-left-color: hsl(216, 100%, 68%);
}

blockquote p {
  color: #999;
  padding: 3px 0;
}

/* 行内元素 */

a {
  color: hsl(187, 100%, 45%);
  font-weight: normal;
  border-bottom-color: hsl(187, 100%, 45%);
}

strong {
  color: hsl(216, 80%, 44%);
}

s,
del {
  color: #999;
}

p,
li,
li span,
h4,
table tr td {
  color: #666;
}

table tr th {
  color: #333;
  font-weight: normal;
}

p code,
li code {
  color: hsl(216, 100%, 68%);
}

sup {
  line-height: 0;
}

.footnote-word,
.footnote-ref {
  font-weight: normal;
  color: hsl(187, 100%, 45%);
}

.footnotes-sep {
  font-family: inherit;
}

.footnote-num {
  font-family: inherit;
}

.footnote-item p {
  color: #666;
}

.footnote-item p em {
  color: #999;
  background: transparent;
}

自定义主题 by developerchengang

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

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

/* 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 */
.layout {
  font-size: 15px;
  line-height: 1.55em;
  letter-spacing: 0.05em;
  color:#595959
}

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

/* 一级标题 */
h1 {
  margin: 1.2em 0 1em;
  padding: 0;
  font-weight: bold;
  color:#773098;
}

/* 一级标题内容 */
h1 span {
}

/* 一级标题修饰 请参考有实例的主题 */
h1:after {
}

/* 二级标题 */
h2 {
  min-height: 32px;
  line-height: 28px;
  border-bottom: solid 1px #000000;
  color: #773098;
  display: inline-block;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #773098;
  padding-top: 5px;
  padding-right: 0.5em;
  padding-left: 0.5em;
  margin-bottom: -3px;
  font-size: 25px;
  margin:1em auto;
  padding: 0.5em 0;
  text-align: center;
  width: 85%;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 二级标题内容 */
h2 span {
}

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

/* 三级标题 */
h3 {
  margin: 1.2em 0 1em;
  padding: 0;
  font-weight: bold;
  color:#773098;
}

/* 三级标题内容 */
h3 span {
}

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

/* 列表内容 */
li {
  margin: 10px;
}

/* 引用
* 左边缘颜色 border-left-color: black;
* 背景色 background: gray;
*/
blockquote {
  margin: 10px 5px;
  border-left: 5px solid #9654B5;
  border-right: 1px solid #9654B5;
  padding: 1px;
  color: #616161;
  quotes: none;
  margin-left: 0.7em;
  margin-top: 3 px;
  background:#FBF9FD
}

/* 引用文字 */
blockquote p {
}

/* 链接 */
a {
}

/* 加粗 */
strong {
  color:#773098;
}

/* 斜体 */
em {
}

/* 加粗斜体 */
strong em {
}

/* 删除线 */
del {
}

/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
hr {
  border: 1px solid #773098;
  margin: 1.5em auto;
}

/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
img {
}

/* 图片描述文字 */
figcaption {
}

/* 脚注文字 */
.footnote-word {
}

/* 脚注上标 */
.footnote-ref {
}

新主题”兰青“ by Krahets

DEMO

兰青 DEMO

CSS

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

/* 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 * 英文换行 word-break: break-all;
 */
 .layout {
}

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

/* 一级标题 */
h1 {
  font-size: 1.8em;
  color: #009688;
 	margin: 1.2em auto;
  text-align: center;
  border-bottom: 1px solid #009688;
}

/* 一级标题内容 */
h1 span {
}

/* 一级标题修饰 请参考有实例的主题 */
h1:after {
}

/* 二级标题 */
h2 {
  color: #009688;
  padding-left: 10px;
  margin: 1em auto;
  border-left: 3px solid #009688;
}

/* 二级标题内容 */
h2 span {
}

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

/* 三级标题 */
h3 {
  margin: 0.6em auto;
  padding-left: 10px;
  border-left: 2px solid #009688;
}

/* 三级标题内容 */
h3 span {
}

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

/* 四级标题 */
h4 {
  margin: 0.6em auto;
  font-size: 1.2em;
  padding-left: 10px;
  border-left: 2px dashed #009688;
}

/* 五级标题 */
h5 {
  margin: 0.6em auto;
  font-size: 1.1em;
  padding-left: 10px;
  border-left: 1px dashed #009688;
}

/* 六级标题 */
h6 {
  margin: 0.6em auto;
  font-size: 1em;
  padding-left: 10px;
  border-left: 1px dotted #009688;
}

/* 列表内容 */
li {
}

/* 引用
 * 左边缘颜色 border-left-color: black;
 * 背景色 background: gray;
 */
blockquote {
    border-left: 2px solid #888;
  	border-right: 2px solid #888;
    padding-left: 1em;
    color: #777;
}

/* 引用文字 */
blockquote p {
}

/* 链接 */
a {
  color: #009688;
  border-bottom: 1px solid #009688;
}

/* 加粗 */
strong {
}

/* 斜体 */
em {
}

/* 加粗斜体 */
strong em {
}

/* 删除线 */
del {
}

/* 分隔线
 * 粗细、样式和颜色
 * border-top: 1px solid #3e3e3e;
 */
hr {
  margin: 20px 0;
}

/* 图片
 * 宽度 width: 80%;
 * 居中 margin: 0 auto;
 * 居左 margin: 0 0;
 */
img {
}

/* 图片描述文字 */
figcaption {
}

/* 行内代码 */
p code, li code {
  color: #009688;
}

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

/*
 * 表格内的单元格
 * 字体大小 font-size: 16px;
 * 边框 border: 1px solid #ccc;
 * 内边距 padding: 5px 10px;
 */
table tr th {
    border: 1px solid #009688;
    background-color: #009688;
    color: #f8f8f8;
    border-bottom: 0;
}
table tr td {
  	border: 1px solid #009688;
}
table tr:nth-child(2n){
    background-color: #f8f8f8;
}

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

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

/* "参考资料"四个字 */
.footnotes-sep {
}

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

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

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

自定义主题 by XiaoCaiTouYa

/* 全局属性
 * 页边距 padding:30px;
	* 全文字体 font-family:ptima-Regular;
	* 英文换行 word-break:break-all;
	*/
.layout {
	//全局属性
}
/* 段落，下方未标注标签参数均同此处
 * 上边距 margin-top:5px;
	* 下边距 margin-bottom:5px;
	* 行高 line-height:26px;
	* 词间距 word-spacing:3px;
	* 字间距 letter-spacing:3px;
	* 对齐 text-align:left;
	* 颜色 color:#3e3e3e;
	* 字体大小 font-size:16px;
	* 首行缩进 text-indent:2em;
	*/

p {
	margin:10px 10px;
	line-height:1.75;
	font-family:PingFangSC-Light;
	letter-spacing:0.2em;
	font-size:14px;
	word-spacing:0.1em;
}
/* 一级标题 */
h1 {
	border-bottom:2px solid rgb(239,112,96);
	font-size:1.3em;
}
/* 二级标题内容 */
h1 span {
	display:inline-block;
	font-weight:normal;
	background:rgb(239,112,96);
	color:#ffffff;
	padding:3px 10px 1px;
	border-top-right-radius:3px;
	border-top-left-radius:3px;
	margin-right:3px;
}
/* 一级标题修饰 请参考有实例的主题 */
h1:after {
	}/* 二级标题 */
h2 {
	text-align:left;
	margin:20px 10px 0px 0px;
}
/* 二级标题内容 */
h2 span {
	font-family:STHeitiSC-Light;
	font-size:18px;
	font-weight:bolder;
	display:inline-block;
	padding-left:10px;
	border-left:5px solid rgb(255,76,64);
}
/* 二级标题修饰 请参考有实例的主题 */
h2:after {
	}
/* 三级标题 */
h3 {
}
/* 三级标题内容 */
h3 span {
	font-size:14px;
	color:rgb(165,213,93);
}
/* 三级标题修饰 请参考有实例的主题 */
h3:after {
	}

/* 列表内容 */
li {
  font-size:13px;
	}

/* 引用
* 左边缘颜色 border-left-color:black;
	* 背景色 background:gray;
	*/
blockquote {
	font-style:normal;
	border-left:none;
	padding:10px;
	position:relative;
	line-height:1.8;
	border-radius:0px 0px 10px 10px;
	color:#FEEEED;
	background:#000;
	box-shadow:#84A1A8 0px 10px 15px;
}
blockquote:before {
	content:" ";
	display:inline;
	color:#FFF;
	font-size:4em;
	font-family:Arial,serif;
	line-height:1em;
	font-weight:700;
}
/* 引用文字 */
blockquote p {
	color:#FEEEED;
	font-size:13px;
	display:inline;
}
blockquote:after {
	content:"”";
	float:right;
	display:inline;
	color:#FFF;
	font-size:3em;
	font-family:PingFangTC-Light;
	//  font-family:Arial,serif;
	line-height:1em;
	font-weight:500;
}
/* 链接 */
a {
	color:#ff3502;
	text-decoration:none;
	font-family:STHeitiSC-Light;
}
/* 加粗 */
strong {
	font-weight:border;
	font-family:PingFangHK-Light;
	color:#ff3502;
}
/* 斜体 */
em {
	color:#ff3502;
	letter-spacing:0.3em;
}
/* 加粗斜体 */
strong em {
	color:rgb(71,193,168);
	letter-spacing:0.3em;
}
/* 删除线 */
del {
	}/* 分隔线
* 粗细、样式和颜色
* border-top:1px solid #3e3e3e;
	*/
hr {
	height:1px;
	padding:0;
	border:none;
	border-top:medium solidid #333;
	text-align:center;
	background-image:linear-gradient(to right,rgba(239,112,96,0),rgba(239,112,96,0.75),rgba(239,112,96,0));
}
/* 图片
* 宽度 width:80%;
	* 居中 margin:0 auto;
	* 居左 margin:0 0;
	*/
img {
	border-radius:0px 0px 5px 5px;
	display:block;
	margin:20px auto;
	padding:0% 0% 20% 0%;
	width:85%;
	height:100%;
	object-fit:contain;
	background:rgba(255,255,255,1.0);
	box-shadow:#84A1A8 0px 10px 15px;
}
/* 图片描述文字 */
figcaption {
	display:block;
	font-size:12px;
	font-family:PingFangSC-Light;
}
/* 行内代码 */
p code,li code {
	color:rgb(271,93,108);
	font-family:STHeitiSC-Light;
}
/* 非微信代码块
 * 代码块不换行 display:-webkit-box !important;
	* 代码块换行 display:block;
	*/
pre code {
	/*代码语言说明文字*/
}
/* 脚注文字 */
.footnote-word {
  color:#ff3502;
}
/* 脚注上标 */
.footnote-ref {
	color:#ff3502;
}
/*脚注链接样式*/
.footnote-item em {
	color:#6E1E51;
	font-size:12px;
}

h2 标题与普通加粗的字体一样大

楼主你好，h2 标题与普通加粗的字体一样大了，正常来说： h2 的标题比普通的加粗大很多的。

“行内公式格式错误，无法进行转换”错误是提示一下公式位置

新特性描述：
我在转化公式时，遇到“行内公式格式错误，无法进行转换”。此时能否在出错信息中提示一下出错公式的位置？比如行号：

第1234行中，发现行内公式格式错误，无法进行转换

否则太难排错了。

感谢。

复制时出现“window.returnCitySN is undefined”错误信息提示

**运行环境： **

操作系统	浏览器
macOS	Chrome

Markdown文本内容：

例如：部分文本内容

比较项	可控硅	PWM	0-10V
原理	物理性质的调光，调节交流电每个半波的导通角来改变正弦波形，从而改变交流电流的有效值，以此实现调光的目的	对模拟信号电平进行数字编码的方法	一种模拟调光方式，通过改变0-10V的电压来控制电源的输出电流从而达到调光
错误详情：
复制时弹窗提示错误信息
window.returnCitySN is undefined

能增加复制成html格式吗？

有时候赋值成html粘贴比较方便

使用mdnice自带图床，复制到微信显示图片上传失败

编辑的时候上传很正常，复制到微信就8行。更诡异的是有一部分成功有一部分失败。更更诡异的是有些时候失败的也能看到图，但是就是提示上传不成功，只有你把图删了手动上传才行，替换都不行。

自定义主题 by ElyhG

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

/* 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 * 英文换行 word-break: break-all;
 */
.layout {
}

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

/* 一级标题 */
h1 {
  font-size: 2.1em;
	font-weight: 700;
	line-height: 1.1;
	padding-top: 16px;
	margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid #20bda9;
}

/* 一级标题内容 */
h1 span {
  color: #1a8f80
}


/* 二级标题 */
h2 {
  line-height: 1.5em;
	margin-top: 2.2em;
	margin-bottom: 35px;
  padding-left: 20px;
  border-left: 5px solid #20bda9;
}

/* 二级标题内容 */
h2 span {

}

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

/* 三级标题 */
h3 {
}

/* 三级标题内容 */
h3 span {
  font-weight: 700;
	font-size: 1.0em;
	line-height: 1.4;
	margin: 10px 0 5px;
	padding-top: 10px;
}

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

/* 列表内容 */
li {
}

/* 引用
* 左边缘颜色 border-left-color: black;
* 背景色 background: gray;
*/
blockquote {
  border-left-color: #00c9b9;
  background: #e6fffc;
}

/* 引用文字 */
blockquote p {
}

/* 链接 */
a {
  font-size: 1em;
  color: #1a8f80;
	text-decoration: none;
}

a:hover {
	color: #1a8f80;
	text-decoration: underline;
}

a:before {
  content: '「'
}

a:after {
  content: '」'
}

/* 加粗 */
strong {
}

/* 斜体 */
em {
}

/* 加粗斜体 */
strong em {
}

/* 删除线 */
del {
}

/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
hr {}

/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
img {
	width: 100%;
	border-radius: 5px;
	display: block;
	margin-bottom: 15px;
	height: auto;
}

/* 图片描述文字 */
figcaption {
  color: #00c9b8
}

/* 行内代码 */
p code, li code {
  color: #1a8f80;
  background-color: #e6fffc;
  padding: 2px;
  margin: 2px;
}

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

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

/* 脚注文字 */
.footnote-word {
  color: #00c9b9;
}

/* 脚注上标 */
.footnote-ref {
  color: #00d6c5;
  margin: 4px;
}

blockquote引用问题

看起来，微信似乎不支持 blockquote:before 和 blockquote:after 样式。不知开发者是否有其他兼容的点子？

以下是我的 blockquote 样式代码：

blockquote {
    font-size: 1em;
    font-style: normal;
    padding: 30px 38px;
    margin: 0 0 15px;
    position: relative;
    line-height: 1.8;
    text-indent: 0;
    border: none;
    color: #888;
    background: #FFFFFF
}

blockquote:before {
    content: "“";
    left: 12px;
    top: 0;
    color: #E0E0E0;
    font-size: 4em;
    font-family: Arial, serif;
    line-height: 1em;
    font-weight: 700;
    position: absolute;
}

blockquote:after {
    content: "”";
    right: 12px;
    bottom: -26px;
    color: #E0E0E0;
    font-size: 4em;
    font-family: Arial, serif;
    line-height: 1em;
    font-weight: 700;
    position: absolute;
    bottom: -31px;
}

以下是 https://mdnice.github.io/ 的显示效果：

以下为复制到微信公众号编辑器后的显示效果：

不过，目前该编辑器已经符合了我的大部分需求，请允许我向你们致谢。

拷贝的时候没有自动生成外链

运行环境：

操作系统	浏览器
windows	Firefox

Markdown文本内容：

例如：

[this is a link][1]
[1]: www.baidu.com

错误详情：

拷贝到微信编辑器的时候没有生成外链。

希望批量导入照片时能自动排序

假如我有几十张照片同时上传，在文章中插入的顺序是上传结束的先后顺序。能否自动识别照片文件名以自动排序，或者是在上传结束的列表中提供鼠标拖曳的排序功能？

添加绿色主题

前言

项目很棒，望大佬能添加一下绿色主题。

下文的技术与非技术的区别如下：

技术文章的二级标题一般不居中显示。
非技术文章的二级标题一般居中显示。

技术文章

技术文章的二级标题一般不居中显示。

/* 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 */
.layout {
  font-size: 15px;
  letter-spacing: 0.05em;
  color:#595959
}

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

/* 一级标题 */
h1 {
  margin: 1.2em 0 1em;
  padding: 0;
  font-weight: bold;
  color:#35b378;
}

/* 一级标题内容 */
h1 span {
}

/* 一级标题修饰 请参考有实例的主题 */
h1:after {
}

/* 技术文章 二级标题 */
h2 {
  min-height: 32px;
  line-height: 32px;
  border-bottom: solid 1px #000000;
  color: #35b378;
  display: inline-block;
  border-bottom-width: 0px;
  border-bottom-style: solid;
  border-color: #35b378;
  padding-top: 5px;
  padding-right: 0.5em;
  padding-left: 0.5em;
  font-size: 23px;
  margin: 1em 0 0rem 0;
  padding: 0.5em 0;
  text-align: leftt;
  font-weight: bold;
}

/* 二级标题内容 */
h2 span {
}

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

/* 三级标题 */
h3 {
  margin: 1.2em 0 1em;
  padding: 0;
  font-weight: bold;
  color:#35b378;
}

/* 三级标题内容 */
h3 span {
}

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

/* 列表内容 */
li {
  margin: 10px;
}

/* 引用
* 左边缘颜色 border-left-color: black;
* 背景色 background: gray;
*/
blockquote {
  margin: 10px 5px;
  border-left: 3px solid #35b378;
  border-right: 0px solid #35b378;
  color: #616161;
  quotes: none;
  background: #FBF9FD
}

/* 引用文字 */
blockquote p {
}

/* 链接 */
a {
  color: #35b378;
  border-bottom: 1px solid #35b378;
}

/* 加粗 */
strong {
  color:#35b378;
}

/* 斜体 */
em {
}

/* 加粗斜体 */
strong em {
}

/* 删除线 */
del {
}

/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
hr {
  border: 1px solid #35b378;
  margin: 1.5em auto;
}

/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
img {
}

/* 行内代码 */
p code, li code {
  color: #35b378;
}

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

/* 脚注文字 */
.footnote-word {
}

/* 脚注上标 */
.footnote-ref {
}

非技术

非技术文章的二级标题一般居中显示。

/* 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 */
.layout {
  font-size: 15px;
  letter-spacing: 0.05em;
  color:#595959
}

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

/* 一级标题 */
h1 {
  margin: 1.2em 0 1em;
  padding: 0;
  font-weight: bold;
  color:#35b378;
}

/* 一级标题内容 */
h1 span {
}

/* 一级标题修饰 请参考有实例的主题 */
h1:after {
}

/* 非技术文章 二级标题 */
h2 {
  min-height: 32px;
  line-height: 28px;
  border-bottom: solid 1px #000000;
  color: #35b378;
  display: inline-block;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #35b378;
  padding-top: 5px;
  padding-right: 0.5em;
  padding-left: 0.5em;
  margin-bottom: -3px;
  font-size: 23px;
  margin:1em auto;
  padding: 0.5em 0;
  text-align: center;
  width: 85%;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 二级标题内容 */
h2 span {
}

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

/* 三级标题 */
h3 {
  margin: 1.2em 0 1em;
  padding: 0;
  font-weight: bold;
  color:#35b378;
}

/* 三级标题内容 */
h3 span {
}

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

/* 列表内容 */
li {
  margin: 10px;
}

/* 引用
* 左边缘颜色 border-left-color: black;
* 背景色 background: gray;
*/
blockquote {
  margin: 10px 5px;
  border-left: 3px solid #35b378;
  border-right: 0px solid #35b378;
  color: #616161;
  quotes: none;
  background: #FBF9FD
}

/* 引用文字 */
blockquote p {
}

/* 链接 */
a {
  color: #35b378;
  border-bottom: 1px solid #35b378;
}

/* 加粗 */
strong {
  color:#35b378;
}

/* 斜体 */
em {
}

/* 加粗斜体 */
strong em {
}

/* 删除线 */
del {
}

/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
hr {
  border: 1px solid #35b378;
  margin: 1.5em auto;
}

/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
img {
}

/* 行内代码 */
p code, li code {
  color: #35b378;
}

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

/* 脚注文字 */
.footnote-word {
}

/* 脚注上标 */
.footnote-ref {
}

CSS 全局属性的选择器可以使用 article，语义化更好一些

新特性描述： 如题，<article> 是 HTML5 支持的标签，可以用作整个文章的区块元素，同理还可以用 <footer>，比 .layout/.footer-*要更清晰，也更原生。

自定义主题 by ElyhG

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

/* 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 * 英文换行 word-break: break-all;
 */
 .layout {
}

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


/* 一级标题 */
h1 {
  font-size: 2.1em;
	font-weight: 700;
	line-height: 1.1;
	padding-top: 16px;
	margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid #20bda9;
}

/* 一级标题内容 */
h1 span {
  color: #1a8f80
}


/* 二级标题 */
h2 {
  line-height: 1.5em;
	margin-top: 2.2em;
	margin-bottom: 35px;
  padding-left: 20px;
  border-left: 3px solid #20bda9;
}

/* 二级标题内容 */
h2 span {
	
}

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

/* 三级标题 */
h3 {
}

/* 三级标题内容 */
h3 span {
  font-weight: 700;
	font-size: 1.0em;
	line-height: 1.4;
	margin: 10px 0 5px;
	padding-top: 10px;
}

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

/* 列表内容 */
li {
}

/* 引用
* 左边缘颜色 border-left-color: black;
* 背景色 background: gray;
*/
blockquote {
  border-left-color: #00c9b9;
  background: #e6fffc;
}

/* 引用文字 */
blockquote p {
}



/* 链接 */
a {
	color: #1a8f80;
	text-decoration: none;
}

a:hover {
	color: #1a8f80;
	text-decoration: underline;
}

a:before {
  content: '「'
}

a:after {
  content: '」'
}

/* 加粗 */
strong {}

/* 斜体 */
em {}

/* 加粗斜体 */
strong em {}

/* 删除线 */
del {
	
}

/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
hr {}

/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
img {
	width: 100%;
	border-radius: 5px;
	display: block;
	margin-bottom: 15px;
	height: auto;
}

/* 图片描述文字 */
figcaption {
  color: #00c9b8
}

/* 行内代码 */
p code, li code {
  color: #1a8f80;
  background-color: #e6fffc;
  padding: 2px;
  margin: 2px;
}

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

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

/* 脚注文字 */
.footnote-word {
  color: #00c9b9;
}

/* 脚注上标 */
.footnote-ref {
  color: #00d6c5;
  margin: 4px;
}

多级列表超过三级的内容会消失

一级列表
- 二级列表
  - 三级列表

三级列表内容，在mdnice上预览正常，但复制到公众号平台就消失了，全转到二级列表就没问题了。是我的操作有问题吗？

自定义主题 by wangtao40122

/* 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 * 英文换行 word-break: break-all;
 */
.layout {
}

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

/* 一级标题 */
h1 {
}

/* 一级标题内容 */
h1 span {
}

/* 一级标题修饰 请参考有实例的主题 */
h1:after {
}

/* 二级标题 */
h2 {
}

/* 二级标题内容 */
h2 span {
}

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

/* 三级标题 */
h3 {
}

/* 三级标题内容 */
h3 span {
}

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

/* 列表内容 */
li {
}

/* 引用
* 左边缘颜色 border-left-color: black;
* 背景色 background: gray;
*/
blockquote {
}

/* 引用文字 */
blockquote p {
}

/* 链接 */
a {
  border-bottom: 1px solid #1e6bb8;
}

/* 加粗 */
strong {
}

/* 斜体 */
em {
}

/* 加粗斜体 */
strong em {
}

/* 删除线 */
del {
}

/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
hr {
}

/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
img {
}

/* 图片描述文字 */
figcaption {
}

/* 行内代码 */
p code, li code {
}

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

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

/* 脚注文字 */
.footnote-word {
}

/* 脚注上标 */
.footnote-ref {
}

/* "参考资料"四个字 */
.footnotes-sep {
}

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

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

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

问题描述

拖拽上传阿里云，文件名包含中文的话，上传成功但返回的图片URL不正确，应该是中文部分被编码了两次导致。

非拖拽上传没问题、不包含中文也没问题。

/* 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 * 英文换行 word-break: break-all;
 */
.layout {
}

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

/* 一级标题 */
h1 {
}

/* 一级标题内容 */
h1 span {
}

/* 一级标题修饰 请参考有实例的主题 */
h1:after {
}

/* 二级标题 */
h2 {
}

/* 二级标题内容 */
h2 span {
}

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

/* 三级标题 */
h3 {
}

/* 三级标题内容 */
h3 span {
}

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

/* 列表内容 */
li {
}

/* 引用
* 左边缘颜色 border-left-color: black;
* 背景色 background: gray;
*/
blockquote {
}

/* 引用文字 */
blockquote p {
}

/* 链接 */
a {
  border-bottom: 1px solid #1e6bb8;
}

/* 加粗 */
strong {
}

/* 斜体 */
em {
}

/* 加粗斜体 */
strong em {
}

/* 删除线 */
del {
}

/* 分隔线
* 粗细、样式和颜色
* border-top: 1px solid #3e3e3e;
*/
hr {
}

/* 图片
* 宽度 width: 80%;
* 居中 margin: 0 auto;
* 居左 margin: 0 0;
*/
img {
}

/* 图片描述文字 */
figcaption {
}

/* 行内代码 */
p code, li code {
}

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

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

/* 脚注文字 */
.footnote-word {
}

/* 脚注上标 */
.footnote-ref {
}

mdnice / markdown-nice Goto Github PK

markdown-nice's People

Stargazers

Watchers

Forkers

markdown-nice's Issues

出错md：

DEMO

CSS

前言

技术文章

非技术

Recommend Projects

Recommend Topics

Recommend Org