前言

有些小伙伴们很困扰那些漂亮的文章样式都是怎么写出来,其实就是加html标签和样式而已,以下是样式例子,可以直接复制拿去使用,当然你可以自己写或者修改.

举例

1.背景样式

样式例子

<div style='background: -webkit-linear-gradient(top, transparent 19px, #ececec 20px), -webkit-linear-gradient(left, transparent 19px, #ececec 20px);
            background-size: 20px 20px;'>
            这里是文章所有的内容
            </div>

2.二级标题样式

样式例子

<h2 style='color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid rgb(127, 127, 127); font-size: 1.3em;'><span style='font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(127, 127, 127); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;'>总结</span></h2>

3.文档说明样式

样式例子

<blockquote style=' padding: 10px 10px 10px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid #10c921; background: rgb(239, 235, 233);'>
    <p>我喜欢摸鱼<p>
</blockquote>

4.图片样式

<img style='width: auto;
    max-width: 100%;
    border-radius: 12px;
    display: block;
    margin: 20px auto;
    object-fit: contain;
    box-shadow: 2px 4px 7px #999;' src='https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/28/1711f45ff67027c1~tplv-t2oaga2asx-image.image'>

需要注意的是,掘金展示的源码这个样子的

![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/28/1711fbcfa641412e~tplv-t2oaga2asx-image.image)

我们需要手动写一个标签img标签把链接复制到src里面,然后加样式

程序转换

哎呀,哎呀,我要是有很多的标题,很多的文档说明描述,很多的图片怎么办?我一个个改多麻烦呀!

所以作为程序员嘛,当然要写个工具人为自己服务咯!这些重复的工作可以交给程序来干,所以我就写了一个样式转换网站

网站地址: markdown转换

选取主题,上传你的markdown文件,返回已经处理好的文章,直接复制到掘金就行了

注意

如果你的文章已经在掘金写好了,并且已经上传好了图片的话,复制你文章保存到一个txt文档,然后在样式转换的时候,直接上传你的txt文档就行了

例如:我这里已经写好了文章

我就把所有文章复制到一个txt文档中,然后上传处理

注意

网站转换成的样式,只是我个人喜好,方便我自己进行转换样式,如果样式不符合您的胃口,你可以自己手动修改样式

看所有的文章都想要这种样式

哎呀,哎呀,我想看别人的文章能不能都是这种样式呀.

安排上!于是,我就又写了一个浏览器插件,专门修改掘金文章的样式

原来掘金的样式

安装插件后的样式

瞬间就感觉要上天了

插件可以支持多个主题

当然还有一个很霸气的功能,你是否常常会遇到阅读代码时,需要左右拉动代码才能看到完整的代码, 所以我加了一个沉浸模式

开启之前:两边是有侧边栏的

开启之后:侧边栏消失,阅读体验超好!

安装插件

插件地址: JTool

下载完之后解压,到谷歌浏览器

然后就可以使用了

鼠标右键,查看功能,切换主题和开启沉浸模式