Syntax highlighting not playing well with Slim

[bpainter]

A bit of context: I'm creating a styleguide using Middleman + Slim + Sass + a few other goodies. Latest versions of each and I'm on a Mac. I've been tinkering with Middleman Syntax and it seems like it doesn't play well with Slim (or Slim doesn't play well with Middleman Syntax).

I've created a simple demo site to demonstrate the issues that I'm seeing http://bpainter.github.io/slim-middleman-syntax-tests/.

The repo for the demo site is also on Github. https://github.com/bpainter/slim-middleman-syntax-tests

The only way that I've found to get the syntax highlighting to work correctly is to place the code helper with the code I want to highlight in either an .erb or .md partial and render that on my main page.

The slim files are in the repo above, but for good measure here's the various ways I'm rendering the code helper.

/ :(
- code("html")
  <div class="field">
    <label for="basic-input">Basic Input Label</label>
    <input type="text" id="basic-input" name="basic-input" size="40" placeholder="Placeholder Text" />
  </div>

/ :(
erb:
  <% code("html") do %>
    <div class="field">
      <label for="basic-input">Basic Input Label</label>
      <input type="text" id="basic-input" name="basic-input" size="40" placeholder="Placeholder Text" />
    </div>
  <% end %>

/ :(
markdown:
  ```html
  <div class="field">
    <label for="basic-input">Basic Input Label</label>
    <input type="text" id="basic-input" name="basic-input" size="40" placeholder="Placeholder Text" />
  </div>

Partials

/ :(
== partial "code-example-1"

/ :)
== partial "code-example-2"  

/ :)
== partial "code-example-3"  

code-example-1.slim

- code("html")
  <div class="field">
    <label for="basic-input">Basic Input Label</label>
    <input type="text" id="basic-input" name="basic-input" size="40" placeholder="Placeholder Text" />
  </div>

code-example-2.erb

<% code("html") do %>
<div class="field">
  <label for="basic-input">Basic Input Label</label>
  <input type="text" id="basic-input" name="basic-input" size="40" placeholder="Placeholder Text" />
</div>
<% end %>

code-example-3.md

```html
<div class="field">
  <label for="basic-input">Basic Input Label</label>
  <input type="text" id="basic-input" name="basic-input" size="40" placeholder="Placeholder Text" />
</div>

[bhollis]

I'd welcome a pull request to fix this, or even just add tests - I don't use Slim.

[bhollis]

My guess is that it has to do with how Padrino's capture_html interacts with Slim. I really want to drop Padrino.

[adamwong246]

Here's a workaround

pre
  code
    erb:
      <%= Middleman::Syntax::Highlighter.highlight(<<-"CODE".chomp, 'html')
        <div class="field">
          <label for="basic-input">Basic Input Label</label>
          <input type="text" id="basic-input" name="basic-input" size="40" placeholder="Placeholder Text" />
        </div>

      CODE
      %>

[adamwong246]

I needed to change a class from code to codehilite to work with this css file: https://raw.github.com/richleland/pygments-css/master/monokai.css

erb:
  <%= (Middleman::Syntax::Highlighter.highlight(<<-"CODE".chomp, 'html')).gsub("class=\"code\"", "class=\"codehilite\"")
    <div class="field">
      <label for="basic-input">Basic Input Label</label>
      <input type="text" id="basic-input" name="basic-input" size="40" placeholder="Placeholder Text" />
    </div>
  CODE
  %>

[bhollis]

@adamwong246 you can always change the CSS class that gets generated when you activate the extension:

activate :syntax, :css_class => 'codehilite'

[adamwong246]

neato. Thanks!

[bhollis]

This is now tested for, and fixed, on master. Thanks for reporting, and especially for providing an example repo!

[bhollis]

@adamwong246 Also, check out the README - you can have Rouge generate the Monokai stylesheet for you. Create a file called stylesheets/monokai.css.erb, and then put this in it:

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

And then you can choose whichever CSS class you want.

[adamwong246]

Is there any benefit to such? I assume that it generates the monokai css file but I think I'd rather keep my syntax css as a static file. For one, Rouge has a pretty limited set of themes.