markdown自己设置css样式

作者 : 开心源码 本文共1130个字,预计阅读时间需要3分钟 发布时间: 2022-05-11 共613人阅读

如何修改markdown样式?

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

能输出成html格式

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

主要是以下几个方面:

  • 字体大小 | 颜色

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

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

  • 代码高亮

markdown自己设置css样式


为知笔记修改默认markdown样式

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

markdown自己设置css样式

2.打开文件位置

markdown自己设置css样式

3.搜索github2.css文件

markdown自己设置css样式

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

markdown自己设置css样式


字体颜色

设计知识能查阅相关书籍

比方冷暖色

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

举个例子:

color: #448aff;

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

markdown自己设置css样式

调色板

markdown自己设置css样式


主要样式调整

针对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;}

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » markdown自己设置css样式

发表回复