As an engineer, and the ultimate pursuit of arts should be a part of our lives, as their favorite objects - blog, of course, have to dress up a bit, I have my own favorite style of code highlighting - better programmer the world is always common, seniors have developed some code highlighting styles available to us out of the box. Highlightjs is such a product.
Here is how I look at this product applied blog Park markdown editor.
The first step to find your favorite theme highlighted
Open Hightlightjs the demo page to choose your favorite highlight the theme. I chose the Atom One Dark Reasonable theme.
The second step, download the corresponding source code highlighting themes
GitHub source code to find the corresponding Hightlight theme: highlightjs / highlight.js code highlighting themes and Github name of css code names one by one. For example, I chose the theme name is Atom One Dark Reasonable, corresponding css code: atom-one-dark-reasonable.css , open the appropriate code, you can copy and save it to a local source.
The third step is to modify the code to suit cnblogs css syntax highlighting style of markdown
Open with UltraEdit editor css just downloaded the source code, will replace .hljs selected as .cnblogs-markdown .hljs replace -> Current File -> Replace All
第四步,将处理后的css代码复制到博客园页面定制css代码栏中
博客园管理页面->设置->页面定制CSS代码
注意:不要勾选“禁用模板默认CSS”
点击保存之后你就可以新建一篇随笔或文章并使用markdown编辑方式插入代码,下面是我选择的主题名称为Atom One Dark Reasonable在cnblogs上的效果图。
后续
到这里就已经完成了自定义代码风格的设置。可能你设置完成后发现和hightlight demo上看到的不太一样,可能是代码的字体,背景颜色等等略有差异。只要你懂一点CSS,自己微调一下所下载的CSS代码中的相关属性,直到自己满意为止。我的代码风格可以在我的其他文章中看到,感兴趣的可以戳一戳我的其他博文~ ٩(๑>◡<๑)۶
如果在配置过程中遇到什么问题,也欢迎私信我,或者邮件跟我说一下相关困难。
Email:[email protected]