0%

MarkDown 样式整理

在自己的写博客的时候有一些文章会同步到微信公众号,但是有不想重新编辑样式,所以我会直接用markdown的内容复制到微信里面。

目前,我在使用的是 MacDown,所以我自己定义了一套 MacDown 的样式来美化自己的博客。这个样式也是目前博客的样式。

1. 标题

  • 颜色 3F3F3F
  • 间距 margin: 20px 0 10px
  • 间距 粗体
  • 字体大小:
1
2
3
4
5
6
h1: 28px
h2: 24px
h3: 22px
h4: 20px
h5: 18px
h5: 16px

ps. 在手机上字体的大小会降低2px

2. 正文

  • 颜色 545454
  • 字体 -apple-system, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  • 字体大小 16px
  • 段间距 margin: 10px 0;
  • 对齐 左右对齐
  • 行间距 line-height: 1.6;

3. 高亮

高亮

1
2
3
4
5
6
7
code, tt {
margin: 0 2px;
padding: 0 5px;
white-space: nowrap;
background-color: #F8D9DA;
border-radius: 3px;
}

4. 引用

这是一句有用的内容

1
2
3
4
5
6
7
8
9
10
11
12
blockquote {
border-left: 4px solid #C3272B;
padding: 0 15px;
}

blockquote >:first-child {
margin-top: 0;
}

blockquote >:last-child {
margin-bottom: 0;
}

样式

MacDown 微信样式。css

The Why·Liam·Blog by WhyLiam is licensed under a Creative Commons BY-NC-ND 4.0 International License.

WhyLiam创作并维护的Why·Liam·Blog采用创作共用保留署名-非商业-禁止演绎4.0国际许可证

本文首发于Why·Liam·Blog (https://blog.naaln.com),版权所有,侵权必究。

本文永久链接:https://blog.naaln.com/2019/05/md-css/

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!