利用Md2all的自定义CSS,给Markdown一个漂亮的排版(2)

简介: 利用Md2all的自定义CSS,给Markdown一个漂亮的排版

其中有几个关键的点,我们来详细解释一下。


1)支持微信公众号的两端缩进。


将p元素的padding-left和padding-right设置为1em(em是弹性布局单位,可根据页面基础的font-size「一般来自body元素」来计算实际需要的像素「px」单位)。具体示例如下:


p {/*段落*/

 margin: 1.5em 0px;

 padding-left:1em;

 padding-right:1em;

}



2)支持微信公众号的文字间距。


letter-spacing表示文字之间的间距,暂定为1px。具体示例如下:


.output_wrapper/*此属性为全局*/

{

    font-size: 16px;

    color: #3e3e3e;

    line-height: 1.6;

    word-spacing:0px;

    letter-spacing:1px;

    font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;  

}



建议:由于手机屏幕越来越大,文字的基础大小不需要再设置为15px了,需要换成更大一点的16px,人们阅读起来会更轻松一点。(所以设置全局的文字大小为font-size: 16px;)


3)支持行内代码换行。


一般情况下,中文会自动换行;但很多英文在一起的时候,文字间距会莫名其妙地增大,并且换行不及时。


怎么解决呢?需要在行内代码上加上word-break:break-all;(不仅中文换行,英文该换行也换行)。具体示例如下:


code /*行内代码*/

{

   word-break:break-all;

   word-wrap: break-word;

   padding: 2px 4px;

   border-radius: 4px;

   margin:0 2px;

   background:#f8f8f8;

   font-size: 14px;

   font-weight:normal;

}


需要注意的是,行内代码一定要使用反“``”包裹起来,例如:System.out.println("沉默王二不赞成996;996压榨人性,是效率低下的代表,就像回到农耕时代一样,日出而作,日落而息;效率才是解决问题的王道——可以坐飞机,别再骑马熬时间了!")


漂亮的排版


自定义CSS后的排版效果如下:


image.png


感觉排版怎么样?


相关文章
|
30天前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
11 0
|
3月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
81 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
3月前
|
缓存 前端开发 Linux
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
85 0
|
4月前
|
前端开发
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
102 1
|
5月前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
4月前
|
前端开发 C++
css排版—— 一篇优雅的文章(中英文) vs 聊天框的特别排版
css排版—— 一篇优雅的文章(中英文) vs 聊天框的特别排版
34 0
|
4月前
|
前端开发 JavaScript
vue 自定义气泡弹窗 $pop (内含css晃动动画shake制作)
vue 自定义气泡弹窗 $pop (内含css晃动动画shake制作)
100 0
|
5月前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
32 0
|
前端开发 NoSQL