前言
你盼世界, 我盼望你无
这篇文章不是一篇技术文,主要是提供给大家一些美化掘金文章的方法。
对比各大博客平台,掘金的文章样式算是这个??了,但是有人曰:
??
没有最好,只有更好
”
也许我们还可以用一些别的方式来让我们的文章更具有个性化, 试想一下,在你辛辛苦苦精心尽力的写完了一篇文章之后,再花上一小点时间来美化你的文章样式。
这样不仅你自己看着舒服,读者在阅读到你的文章之后也会眼前一亮:“咦~ 这小伙子(小姑娘)的文章是挺有特点的哈!”
加油.jpg
所以在此我就向大家
我本身是一名前端开发,不过这篇文章的内容对职业没有限制,如果涉及到一些前端方面的内容我也会尽量说的详细,所以请放心“食用”吧 ??。
通过阅读本篇文章你可以学习到:
-
使用 markdown-nice 来美化文章样式 -
markdown 代码片段中的diff 类型 -
设计制作封面大图 -
使用 vscode 插件-Polacode-2019 截取代码图
使用markdown-nice 来美化文章样式
大家可以看到我的文章样式会有点特别(也有点好看),这是因为我使用了一个名为
这个排版工具支持微信公众号排版、知乎、掘金、博客园和 CSDN 等平台。
我个人主要是用在掘金、微信公众号上比较多(简书上我也有写文章,不过貌似不支持)。
这是体验地址:markdown-nice体验地址
工具简介
在
例如我就比较喜欢用
下面是一些主题的截图:
当然如果你觉得上面提供给你的这些主题都还差了点意思,你也可以自定义
另外对于我们程序员来说,代码块也是经常用到的,
几种好看的代码块截图:
如何使用markdown-nice
好了 ??, 说了这么多让我们来看看如何使用它吧。
使用方式有两种,分为在线使用和下载项目到本地运行使用,无论哪一种都可以。
1. 在线使用
第一种方式你可以直接在刚刚我介绍的 markdown-nice体验地址 中使用它。
在左侧编辑好你的文章内容, 选好主题之后,点击这个页面右上角的
之后到掘金或者其它平台上点击「写文章」,然后
第一步
第二步
2. 克隆项目到本地运行
由于该项目是开源免费的,所以你也可以直接去
GitHub项目地址:https://github.com/mdnice/markdown-nice
其实到了这一步如果你是前端童鞋的话应该都知道怎么使用了,无非就是安装依赖再本地运行就可以了。
如果你没接触过这一块的可以接着往下看。
-
项目下载到了本地之后,我们需要先安装上依赖。因此你得保证你的本地电脑中安装了 node.js ,如果没有安装的话,可以在node.js下载这个链接中下载安装。你可以在终端通过一下命令检查你有没有安装成功:
- ounter(line
- ounter(line
- ounter(line
1 | node -v</wyn><wyn>// or</wyn><wyn>npm -v |
以上两个指令都可以,
-
将项目用编辑器打开, vscode ,HBuilder 等等都可以, 然后在项目根目录输入命令:
- ounter(line
- ounter(line
- ounter(line
1 | npm install</wyn><wyn>// or 简写为</wyn><wyn>npm i |
这一步是为了根据
-
执行指令,本地启动项目:
- ounter(line
1 | npm run start |
完了之后,它会自己打开
这种方案主要是可以让你做一些自己的处理。
例如我这里的
但是这个苹果的
通过元素查找,我发现它是用伪类来实现的:
因此我在本地代码查找到
另外
markdown 代码片段中的diff 类型
还有一些小伙伴比较好奇我代码片段中的
- ounter(line
- ounter(line
- ounter(line
1 | 这里是你的代码片段</wyn><wyn>+ 我是一段新增的</wyn><wyn>- 我是一段被删除的 |
这其实只要把代码片段的类型设置为
在Typora中:
设计制作封面大图
另外在掘金中,是如何给文章加上自己的封面大图的呢,比如下面这种效果:
可以在你要发布的时候,点击这个图片
那么问题来了,你说的这些我都知道,那我可得到哪去画这些好看的图片呢?你总不能让我先从
你把我当成了什么.jpg
对于这一块,其实你度娘 ??
一个是 Canva, 主页长成这样:
还一个是图怪兽:
再就是可以在线PS的 uupoop:
里面不管是公众号封面还是海报封面都应该够满足我们爱美的需求了。
如何制作GIF动图
制作
-
录制屏幕并制作 GIF 图 -
制作公众号 GIF 图
录制屏幕并制作GIF 图
有时候我们在写博客时可能需要一张这种的
Mac 制作GIF 动图
在
-
使用电脑本身的 屏幕快照 来进行屏幕录制,录制的文件为mov 格式的视频
-
在 AppStore 中下载并安装PicGif Lite , 然后在这里面将前面录制好的mov 视频转成GIF 动图
现在你就可以将你的
在Windows 制作GIF 动图
-
LICEcap -
迅捷GIF制作
制作公众号GIF 图
有些时候你可能还需要一张类似下面??公众号二维码的
你可以通过前面我介绍的稿定设计来制作自己的
注意??:
想要将
(因为我发现我直接CV进来的图并不是动态的
使用vscode 插件-Polacode-2019 截取代码图
这里再安利一波
它支持帮我们截取好看的代码图:
code.png
(当然这对于想要复制你代码的小伙伴好像不太友好了。。。)
能不能愉快的玩耍了.jpeg
这里就需要你的编辑器是VSCode了。
在
关于它的使用说明,在插件介绍中也说的比较详细了,或者你可以看胖哥的这期视频来了解它:技术胖-VSCode中快速生成漂亮的代码截图
后语
你盼世界, 我盼望你无
最后,点个赞再走呗 ?? ~
喜欢霖呆呆的小伙还可以关注霖呆呆的公众号
我会不定时的更新一些前端方面的知识内容以及自己的原创文章??
你的鼓励就是我持续创作的主要动力 ??.
相关推荐:
《全网最详bpmn.js教材》
《JavaScript进阶-执行上下文(理解执行上下文一篇就够了)》
《霖呆呆你来说说浏览器缓存吧》
《怎样让后台小哥哥快速对接你的前端页面》
《建议改成: 读完这篇你还不懂Babel我给你寄口罩》