- 支持自定义样式的 Markdown 编辑器
- 支持微信公众号、知乎和稀土掘金
- 欢迎在线使用
- 有疑问请参考 如何有效的解决 mdnice 相关问题?
欢迎提交主题,提供更多文章示例~~
mdnice
组建了推文群,欢迎反馈意见和公众号大佬们一起交流,关注公众号回复「排版」拉你入群。
入群码 |
---|
- BlogHelper:一键发布本地文章到主流博客平台的托盘助手
- qrbtf:艺术二维码生成器
- 编程如画:「编程如画」博客
支持主题设计的 Markdown 编辑器,让排版变 Nice
Home Page: https://mdnice.com/
License: GNU General Public License v3.0
欢迎提交主题,提供更多文章示例~~
mdnice
组建了推文群,欢迎反馈意见和公众号大佬们一起交流,关注公众号回复「排版」拉你入群。
入群码 |
---|
如题,fork 之后,想要修改成自己的多套样式,然后给同事使用。需要修改哪些配置?
/* 全局属性
* 页边距 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;
}
/* 全局属性
* 页边距 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 {
}
您这个工具一键转化后,排版很漂亮。但是非mp.weixin.qq.com 的url链接,在微信公众号中其实是无法插入的,还需要手动去删除太麻烦了。能不能将连接像这个转换工具一样做成References
运行环境:
|操作系统|浏览器|
|Win|Chrome|
问题描述
拖拽上传阿里云,文件名包含中文的话,上传成功但返回的图片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 {
}
/* "参考资料"四个字 */
.footnotes-sep {
}
/* 参考资料编号 */
.footnote-num {
}
/* 参考资料文字 */
.footnote-item p {
}
/* 参考资料解释 */
.footnote-item p em {
}
在本地写好自定义主题css代码之后,登录GitHub时代码被重置为空了。
我没有找到相关的,是没有还是我没有找到?
感谢作者提供了这么好用的工具。
类似如上的写法会报错:
提示:请检查行内公式是否包含空格或中文。
$a=1$
当改成这种写法时就不会报错了:
测试+*-
这类运算符也会报错,请问是无法直接使用这些符号吗?
看起来,微信似乎不支持 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/ 的显示效果:
不过,目前该编辑器已经符合了我的大部分需求,请允许我向你们致谢。
/*自定义样式,实时生效*/
/* 全局属性
* 页边距 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 {
}
/*自定义样式,实时生效*/
/* 全局属性
* 页边距 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;
}
上传图片,用 sm.sm 显示万靓错误,但我直接在 sm.ms 网站上传是可以的。
**运行环境: **
操作系统 | 浏览器 |
---|---|
macOS | Chrome |
Markdown文本内容:
例如:部分文本内容
比较项 | 可控硅 | PWM | 0-10V |
---|---|---|---|
原理 | 物理性质的调光,调节交流电每个半波的导通角来改变正弦波形,从而改变交流电流的有效值,以此实现调光的目的 | 对模拟信号电平进行数字编码的方法 | 一种模拟调光方式,通过改变0-10V的电压来控制电源的输出电流从而达到调光 |
错误详情: | |||
复制时弹窗提示错误信息 | |||
window.returnCitySN is undefined |
/* 推荐名称:蓝莹 */
/* 主题颜色代号:
* 主题色 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;
}
/*自定义样式,实时生效*/
/*自定义样式,实时生效*/
/* 全局属性
* 页边距 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 {
}
/* 全局属性 */
.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;
}
发现在最新版本 Chrome 编辑好的文章,粘贴到公众号后,代码块在 iphone 手机无法左右滚动,在安卓手机中滚动却是正常的。
Md2All 也有这个问题(作者不知道为什么一直都没有修复),但是在 Firefox 中是没问题的。
最好,谢谢作者的这个工具,希望越来越好!
/*自定义样式,实时生效*/
/* 全局属性
* 页边距 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;
}
/* 全局属性
* 页边距 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 {
}
/* 全局属性
* 页边距 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 {
}
新特性描述:
我在转化公式时,遇到“行内公式格式错误,无法进行转换”。此时能否在出错信息中提示一下出错公式的位置?比如行号:
第1234行中,发现行内公式格式错误,无法进行转换
否则太难排错了。
感谢。
运行环境:
操作系统 | 浏览器 |
---|---|
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 编辑器内部显示正确:
但复制到微信时凭空多出了一个空行:
通过检查发现空行中有几个空格:
请问这有可能是什么原因?
Chrome没问题
工具很忙,但是能自定义图床很重要。我的公众号需要有很多数学公式,就是因为微信屏蔽了七牛云的免费域名才放弃md2all的。sm.ms的图片似乎也是屏蔽的。
我希望能有自定义图传功能,希望有限实现aliyun的,谢谢:)
运行环境:
操作系统 | 浏览器 |
---|---|
windows | Chrome |
Markdown文本内容:
七牛图片上传成功了,但是域名是 mdnice 的,需要有一个配置自己的域名的地方,以免每次上传完都要更改为自己的域名
新特性描述:
类似掘金,截图之后,在编辑器中粘贴图片就可以自动上传图片,这个功能很实用,因为现在主要在掘金写文章,图片上传到他们那有盗链处理,没办法全平台使用。
运行环境:
操作系统 | 浏览器 |
---|---|
windows | Firefox |
Markdown文本内容:
例如:
[this is a link][1]
[1]: www.baidu.com
错误详情:
拷贝到微信编辑器的时候没有生成外链。
新特性描述: 如题,<article>
是 HTML5 支持的标签,可以用作整个文章的区块元素,同理还可以用 <footer>
,比 .layout
/.footer-*
要更清晰,也更原生。
/* 全局属性
* 页边距 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 {
}
使用smms图床,使用连接直接访问图片正常,粘贴到微信编辑器提示图片上传失败。
/* 全局属性
* 页边距 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 {
}
楼主超级棒路过感谢
运行环境:
操作系统 | 浏览器 |
---|---|
windows | Chrome |
Google Chrome Version 76.0.3809.132 (Official Build) (64-bit)
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
函数。
错误详情:
块级公式转换错误,控制台不报错
有时候赋值成html粘贴比较方便
项目很棒,望大佬能添加一下绿色主题。
下文的技术与非技术的区别如下:
不居中
显示。居中
显示。技术文章的二级标题一般不居中显示。
/* 全局属性
* 页边距 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 {
}
新特性描述:
科技蓝主题
/*自定义样式,实时生效*/
/* 全局属性
* 页边距 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;
}
需求:
另外,这是我的 css 样式,欢迎大家使用。
/*自定义样式,实时生效*/
/* 全局属性
* 页边距 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 {
}
三级列表内容,在mdnice上预览正常,但复制到公众号平台就消失了,全转到二级列表就没问题了。是我的操作有问题吗?
新特性描述:
做成npm包的形式,继承到其他项目中。
或者给一个说明文档,怎么样集成到博客之类的项目中。
感谢~,真的非常好用。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.