arailsdemo 7

Coderay 的 CSS

public/stylesheets/coderay.css

pre {
  background-color: black;
}

.CodeRay {
  background-color: black;
  border: 1px solid black;
  font-family: 'Courier New', 'Terminal', monospace;
  color: #E6E0DB;
  padding: 3px 5px;
  overflow: auto;
  font-size: 12px;
  margin: 12px 0;
  text-align: left;
}
.CodeRay pre {
  margin: 0px;
  padding: 0px;
}

.CodeRay .an { color:#E7BE69 } /* html attribute */
.CodeRay .c { color:#BC9358; font-style: italic; } /* comment */
.CodeRay .ch { color:#509E4F } /* escaped character */
.CodeRay .cl { color:#FFF } /* class */
.CodeRay .co { color:#FFF } /* constant */
.CodeRay .fl { color:#A4C260 } /* float */
.CodeRay .fu { color:#FFC56D } /* function */
.CodeRay .gv { color:#D0CFFE } /* global variable */
.CodeRay .i { color:#A4C260 } /* integer */
.CodeRay .il { background:#151515 } /* inline code */
.CodeRay .iv { color:#D0CFFE } /* instance variable */
.CodeRay .pp { color:#E7BE69 } /* doctype */
.CodeRay .r { color:#CB7832 } /* keyword */
.CodeRay .rx { color:#A4C260 } /* regex */
.CodeRay .s { color:#A4C260 } /* string */
.CodeRay .sy { color:#6C9CBD } /* symbol */
.CodeRay .ta { color:#E7BE69 } /* html tag */
.CodeRay .pc { color:#6C9CBD } /* boolean */

指定一些'具体;的颜色

public/stylesheets/sass/application.sass

$brightaqua: #82D4C9
$green: #023B30
$logo: #07886F
$darkbrown: #3B1000
$rust: #882A07
$pale: #F2F2F2

继续使用 Compass

public/stylesheets/sass/application.sass

...

@import compass/utilities

body.bp
  :background-color $pale
  :font-size 14px
  h1
    :text-align center
    :font-size 2.5em
    :color $rust
  h2
    :color $green
    :margin-bottom 0

.logout
  +float-right

#logo
  +float-left
  :width 100px
  :padding-left 10px
  :color $logo
  :font
    :size 40px
    :family "Lucida Grande"
    :weight bold

#navBar
  :margin 10px 0
  :background-color $darkbrown
  ol
    +inline-block-list
    li
      :padding 5px 10px
    a, a:visited
      :padding 5px 5px
      :color $brightaqua
      :text-decoration none
      :font
        :size 16px

body.two-col #content
  :width 700px
  .postShow
    :padding 20px 0
    div
      :float left
      :margin-right 10px
      :line-height 2em
    .sequence
      :width 30px
    .title
      :width 400px
      a, a:visited
        :text-decoration none
        :font-size 1.8em
    .date
      :width 120px
    .admin
      :width 80px

#innerContent
  :width 680px
  :padding 0 20px

body.two-col #sidebar
  :width 240px

#innerSidebar
  :margin 0 10px
  :padding 0 10px
  :border-left 1px solid gray

#footer
  :padding 10px

.section
  :margin-bottom 20px
  .caption
    :margin-top 10px
    :padding-left 10px
    :color black
    :background-color $brightaqua
    :border 1px solid black
  .CodeRay
    :margin-top 0

将上面所写的 Stylesheets 放到布局里去 !

app/views/layouts/application.html.haml

%html(lang="en")
%html(lang="en")
  %head
    ...
    = stylesheet_link_tag 'scaffold', 'coderay', 'application'
    ...