Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

updated coderay css - handlebars expressions are now highlighted in s…

…hades of green to match hbs ribbon
  • Loading branch information...
commit 94d125846146a5fcefeb2012fd67e4f53a243002 1 parent ad2d4e8
Dan Gebhardt dgeb authored
Showing with 89 additions and 61 deletions.
  1. +89 −61 source/stylesheets/highlight.css.scss
150 source/stylesheets/highlight.css.scss
View
@@ -2,10 +2,14 @@
$border-radius: 5px;
+$blue: #1F58CE;
+$gray: #777777;
+$green: #007700;
+
.highlight {
- background-image: url(/images/code_background.gif);
- border: 1px solid #d1d1d1;
- @include border-radius($border-radius);
+ background-image: url(/images/code_background.gif);
+ border: 1px solid #d1d1d1;
+ @include border-radius($border-radius);
font-size: 12px;
font-family: Menlo, monospace;
line-height: 16px;
@@ -14,70 +18,94 @@ $border-radius: 5px;
position: relative;
@include box-shadow(0 1px #fff, inset -1px 1px 4px rgba(0,0,0,0.1));
- .ribbon {
- position: absolute;
- right: 0;
- bottom: 12px;
- width: 52px;
- height: 20px;
- }
+ .ribbon {
+ position: absolute;
+ right: 0;
+ bottom: 12px;
+ width: 52px;
+ height: 20px;
+ }
- &.javascript .ribbon {
- background-image: url(/images/js-ribbon.png);
- }
- &.html .ribbon {
- background-image: url(/images/html-ribbon.png);
- }
- &.handlebars .ribbon {
- background-image: url(/images/handlebars-ribbon.png);
- }
+ &.javascript .ribbon {
+ background-image: url(/images/js-ribbon.png);
+ }
+ &.html .ribbon {
+ background-image: url(/images/html-ribbon.png);
+ }
+ &.handlebars .ribbon {
+ background-image: url(/images/handlebars-ribbon.png);
+ }
}
.CodeRay {
- td {
- padding: 14px 0;
- }
-
- .line-numbers {
- width: 38px;
- text-align: center;
- border-right: 1px solid #d1d1d1;
- background-color: #f6f6f6;
- color: #b4b4b4;
- @include border-top-left-radius($border-radius);
- @include border-bottom-left-radius($border-radius);
- }
-
- td.code {
- padding-left: 13px;
- }
-}
+ td {
+ padding: 14px 0;
+ }
-/* HTML */
-.CodeRay {
- .tag, .error {
- color: red;
- }
+ .line-numbers {
+ width: 38px;
+ text-align: center;
+ border-right: 1px solid #d1d1d1;
+ background-color: #f6f6f6;
+ color: #b4b4b4;
+ @include border-top-left-radius($border-radius);
+ @include border-bottom-left-radius($border-radius);
+ }
+
+ td.code {
+ padding-left: 13px;
+ }
+
+ /* HTML */
+ .tag {
+ color: $blue;
+ }
+
+ .comment {
+ color: $gray;
+ }
- .attribute-name {
- color: #1f58ce;
- }
+ .attribute-name {
+ color: $blue;
+ }
- .string {
- color: #1f58ce;
- }
+ .content {
+ color: darken($blue, 15%);
+ }
+
+ .string {
+ color: $blue;
+ }
+
+ .keyword {
+ color: #ce791f;
+ }
+
+ .key, .function {
+ color: #2b1fce;
+ }
+
+ .local-variable {
+ color: #1f58ce;
+ }
}
-.CodeRay {
- .keyword {
- color: #ce791f;
- }
-
- .key, .function {
- color: #2b1fce;
- }
-
- .local-variable {
- color: #1f58ce;
- }
-}
+.handlebars {
+ .CodeRay {
+ .inline {
+ &,
+ .inline-delimiter,
+ .delimiter {
+ color: lighten($green, 10%);;
+ }
+
+ .attribute-name {
+ color: $green;
+ }
+ .attribute-value,
+ .content {
+ color: darken($green, 10%);
+ }
+ }
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.