自定义markdown样式

里面都有一些好看的markdown样式

本文总阅读量

看到其它博客都有一些很炫酷界面效果,通过搜索发现都是使用html+CSS的方式编写的,所以这篇文章用来收集我看到比较好的markdown的样式,可以存储起来,后面直接CV使用就可以了。

使用方式:在markdown第1行添加link标签,加载CSS样式(使用方式和Html编写一样)

1
<link rel="stylesheet" type="text/css" href="index.css">

CSS样式

将下面CSS样式储存起来,和markdown文件放在同一目录下,我这边命名为index.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
*{
    margin:0px;
    padding:0px;
    border:0px
}
/* 代码高亮块 */
.high_light_box{
    margin:30px 0;
    padding:20px 30px;
    border-radius: 5px;
    border-left-width: 5px;
    border-style:solid;
}

/* 高亮块下的标题 */
.high_light_box > .p_title{
    font-weight: 600;
}

/* 绿色高亮块 */
.high_light_box_green{
    background-color:#f0f9eb;
    border-left-color:#67c23a;
}

/* 蓝色高亮块 */
.high_light_box_blue{
    background-color:#ecf5ff;
    border-left-color:#409eff;
}

/* 后续更多样式尽情期待... */

高亮块

绿色高亮块

TIP

入门后可以尝试推导一下上面的公式,入门前只需懂得如何在 Python 中实现上面公式即可。

1
2
3
4
5
6
<div class="high_light_box high_light_box_green">
    <!-- 标题 -->
    <p class="p_title">TIP</p>
    <!-- 正文 -->
    <p>入门后可以尝试推导一下上面的公式,入门前只需懂得如何在 Python 中实现上面公式即可。</p>
</div>

蓝色高亮块

TIP

入门后可以尝试推导一下上面的公式,入门前只需懂得如何在 Python 中实现上面公式即可。

1
2
3
4
5
6
<div class="high_light_box high_light_box_blue">
    <!-- 标题 -->
    <p class="p_title">TIP</p>
    <!-- 正文 -->
    <p>入门后可以尝试推导一下上面的公式,入门前只需懂得如何在 Python 中实现上面公式即可。</p>
</div>

未完待续… …