markdown自己设置css样式

如何修改markdown样式?

markdown本身只是使用来结构化的渲染

能输出成html格式

所以要修改css的配置,控制样式

主要是以下几个方面:

• 字体大小 | 颜色

• 间距:字符间距 | 行间距 | 段间距 | 页边距

• 图片 : 居中 | 设置默认宽度 | 等比例缩放

• 代码高亮

为知笔记修改默认markdown样式

1.找到为知笔记,右键,点击属性

2.打开文件位置

3.搜索github2.css文件

4.使用sublime text编辑器打开,进行修改

字体颜色

设计知识能查阅相关书籍

比方冷暖色

这里值得注意的是:修改色值用16进制

举个例子:

color: #448aff;

能旨直接参考w3school,关于颜色的章节

调色板

主要样式调整

针对markdown语法

• ###三级标题

• 文字的内联样式

• 项目符号和序列符号

• 图片居中,并且设置默认宽度,高度等比例

标题H1~H6修改

.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin: 20px 0 10px; padding: 0; font-weight: bold; /*color: #33FF00;*/ /*设置H标题的颜色*/ color: #FFCC00; /*-webkit-font-smoothing: antialiased;*/ cursor: text; position: relative;}

内联样式

.markdown-body code, .markdown-body tt { margin: 0 2px; padding: 2px 4px; white-space: pre-wrap; /*这里是内联样式``的颜色*/ /*color: #c7254e;*/ color: #FF7F50; /*内联样式背景块的颜色*/ /*background-color: #f9f2f4;*/ background-color: #f9f2f4; border-radius: 4px;}

图片居中,且固定宽度

.markdown-body img { /*max-width: 100%;*/ /*设置居中对齐*/ vertical-align:middle; /*设置图像固定的尺寸*/ width:370px; /*这里是增加的css规则,方便居中*/ margin: 0 auto; display: block;}

项目符号

.markdown-body li { margin: 5px 0; /*这里是项目符号的颜色*/ color: #7CFC00;}