README.md in middleman-syntax-2.0.0 vs README.md in middleman-syntax-2.1.0

- old
+ new

@@ -34,32 +34,70 @@ The full set of options can be seen on your preview server's `/__middleman/config/` page. ## Helper -The extension adds a new `code` helper to Middleman that you can use from your templates: +The extension adds a new `code` helper to Middleman that you can use from your +templates. It will produce syntax-highlighted HTML wrapped in `<pre +class="highlight language-name"><code>...html...</code></pre>`. +In Erb, use `<%` tags (not `<%=` tags): + ```erb <% code("ruby") do %> def my_cool_method(message) puts message end <% end %> ``` -That'll produce syntax-highlighted HTML wrapped in `<pre class="highlight ruby">`. +*Note:* In Haml, use `=`, not `-`: +```haml += code('ruby') do + puts "hello" +``` + +For more on Haml syntax, see the "Haml" section below. + +In Slim: + +```slim += code('ruby') do + | + puts 'hello' +``` + +The `code` helper supports [Rouge](https://github.com/jayferd/rouge) instance formatter options. These override the defaults set in your `config.rb`. Example options include: + +* `line_numbers` +* `start_line` +* `css_class` +* `wrap` + +To use these formatter options per code block, include them in a hash as the second argument. e.g. + +```erb +<% code("ruby", :line_numbers => true, :start_line => 7) do %> +def my_cool_method(message) + puts message +end +<% end %> +``` + ## CSS On a default (i.e. unstyled) Middleman project, it will appear as if `middleman-syntax` isn't working, since obviously no CSS has been applied to color your code. You can use any Pygments-compatible stylesheet to style your code. You can also let Rouge generate some CSS for you by creating a new stylesheet with a `.css.erb` extension in your Middleman project, and then including: ```erb <%= Rouge::Themes::ThankfulEyes.render(:scope => '.highlight') %> ``` +To prevent the stylesheet from being recognized as a html page source when running `middleman build`, add an underscore at the beginning of the filename or add `ignore "/this/file/path.css.erb"` to config.rb. + Rouge has `ThankfulEyes`, `Colorful`, `Github`, `Base16`, `Base16::Solarized` (like Octopress), `Base16::Monokai`, and `Monokai` themes. ## Markdown The extension also makes code blocks in Markdown produce highlighted code. Make sure you're using RedCarpet or Kramdown as your Markdown engine (in `config.rb`): @@ -149,10 +187,10 @@ [Click here to lend your support to Middleman](https://spacebox.io/s/4dXbHBorC3) ## License -Copyright (c) 2012-2013 Benjamin Hollis. MIT Licensed, see [LICENSE] for details. +Copyright (c) 2012-2014 Benjamin Hollis. MIT Licensed, see [LICENSE] for details. [middleman]: http://middlemanapp.com [gem]: https://rubygems.org/gems/middleman-syntax [travis]: http://travis-ci.org/middleman/middleman-syntax [gemnasium]: https://gemnasium.com/middleman/middleman-syntax