Syntax Highlighting

#1

Hey folks,
Is it possible to achieve Octopress style syntax highlighting in middleman? I can’t seem to find any docs on it.

I tried using middleman-syntax but I could’t even get it to work. I placed

<%= Rouge::Themes::Base16:Solarized.render(:scope => '.highlight') %>

in source/stylesheets/syntax.css.erb and added

<%= stylesheet_link_tag "styles/syntax" %>

to my layout file but I got an error saying the render() method could not be found

Any idea how to go about fixing this?

Cheers

#2

Did you managed to get it working in the meanwhile?

It is maybe not as clean as your approach, but I just copied the css style from https://github.com/richleland/pygments-css/tree/master and included it as a partial in my sass files.

#3

Thanks @rriemann . I’ll look for a solarised stylesheet and try that. Mind showing me a screenshot of what yours looks like?

Still interested in fixing the problem with mine though :smile:

#4

You mean how the style looks in the browser? I configured mine to have the same appearance like the original gist. It’s here as as well (one is a gist, one is a static PRE) : http://blog.riemann.cc/style-features-demo/

#5

@rriemann would it be possible to configure it to look like what octopress uses? https://github.com/erikzaadi/solarized-octopress-theme

That’s really what I’m after

#6

@fayimora sure it is possible. It is just a matter of finding the right css which has to be compatible with pygments highlighter.

Give it a try: https://lmddgtfy.net/?q=pygments%20css%20solarized

#7

Thanks @rriemann. I was able to get something working. I’m trying to add a header to the code block. Not sure if redcarpet supports that.

I’m trying to achieve this: https://www.dropbox.com/s/lm48jfgykdcpscm/Screenshot%202014-01-17%2018.10.21.png

#8

Yes, that’s the octopress code widget. I liked that as well? I don’t actually know what you want. It is just a matter of apply some css rules to get it done. Which ingredient is missing to you to realize it? Is this problem related to middleman?

Have a look on my demonstration code again. I decided for a footer. Should be not so complicated to use the same method and make a header by it.

#9

Are you using markdown? I couldn’t find a markdown processor that supported header/footer sections. If I can get that, styling is easy

#10

Markdown supports html. So you could just write bla bla bla.

What I do, is a bit different.

~~~shell
code
code 2
~~~
*caption*
{: .code-meta}

Thus, I can style using the class “code-meta”.

see: https://github.com/rriemann/rriemann.github.io/blob/source/source/localizable/style-features-demo.en.html.slim

#11

Is that a kramdown feature? I tried it and it just wrapped the block below in a p tag

*caption*
{: .code-meta}
#12

http://kramdown.gettalong.org/syntax.html#block-ials

1 Like
#13

Hmm I figured it would be a kramdown feature. I’ll check again if redcarpet supports it, else I just might switch.

#14

You have a typo. it should be:

<%= Rouge::Themes::Base16::Solarized.render(:scope => '.highlight') %>
#15

Yeah, I’m late, but I’ve found this and hey, seems to be really good:

I’ll give it a try, I like it more than middleman-syntax must say