markdown修改css

如何修改markdown样式?

markdown本身只是用来结构化的渲染
可以输出成html格式

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

主要是以下几个方面:

  • 字体大小 | 颜色
  • 间距:字符间距 | 行间距 | 段间距 | 页边距
  • 图片 : 居中 | 设置默认宽度 | 等比例缩放
  • 代码高亮

mark


为知笔记修改默认markdown样式

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

mark

2.打开文件位置

mark

3.搜索github2.css文件

mark

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

mark


字体颜色

设计知识可以查阅相关书籍

比如冷暖色
这里值得注意的是:修改色值使用16进制
举个例子:color: #448aff;
可以旨直接参考w3school,关于颜色的章节
mark

调色板

mark


主要样式调整

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

希望和你做朋友

添加微信 hackrobot

会邀请你加入到微信群

mark


更多精彩文章

把你的微信变成超级营销机器人
短信群发–低成本营销SMS喵
知乎Robot–自动点赞+评论+群发私信

小心!3分钟黑掉你的安卓手机
5分钟把U盘变为随身系统

附件列表

 


发表评论

电子邮件地址不会被公开。 必填项已用*标注