博客园是一个广大程序员的博客技术论坛,在上面可以看别人写到的博文,也可以自己写博文,博客园默认的编辑器类似于Word
但一般的程序员都会选择使用markdown写博文,那么怎么把博客园的编辑器设置为markdown,又怎么为代码部分添加自己喜欢的高亮样式呢?下面就介绍一下
将博客园的默认编辑器设置为markdown
登录博客园后,依次找到管理->设置默认编辑器(还有其他方式),然后在默认编辑器一栏勾选markdown:
这样博客园的默认编辑器就变成了markdown:
将在markdown中的代码部分进行语法高亮
如下图:
步骤:
1.找到你所喜欢的高亮主题
打开Hightlightjs的demo页面 选择你所喜欢的高亮主题。我选择的是Atom One Dark Reasonable这个主题。
2.下载对应高亮主题的源码
到GitHub找到Hightlight对应主题的源码:highlightjs/highlight.js代码高亮主题名称与Github中的css代码名称一一对应。比如我选择的主题名称为Atom One Dark Reasonable,其对应的css代码为:atom-one-dark-reasonable.css,打开相应代码,将其源码复制并保存到本地即可。
3.修改css代码以适应cnblogs的markdown语法高亮样式
打开下载的源码,将.hljs全部替换为 .cnblogs-markdown .hljs
ps:博客园默认的markdown样式可能被设置为:!important,因此要想让自定义的样式覆盖博客园默认的样式,可能在每个属性后都需要加上!important。
4.将处理后的css代码复制到博客园页面定制css代码栏中
博客园管理页面->设置->页面定制CSS代码
注意:不要勾选“禁用模板默认CSS”
点击保存之后你就可以新建一篇随笔或文章并使用markdown编辑方式插入代码,下面是我选择的主题名称为Atom One Dark Reasonable在cnblogs上的效果图。
效果:
在博客园用markdown写博客时怎么上传图片?
写博客时,为了举例说明等,需要使用到图片,常规编辑器直接拖拽即可,那么在markdown中怎么引用图片呢?
可能有很多种方法,这里用一个自认为简单的东西:在谷歌中安装新浪图床插件,下面介绍怎么使用
1.下载该插件(这里先将插件下载到本地)
github地址:新浪微博图床 Chrome扩展
然后将下载的压缩包进行解压
2.chrome浏览器中安装下载的插件
找到设置->扩展程序->加载本地解压的新浪图文插件的文件夹
安装成功界面:
3.使用新浪图文插件
打开谷歌右上角的新浪小图标:
然后在插件弹出页面即可直接拖拽上传,获取相应的url地址
然后在markdown中使用图片:
![微信截图_20200115195225.png](http://ww1.sinaimg.cn/large/007gxmUjgy1gaxhpw72gnj30lb0dpmyd.jpg)
这样在文章中便可以很愉快的插入图片了!!!!!
ps:若该插件提示未登录微博,则需要先登录微博,打开微博官网,然后登录即可