github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved syntax highlighting

Browse Source
This commit is contained in:
Brandon Mathis 2010-12-15 18:15:19 -06:00
parent 34f8763b22
commit 2da5502040
18 changed files with 198 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc-src/Gemfile.lock
View File

@ -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)

33
doc-src/assets/javascripts/shBrushPlain.js vendored Normal file
View File

@ -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;
})();

4
doc-src/content/examples/compass/css3/inline_block/markup.haml
View File

@ -1,3 +1,3 @@
%p
this is an
%span(id="inline-block") inline block
this is an
%span(id="inline-block") inline block

4
doc-src/content/examples/compass/css3/opacity/markup.haml
View File

@ -1,9 +1,5 @@
#opacity-10.opacity-example
#opacity-20.opacity-example
#opacity-50.opacity-example
#opaque.opacity-example
#transparent.opacity-example

4
doc-src/content/get-involved/index.haml
View File

@ -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!

7
doc-src/content/stylesheets/partials/_code.scss
View File

@ -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; }

15
doc-src/content/stylesheets/partials/_theme.scss
View File

@ -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) {

3
doc-src/content/stylesheets/screen.scss
View File

@ -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";

131
doc-src/content/stylesheets/syntax/_shThemeRDark.scss
View File

@ -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";

3
doc-src/content/stylesheets/syntax/_syntax-theme.scss
View File

@ -1,6 +1,7 @@
// Default Syntax Highlighter theme.
//@import "shCore.scss";
//@import "shThemeRDark.scss";
@import "shThemeRDark.scss";
/*.syntaxhighlighter {
.keyword { font-weight: bold !important; }

11
doc-src/layouts/basic.haml
View File

@ -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]

6
doc-src/layouts/default.haml
View File

@ -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"

6
doc-src/layouts/homepage.haml
View File

@ -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]

5
doc-src/layouts/partials/js-core.haml Normal file
View File

@ -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)

5
doc-src/layouts/partials/js-highlighter.haml Normal file
View File

@ -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)

6
doc-src/layouts/site.haml
View File

@ -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"

2
doc-src/lib/data_sources/syntax_highter.rb
View File

@ -26,7 +26,7 @@ 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