Syntax highlighting in jekyll using redcarpet

那年仲夏 提交于 2019-12-01 22:18:49

问题


I'm trying to get code highlighting to work for a simple blog built with jekyll. I want to be able to do code highlighting within posts written in markdown so I enabled redcarpet as markup language. This works all fine, the code gets formatted in <pre></pre> tags and all the various elements of the code get corresponding classes. e.g.

<span class="n">function</span>
<span class="n">saySomething</span>
<span class="p">()</span>
<span class="p">{</span>

etc.

This is awesome but this doesn't give us of the actual highlighting (color) yet. So I suppose there must be some css ready to copy and paste which actually does the styling of the different code elements. Or am I missing something completely?

I looked into some code highlighting libraries like prettify or prism but these do their own formatting with javascript in the browser. But since redcarpet already does the heavy lifting work of formatting the code it is not necessary doing it again.

Any hints?


回答1:


You need some CSS magic. Use this one or pick one from here.




回答2:


You can create the CSS with the highlighter itself

rougify style > rouge.css

Or

coderay stylesheet > coderay.css



回答3:


I like to share the solution as I faced and it took much time to get rid of this issue. Default syntax highlighting is very poor in Jekyll. Like David said, You really need some CSS magic. Check this site first to see what will be the outcome if you're following this gist to solve the syntax highlighting problem.



来源:https://stackoverflow.com/questions/27366095/syntax-highlighting-in-jekyll-using-redcarpet

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!