github pages代码高亮highlighter

github pages代码高亮highlighter

​​github pages​​​ 一直想添加代码高亮 ​​highlighter​​​ ，基于 ​​jekyll 3.0​​​ 的 ​​rouge​​ 终于搞定了：

下载代码高亮库

在 ​​cmd​​ 中输入：

rougify style monokai.sublime > rouge.css

可以下载 ​​rouge.css​​​ 出来，将这个 ​​css​​​ 文件放到 ​​github pages​​​ 项目中存放 ​​css​​​ 的目录下，并在 ​​html​​ 中引用这个库，请自行更改引用的路径：

配置文件 ​​_config.yml​​ 中添加这些：

markdown: kramdownkramdown: syntax_highlighter: rouge

将博文 ​​md​​​ 文件中的 ​​```​​​ 替换为 ​​~~~ruby​​ ：

调试代码高亮

在 ​​cmd​​​ 中安装 ​​rouge​​ 方便本地调试：

gem install rouge

为了防止 ​​`​​​ 被转义，在 ​​html​​​ 中添加如下 ​​js​​ ：

在 ​​cmd​​​ 中输入 ​​jekyll server​​​，本地打开 ​​127.0.0.1:4000​​ 查看代码是否高亮了：

背景色为白色，字段显示不出来，所以我把 ​​rouge.css​​​ 的背景色改成了黑色，在 ​​rouge.css​​ 最后面添加如下代码：

div[class="highlight"] > pre > code[class*="language-"] { background:black;}div[class="highlight"] > pre { background:black;}figure[class="highlight"] > pre > code[class*="language-"] { text-align:left; background:black;}figure[class="highlight"] > pre > code[class*="language-"] td > pre{ text-align:left; background:black;}figure[class="highlight"] > pre { text-align:left; background:black;}div[class="highlighter-rouge"] > pre[class="highlight"] > code{ background:black;}div[class="highlighter-rouge"] > pre[class="highlight"] { background:black;}

最后效果图如最开始的图片那样了，可以在我的 ​​github pages​​ 代码中查看具体的详情

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。