Modify blog Park markdown editor syntax highlighting style approach

       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.

Figure 1 pick their favorite theme highlighted in the Hightlight

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.

Figure 2 highlights the theme corresponding css download the source code on GitHub

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

FIG 3 is replaced .hljs .cnblogs-markdown .hljs

第四步,将处理后的css代码复制到博客园页面定制css代码栏中

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

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

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

图5 Atom One Dark Reasonable高亮主题在cnblogs上的效果图

后续

       到这里就已经完成了自定义代码风格的设置。可能你设置完成后发现和hightlight demo上看到的不太一样,可能是代码的字体,背景颜色等等略有差异。只要你懂一点CSS,自己微调一下所下载的CSS代码中的相关属性,直到自己满意为止。我的代码风格可以在我的其他文章中看到,感兴趣的可以戳一戳我的其他博文~ ٩(๑>◡<๑)۶

       如果在配置过程中遇到什么问题,也欢迎私信我,或者邮件跟我说一下相关困难。

        Email:[email protected]

Guess you like

Origin www.cnblogs.com/JasonCeng/p/12045974.html