zoukankan      html  css  js  c++  java
  • 使用markdown编写博客园博客并设置代码高亮等

    博客园是一个广大程序员的博客技术论坛,在上面可以看别人写到的博文,也可以自己写博文,博客园默认的编辑器类似于Word
    但一般的程序员都会选择使用markdown写博文,那么怎么把博客园的编辑器设置为markdown,又怎么为代码部分添加自己喜欢的高亮样式呢?下面就介绍一下

    将博客园的默认编辑器设置为markdown

    登录博客园后,依次找到管理->设置默认编辑器(还有其他方式),然后在默认编辑器一栏勾选markdown:
    markdownedit.png

    这样博客园的默认编辑器就变成了markdown:
    微信截图_20200115192225.png

    将在markdown中的代码部分进行语法高亮

    如下图:
    微信截图_20200115192345.png

    步骤

    1.找到你所喜欢的高亮主题

    打开Hightlightjs的demo页面 选择你所喜欢的高亮主题。我选择的是Atom One Dark Reasonable这个主题。
    微信截图_20200115192742.png

    2.下载对应高亮主题的源码

    到GitHub找到Hightlight对应主题的源码:highlightjs/highlight.js代码高亮主题名称与Github中的css代码名称一一对应。比如我选择的主题名称为Atom One Dark Reasonable,其对应的css代码为:atom-one-dark-reasonable.css,打开相应代码,将其源码复制并保存到本地即可。
    1001136-20191215210706405-1034671242.png

    3.修改css代码以适应cnblogs的markdown语法高亮样式

    打开下载的源码,将.hljs全部替换为 .cnblogs-markdown .hljs
    微信截图_20200115193159.png

    ps:博客园默认的markdown样式可能被设置为:!important,因此要想让自定义的样式覆盖博客园默认的样式,可能在每个属性后都需要加上!important。

    4.将处理后的css代码复制到博客园页面定制css代码栏中

    博客园管理页面->设置->页面定制CSS代码
    注意:不要勾选“禁用模板默认CSS”

    1001136-20191215210731802-580955926.png

    点击保存之后你就可以新建一篇随笔或文章并使用markdown编辑方式插入代码,下面是我选择的主题名称为Atom One Dark Reasonable在cnblogs上的效果图。
    效果:
    微信截图_20200115192345.png

    在博客园用markdown写博客时怎么上传图片?

    写博客时,为了举例说明等,需要使用到图片,常规编辑器直接拖拽即可,那么在markdown中怎么引用图片呢?
    可能有很多种方法,这里用一个自认为简单的东西:在谷歌中安装新浪图床插件,下面介绍怎么使用

    1.下载该插件(这里先将插件下载到本地)

    github地址:新浪微博图床 Chrome扩展
    微信截图_20200115194522.png

    然后将下载的压缩包进行解压

    2.chrome浏览器中安装下载的插件

    找到设置->扩展程序->加载本地解压的新浪图文插件的文件夹
    微信截图_20200115194758.png

    安装成功界面:
    微信截图_20200115194849.png

    3.使用新浪图文插件

    打开谷歌右上角的新浪小图标:
    微信截图_20200115195052.png

    然后在插件弹出页面即可直接拖拽上传,获取相应的url地址
    微信截图_20200115195225.png

    然后在markdown中使用图片:

    ![微信截图_20200115195225.png](http://ww1.sinaimg.cn/large/007gxmUjgy1gaxhpw72gnj30lb0dpmyd.jpg)
    

    这样在文章中便可以很愉快的插入图片了!!!!!

    ps:若该插件提示未登录微博,则需要先登录微博,打开微博官网,然后登录即可

  • 相关阅读:
    python_day10 线程
    python_day9 回调函数
    python_day9 进程池
    python_day9 共享数据
    python-day9 队列
    python_day9 其他方法和属性
    python_day9 多进程socket
    原生js实现ajax 发送post请求/原生JS封装Ajax插件(同域、jsonp跨域)
    css设置时父元素随子元素margin值移动
    zepto默认的webkit和zepto不兼容
  • 原文地址:https://www.cnblogs.com/ggymx/p/12198506.html
Copyright © 2011-2022 走看看