From 2da5502040cb50577574db21cb851f95c78ffa99 Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Wed, 15 Dec 2010 18:15:19 -0600 Subject: [PATCH] improved syntax highlighting --- doc-src/Gemfile.lock | 2 +- doc-src/assets/javascripts/shBrushPlain.js | 33 +++++ .../compass/css3/inline_block/markup.haml | 4 +- .../examples/compass/css3/opacity/markup.haml | 6 +- doc-src/content/get-involved/index.haml | 4 +- .../content/stylesheets/partials/_code.scss | 7 +- .../content/stylesheets/partials/_theme.scss | 15 +- doc-src/content/stylesheets/screen.scss | 3 +- .../stylesheets/syntax/_shThemeRDark.scss | 131 ++++++++++++++---- .../stylesheets/syntax/_syntax-theme.scss | 3 +- .../stylesheets/syntax/_theme_template.scss | 34 ++--- doc-src/layouts/basic.haml | 11 +- doc-src/layouts/default.haml | 6 +- doc-src/layouts/homepage.haml | 6 +- doc-src/layouts/partials/js-core.haml | 5 + doc-src/layouts/partials/js-highlighter.haml | 5 + doc-src/layouts/site.haml | 6 +- doc-src/lib/data_sources/syntax_highter.rb | 8 +- 18 files changed, 198 insertions(+), 91 deletions(-) create mode 100644 doc-src/assets/javascripts/shBrushPlain.js create mode 100644 doc-src/layouts/partials/js-core.haml create mode 100644 doc-src/layouts/partials/js-highlighter.haml diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index b7a3c224..dc1e326c 100644 --- a/doc-src/Gemfile.lock +++ b/doc-src/Gemfile.lock @@ -14,7 +14,7 @@ GIT PATH remote: .. specs: - compass (0.11.alpha.4.e616fa1) + compass (0.11.alpha.4.34f8763) chunky_png (~> 0.10.3) sass (>= 3.1.0.alpha.50) diff --git a/doc-src/assets/javascripts/shBrushPlain.js b/doc-src/assets/javascripts/shBrushPlain.js new file mode 100644 index 00000000..296539f4 --- /dev/null +++ b/doc-src/assets/javascripts/shBrushPlain.js @@ -0,0 +1,33 @@ +/** + * SyntaxHighlighter + * http://alexgorbatchev.com/SyntaxHighlighter + * + * SyntaxHighlighter is donationware. If you are using it, please donate. + * http://alexgorbatchev.com/SyntaxHighlighter/donate.html + * + * @version + * 3.0.83 (July 02 2010) + * + * @copyright + * Copyright (C) 2004-2010 Alex Gorbatchev. + * + * @license + * Dual licensed under the MIT and GPL licenses. + */ +;(function() +{ + // CommonJS + typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null; + + function Brush() + { + }; + + Brush.prototype = new SyntaxHighlighter.Highlighter(); + Brush.aliases = ['text', 'plain', 'haml']; + + SyntaxHighlighter.brushes.Plain = Brush; + + // CommonJS + typeof(exports) != 'undefined' ? exports.Brush = Brush : null; +})(); diff --git a/doc-src/content/examples/compass/css3/inline_block/markup.haml b/doc-src/content/examples/compass/css3/inline_block/markup.haml index ad6d8a70..c13ac147 100644 --- a/doc-src/content/examples/compass/css3/inline_block/markup.haml +++ b/doc-src/content/examples/compass/css3/inline_block/markup.haml @@ -1,3 +1,3 @@ %p - this is an - %span(id="inline-block") inline block \ No newline at end of file + this is an + %span(id="inline-block") inline block diff --git a/doc-src/content/examples/compass/css3/opacity/markup.haml b/doc-src/content/examples/compass/css3/opacity/markup.haml index e0bab6f4..43a4622c 100644 --- a/doc-src/content/examples/compass/css3/opacity/markup.haml +++ b/doc-src/content/examples/compass/css3/opacity/markup.haml @@ -1,9 +1,5 @@ #opacity-10.opacity-example - #opacity-20.opacity-example - #opacity-50.opacity-example - #opaque.opacity-example - -#transparent.opacity-example \ No newline at end of file +#transparent.opacity-example diff --git a/doc-src/content/get-involved/index.haml b/doc-src/content/get-involved/index.haml index debd0668..84998259 100644 --- a/doc-src/content/get-involved/index.haml +++ b/doc-src/content/get-involved/index.haml @@ -29,5 +29,5 @@ layout: default ## Give Financially - Compass is charityware. We ask users to [donate to United Mitochondrial Disease Foundation](http://umdf.org/compass) - to support their efforts to find a cure for this disease. + Compass is charityware. You can use it as much as you like, but we encourage you to make a donation to help the [UMDF](http://umdf.org/) + find a cure for mitochondrial disease. If you can, please [donate here](http://umdf.org/compass/). Thanks! diff --git a/doc-src/content/stylesheets/partials/_code.scss b/doc-src/content/stylesheets/partials/_code.scss index 6b5858c9..9349495f 100644 --- a/doc-src/content/stylesheets/partials/_code.scss +++ b/doc-src/content/stylesheets/partials/_code.scss @@ -7,8 +7,8 @@ html.sass { .mixin-source .syntaxhighlighter.sass, .example-source .syntaxhighlighter.sass { display: block; } } html.scss { .mixin-source .syntaxhighlighter.scss, .example-source .syntaxhighlighter.scss { display: block; } } html.css .example-source .syntaxhighlighter.css { display: block; } -html.html .example-source .html { display: block; } -html.haml .example-source .haml { display: block; } +html.html .example-source .syntaxhighlighter.html { display: block; } +html.haml .example-source .syntaxhighlighter.haml { display: block; } @@ -20,7 +20,6 @@ html.light .syntaxhighlighter, html.dark .syntaxhighlighter { //font-size: 1.1em; text-shadow: none; .code-block { background: none; @extend .clear-box-shadow; } - &, table td.code .container { position: static !important; } table td.gutter { .line { &:first-child { padding-top: 10px !important; } &:last-child { padding-bottom: 10px !important; } } } .toolbar { display: none; } //a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; } @@ -104,6 +103,8 @@ h2 + a[rel="view source"]{ margin-top: 6px;} .toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10; span.title { display: inline; } a { display: block; text-align: center; text-decoration: none; padding-top: 1px; } } + .container { position: relative; } + textarea { @include stretch(0, .65em, 0, .65em); @extend .fixed-font; font-size: .95em; line-height: 1.3em !important;} } .syntaxhighlighter, pre .code-block:first-child, pre { &::-webkit-scrollbar { height: 12px; } diff --git a/doc-src/content/stylesheets/partials/_theme.scss b/doc-src/content/stylesheets/partials/_theme.scss index aae569a2..11c3ce0a 100644 --- a/doc-src/content/stylesheets/partials/_theme.scss +++ b/doc-src/content/stylesheets/partials/_theme.scss @@ -70,7 +70,9 @@ &.sass a[rel=sass], &.scss a[rel=scss], &.css a[rel=css], &.html a[rel=html], &.haml a[rel=haml] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; } #version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } } - .mixin-source, .example-source { @extend .mixin-panel-#{$theme}; } + .mixin-source, .example-source { @extend .mixin-panel-#{$theme}; + .container textarea { color: $code; } + } h2 a.help { color: $heading;} .source-documentation { @extend .doc-panel-#{$theme}; } @@ -86,7 +88,7 @@ // Dark theme .inset-panel-dark { @include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset); - background: darken(#2f2f2f, 4); background-color: rgba(#000, .3); } + background: darken(#2f2f2f, 6); background-color: rgba(#000, .3); } .horizontal-rule-dark { @include box-shadow(rgba(#fff, .07) 0 1px 0); @@ -105,7 +107,6 @@ .demo-dark { @include box-shadow(rgba(#000, .5) 0 2px 10px inset, rgba(#fff, .3) 0 1px 2px 0px, rgba(#000, .8) 0 0 0 1px inset); } - .heading-panel-dark { background: darken(#2f2f2f, 6); background: rgba(#000, .2); @@ -137,6 +138,7 @@ .mixin-panel-dark { @extend .inset-panel-dark; td.gutter { background: rgba(#fff, .05); .line { border-right: 2px solid rgba(#fff, .15); color: rgba(#fff, .5); }} + .container textarea { background: darken(#2f2f2f, 6); } } @mixin dark-theme($docs: false) { @@ -157,8 +159,8 @@ $docs-nav-selected: $strong-text; $module-nav-selected: $link; - $option-panel-border: rgba(#000, .3); - $option-panel-bg: rgba(#fff, .03); + $option-panel-border: rgba(#000, .5); + $option-panel-bg: rgba(#fff, .06); @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg); @@ -177,7 +179,7 @@ .inset-panel-light { @include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .5) 0 1px 3px 0px inset); text-shadow: 0 1px 1px #fff; - background-color: rgba(#000, .04); } + background: darken(#fff, .04); background-color: rgba(#000, .04); } .horizontal-rule-light { @include box-shadow(#fff 0 1px 0); @@ -227,6 +229,7 @@ @extend .inset-panel-light; background: rgba(#fff, .8); td.gutter { background: rgba(#000, .08); .line { border-right: 2px solid rgba(#000, .2); color: rgba(#000, .4); } } + .container textarea { background: darken(#fff, .04); } } @mixin light-theme($docs: false) { diff --git a/doc-src/content/stylesheets/screen.scss b/doc-src/content/stylesheets/screen.scss index 50b26a49..7c7777ca 100644 --- a/doc-src/content/stylesheets/screen.scss +++ b/doc-src/content/stylesheets/screen.scss @@ -1,4 +1,5 @@ @import "compass"; +@import "compass/layout"; @import "core/extensions"; @include global-reset; @@ -16,7 +17,7 @@ @import "partials/code"; @import "partials/example"; -//@import "syntax/syntax-theme"; +@import "syntax/syntax-theme"; @import "core/clearing-classes"; diff --git a/doc-src/content/stylesheets/syntax/_shThemeRDark.scss b/doc-src/content/stylesheets/syntax/_shThemeRDark.scss index e920e0b2..83210ae6 100644 --- a/doc-src/content/stylesheets/syntax/_shThemeRDark.scss +++ b/doc-src/content/stylesheets/syntax/_shThemeRDark.scss @@ -1,32 +1,113 @@ -// RDark SyntaxHighlighter theme based on theme by Radu Dineiu -// http://www.vim.org/scripts/script.php?script_id=1732 -$background: #1b2426 !default; +// Dark Theme -$line_highlighted_background: #323E41 !default; -$line_highlighted_number: #b9bdb6 !default; +$background: none; -$gutter_text: #afafaf !default; -$gutter_border_color: #435a5f !default; +$line_highlighted_background: #323E41; +$line_highlighted_number: #b9bdb6; -$toolbar_collapsed_a: #5ba1cf !default; -$toolbar_collapsed_a_hover: #5ce638 !default; -$toolbar_collapsed_background: #000 !default; +$gutter_text: #afafaf; +$gutter_border_color: rgba(#fff, .15); -$toolbar_a: #fff !default; -$toolbar_a_hover: #e0e8ff !default; +$toolbar_collapsed_a: #5ba1cf; +$toolbar_collapsed_a_hover: #5ce638; +$toolbar_collapsed_background: #000; -$code_plain: #b9bdb6 !default; -$code_comments: #878a85 !default; -$code_string: #5ce638 !default; -$code_keyword: #5ba1cf !default; -$code_preprocessor: #435a5f !default; -$code_variable: #ffaa3e !default; -$code_value: #009900 !default; -$code_functions: #ffaa3e !default; -$code_constants: #e0e8ff !default; -$code_color1: #e0e8ff !default; -$code_color2: white !default; -$code_color3: #ffaa3e !default; +$toolbar_a: #fff; +$toolbar_a_hover: #e0e8ff; + +$code_plain: #dadbb1; +$code_comments: #878a85; +$code_string: #64b041; +$code_keyword: #6cc7eb; +$code_preprocessor: #cd5c57; +$code_variable: $code_keyword; +$code_value: #ffa0a0; +$code_functions: #3d95e6; +$code_constants: #e0e8ff; +$code_script: $code_keyword; +$code_script_background: none; +$code_color1: #b0b76b; +$code_color2: #98f77a; +$code_color3: #ffaa3e; +$code_color4: $code_plain; + +//@import "theme_template.scss"; + +// Interface elements. +html.dark .syntaxhighlighter { + // Actual syntax highlighter colors. + .plain, .plain a { color: $code_plain; } + .comments, .comments a { color: $code_comments; } + .string, .string a { color: $code_string; } + .keyword { color: $code_keyword; } + .preprocessor { color: $code_preprocessor; } + .variable { color: $code_variable; } + .value { color: $code_value; } + .functions { color: $code_functions; } + .constants { color: $code_constants; } + .script { + font-weight: bold; + color: $code_script; + background-color: $code_script_background; + } + .color1, .color1 a { color: $code_color1; } + .color2, .color2 a { color: $code_color2; } + .color3, .color3 a { color: $code_color3; } + .color4, .color4 a { color: $code_color4; } +} + +// Light Theme + +$background: none; + +$line_highlighted_background: #c3defe; +$line_highlighted_number: #fff; + +$gutter_text: #787878; +$gutter_border_color: #d4d0c8; + +$toolbar_collapsed_a: #3f5fbf; +$toolbar_collapsed_a_hover: #aa7700; +$toolbar_collapsed_background: #fff; + +$toolbar_a: #a0a0a0; +$toolbar_a_hover: red; + +$code_plain: black; +$code_comments: #3f5fbf; +$code_string: #4fa33f; +$code_keyword: #7f0055; +$code_preprocessor: #006699; +$code_variable: #aa7700; +$code_value: #4fa33f; +$code_functions: #b553ba; +$code_constants: #0066cc; +$code_color1: gray; +$code_color2: #ca6436; +$code_color3: red; +$code_color4: $code_plain; + +// Interface elements. +html.light .syntaxhighlighter { + // Actual syntax highlighter colors. + .plain, .plain a { color: $code_plain; } + .comments, .comments a { color: $code_comments; } + .string, .string a { color: $code_string; } + .keyword { color: $code_keyword; } + .preprocessor { color: $code_preprocessor; } + .variable { color: $code_variable; } + .value { color: $code_value; } + .functions { color: $code_functions; } + .constants { color: $code_constants; } + .script { + font-weight: bold; + color: $code_script; + background-color: $code_script_background; + } + .color1, .color1 a { color: $code_color1; } + .color2, .color2 a { color: $code_color2; } + .color3, .color3 a { color: $code_color3; } + .color4, .color4 a { color: $code_color4; } +} -@import "theme_template.scss"; diff --git a/doc-src/content/stylesheets/syntax/_syntax-theme.scss b/doc-src/content/stylesheets/syntax/_syntax-theme.scss index e1e2f18c..1f423063 100644 --- a/doc-src/content/stylesheets/syntax/_syntax-theme.scss +++ b/doc-src/content/stylesheets/syntax/_syntax-theme.scss @@ -1,6 +1,7 @@ // Default Syntax Highlighter theme. //@import "shCore.scss"; -//@import "shThemeRDark.scss"; + +@import "shThemeRDark.scss"; /*.syntaxhighlighter { .keyword { font-weight: bold !important; } diff --git a/doc-src/content/stylesheets/syntax/_theme_template.scss b/doc-src/content/stylesheets/syntax/_theme_template.scss index 53f4df53..c647cc12 100644 --- a/doc-src/content/stylesheets/syntax/_theme_template.scss +++ b/doc-src/content/stylesheets/syntax/_theme_template.scss @@ -45,60 +45,60 @@ $caption_color: $code_plain !default; .line { &.alt1 { background-color: $line_alt1_background !important; } &.alt2 { background-color: $line_alt2_background !important; } - + // Highlighed line &.highlighted { &.alt1, &.alt2 { background-color: $line_highlighted_background !important; } &.number { color: $line_highlighted_number !important; } } } - + table { caption { color: $caption_color !important; } } - + // Add border to the lines .gutter { color: $gutter_text !important; .line { border-right: $gutter_border !important; - + &.highlighted { background-color: $gutter_border_color !important; color: $background !important; - } - } + } + } } - + &.printing .line .content { border: none !important; } - + &.collapsed { overflow: visible !important; - + .toolbar { color: $toolbar_collapsed_a !important; background: $toolbar_collapsed_background !important; border: $toolbar_collapsed_border !important; - + a { color: $toolbar_collapsed_a !important; - &:hover { color: $toolbar_collapsed_a_hover !important; } - } + &:hover { color: $toolbar_collapsed_a_hover !important; } + } } } - + .toolbar { color: $toolbar_a !important; background: $toolbar_background !important; border: $toolbar_border !important; a { color: $toolbar_a !important; - &:hover { color: $toolbar_a_hover !important; } - } + &:hover { color: $toolbar_a_hover !important; } + } } - + // Actual syntax highlighter colors. .plain, .plain a { color: $code_plain !important; } .comments, .comments a { color: $code_comments !important; } @@ -116,5 +116,5 @@ $caption_color: $code_plain !default; } .color1, .color1 a { color: $code_color1 !important; } .color2, .color2 a { color: $code_color2 !important; } - .color3, .color3 a { color: $code_color3 !important; } + .color3, .color3 a { color: $code_color3 !important; } } diff --git a/doc-src/layouts/basic.haml b/doc-src/layouts/basic.haml index 372df280..20278c06 100644 --- a/doc-src/layouts/basic.haml +++ b/doc-src/layouts/basic.haml @@ -9,15 +9,8 @@ %title #{@item[:title]} | Compass Documentation %link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"} - %script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript") - %script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript") - %script(src="/javascripts/jquery.cookie.js" type="text/javascript") - %script(src="/javascripts/site.js" type="text/javascript") - %script(src="/javascripts/shCore.js" type="text/javascript" deferred) - %script(src="/javascripts/shBrushSass.js" type="text/javascript" deferred) - %script(src="/javascripts/shBrushCss.js" type="text/javascript" deferred) - %script(src="/javascripts/shBrushXml.js" type="text/javascript" deferred) - %script(src="/javascripts/fixups.js" type="text/javascript" deferred) + = render "partials/js-core" + = render "partials/js-highlighter" /[if lte IE 8] %link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"} - if @item[:content_for_additional_css] diff --git a/doc-src/layouts/default.haml b/doc-src/layouts/default.haml index 36592fba..9fe6832a 100644 --- a/doc-src/layouts/default.haml +++ b/doc-src/layouts/default.haml @@ -1,5 +1,4 @@ !!!5 -- # This template is just the stuff until the body tag. %html.no-js{:dir => "ltr", :lang => "en"} %head %meta{:charset => "utf-8"}/ @@ -9,10 +8,7 @@ %title #{@item[:title]} | Compass Documentation %link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"} - %script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript") - %script(src="/javascripts/jquery.cookie.js" type="text/javascript") - %script(src="/javascripts/site.js" type="text/javascript") - %script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript") + = render "partials/js-core" %body.default{body_attributes(@item)} #wrap = render "partials/main-navigation" diff --git a/doc-src/layouts/homepage.haml b/doc-src/layouts/homepage.haml index 658aa7c6..849a1cb5 100644 --- a/doc-src/layouts/homepage.haml +++ b/doc-src/layouts/homepage.haml @@ -1,5 +1,4 @@ !!!5 -- # This template is just the stuff until the body tag. %html.no-js{:dir => "ltr", :lang => "en"} %head %meta{:charset => "utf-8"}/ @@ -9,10 +8,7 @@ %title #{@item[:title]} | Compass Documentation %link{:charset => "utf-8", :href => "/stylesheets/home.css", :rel => "stylesheet", :type => "text/css"} - %script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript") - %script(src="/javascripts/jquery.cookie.js" type="text/javascript") - %script(src="/javascripts/site.js" type="text/javascript") - %script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript") + = render "partials/js-core" /[if lte IE 8] %link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"} - if @item[:content_for_additional_css] diff --git a/doc-src/layouts/partials/js-core.haml b/doc-src/layouts/partials/js-core.haml new file mode 100644 index 00000000..b7c3d547 --- /dev/null +++ b/doc-src/layouts/partials/js-core.haml @@ -0,0 +1,5 @@ +%script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript") +%script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript") +%script(src="/javascripts/jquery.cookie.js" type="text/javascript") +%script(src="/javascripts/site.js" type="text/javascript") +%script(src="/javascripts/fixups.js" type="text/javascript" deferred) diff --git a/doc-src/layouts/partials/js-highlighter.haml b/doc-src/layouts/partials/js-highlighter.haml new file mode 100644 index 00000000..d788dea5 --- /dev/null +++ b/doc-src/layouts/partials/js-highlighter.haml @@ -0,0 +1,5 @@ +%script(src="/javascripts/shCore.js" type="text/javascript" deferred) +%script(src="/javascripts/shBrushSass.js" type="text/javascript" deferred) +%script(src="/javascripts/shBrushCss.js" type="text/javascript" deferred) +%script(src="/javascripts/shBrushXml.js" type="text/javascript" deferred) +%script(src="/javascripts/shBrushPlain.js" type="text/javascript" deferred) diff --git a/doc-src/layouts/site.haml b/doc-src/layouts/site.haml index b4dffb1c..5e01ff32 100644 --- a/doc-src/layouts/site.haml +++ b/doc-src/layouts/site.haml @@ -1,5 +1,4 @@ !!!5 -- # This template is just the stuff until the body tag. %html.no-js{:dir => "ltr", :lang => "en"} %head %meta{:charset => "utf-8"}/ @@ -9,10 +8,7 @@ %title #{@item[:title]} | Compass Documentation %link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"} - %script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript") - %script(src="/javascripts/jquery.cookie.js" type="text/javascript") - %script(src="/javascripts/site.js" type="text/javascript") - %script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript") + = render "partials/js-core" %body.site{body_attributes(@item)} #wrap = render "partials/main-navigation" diff --git a/doc-src/lib/data_sources/syntax_highter.rb b/doc-src/lib/data_sources/syntax_highter.rb index f813754f..309b68a3 100644 --- a/doc-src/lib/data_sources/syntax_highter.rb +++ b/doc-src/lib/data_sources/syntax_highter.rb @@ -2,7 +2,7 @@ require 'nokogiri' require 'coderay' class SyntaxHighlighterFilter < Nanoc3::Filter identifier :highlight - + def highlight(code, type) hl_map = Hash.new(:coderay) hl_map[:sass] = :pygmentize @@ -17,7 +17,7 @@ class SyntaxHighlighterFilter < Nanoc3::Filter return io.read end end - + def coderay(code, type) # :line_numbers => :table, type = :css if type == :scss @@ -26,12 +26,12 @@ class SyntaxHighlighterFilter < Nanoc3::Filter def run(content, params={}) doc = Nokogiri::HTML.fragment(content) - [:css, :sass, :scss].each do |format| + [:css, :sass, :scss, :html, :haml].each do |format| doc.css("pre.source-code.#{format}, code.#{format}").each do |el| el.set_attribute("class", "brush: #{format} "+el.attribute("class").value) end end doc.to_s end - + end