??????? 作为一个工程师, 追求极致与艺术也应当成为我们生活中的一部分, 作为自己的心爱之物 -- 博客, 当然也得装扮一下, 我对代码高亮有自己所喜欢的风格~ 还好程序员的世界总是共通的, 已经有前辈开发了一些代码高亮的样式可供我们开箱即用. Highlightjs https://highlightjs.org/ 就是这样一款产品.
??????? 下面介绍一下我是如何将这款产品应用于博客园 Markdown 编辑器中的.
第一步, 找到你所喜欢的高亮主题
??????? 打开 Hightlightjs 的 demo 页面 https://highlightjs.org/static/demo/ 选择你所喜欢的高亮主题. 我选择的是 Atom One Dark Reasonable 这个主题.
图 1 在 Hightlight 中挑选自己喜欢的高亮主题
第二步, 下载对应高亮主题的源码
??????? 到 GitHub 找到 Hightlight 对应主题的源码: 代码高亮主题名称与 GitHub 中的 CSS 代码名称一一对应. 比如我选择的主题名称为 Atom One Dark Reasonable, 其对应的 CSS 代码为: atom-one-dark-reasonable.CSS, 打开相应代码, 将其源码复制并保存到本地即可.
图 2 在 GitHub 下载高亮主题相应的 CSS 源码
第三步, 修改 CSS 代码以适应 cnblogs 的 Markdown 语法高亮样式
??????? 用 UltraEdit 编辑器打开刚刚下载的 CSS 源码, 将 .hljs 替换为 .cnblogs-Markdown .hljs 选择 替换 -> 当前文件 -> 全部替换
图 3 将 .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]
来源: http://www.bubuko.com/infodetail-3333269.html