From ffee5bb090c3723bb57e6858d32e9c34baba9912 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Sun, 26 Jan 2014 22:00:23 +0200 Subject: [PATCH] Improve themes. Load highlight.js properly Signed-off-by: Dmitriy Zaporozhets --- app/assets/javascripts/blob.js.coffee | 2 +- app/assets/javascripts/main.js.coffee | 5 +- app/assets/stylesheets/generic/files.scss | 6 + app/assets/stylesheets/highlight/dark.scss | 255 +++++++++++++++------ app/assets/stylesheets/highlight/monokai.scss | 213 ++++++++++------- .../stylesheets/highlight/solarized_dark.scss | 4 + app/assets/stylesheets/highlight/white.scss | 154 ++++++++++++- 7 files changed, 487 insertions(+), 152 deletions(-) diff --git a/app/assets/javascripts/blob.js.coffee b/app/assets/javascripts/blob.js.coffee index 99cb1cec9..6cdfc182b 100644 --- a/app/assets/javascripts/blob.js.coffee +++ b/app/assets/javascripts/blob.js.coffee @@ -17,7 +17,7 @@ class BlobView setHash(hash) e.preventDefault() - + # See if there are lines selected # "#L12" and "#L34-56" supported highlightBlobLines = (e) -> diff --git a/app/assets/javascripts/main.js.coffee b/app/assets/javascripts/main.js.coffee index 3f7656de5..dd71a4a17 100644 --- a/app/assets/javascripts/main.js.coffee +++ b/app/assets/javascripts/main.js.coffee @@ -56,11 +56,12 @@ document.addEventListener("page:fetch", unbindEvents) document.addEventListener("page:change", stopSpinner) $ -> + $('pre code').each (i, e) -> + hljs.highlightBlock(e) + # Click a .one_click_select field, select the contents $(".one_click_select").on 'click', -> $(@).select() - hljs.initHighlightingOnLoad() - $('.remove-row').bind 'ajax:success', -> $(this).closest('li').fadeOut() diff --git a/app/assets/stylesheets/generic/files.scss b/app/assets/stylesheets/generic/files.scss index 121bb8c91..8dc3932bf 100644 --- a/app/assets/stylesheets/generic/files.scss +++ b/app/assets/stylesheets/generic/files.scss @@ -158,6 +158,11 @@ font-size: 12px !important; line-height: 16px !important; margin: 0; + + code { + white-space: pre; + word-wrap: normal; + } } .hljs { @@ -171,6 +176,7 @@ width: 60px; a { + font-family: $monospace_font; display: block; font-size: 12px !important; line-height: 16px !important; diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss index 129d33dca..1d544b3f2 100644 --- a/app/assets/stylesheets/highlight/dark.scss +++ b/app/assets/stylesheets/highlight/dark.scss @@ -1,71 +1,192 @@ -.dark .highlight { +.dark { + background-color: #232323; - background-color: #333; + .highlight{ + border-left: 1px solid #444; + } + + .line-numbers a { + color: #666; + } pre { - background-color: #333; - color: #eee; - } - - .hll { display: block; background-color: darken($hover, 65%) } - .c { color: #888888; font-style: italic } /* Comment */ - .err { color: #a61717; background-color: #e3d2d2 } /* Error */ - .k { color: #CDA869; font-weight: bold } /* Keyword */ - .kp { color: #CDA869; font-weight: bold } /* Keyword */ - .cm { color: #888888 } /* Comment.Multiline */ - .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */ - .c1 { color: #888888 } /* Comment.Single */ - .cs { color: #cc0000; font-weight: bold; background-color: transparent } /* Comment.Special */ - .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ - .ge { font-style: italic } /* Generic.Emph */ - .gr { color: #aa0000 } /* Generic.Error */ - .gh { color: #303030 } /* Generic.Heading */ - .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ - .go { color: #888888 } /* Generic.Output */ - .gp { color: #555555 } /* Generic.Prompt */ - .gs { font-weight: bold } /* Generic.Strong */ - .gu { color: #606060 } /* Generic.Subheading */ - .gt { color: #aa0000 } /* Generic.Traceback */ - .kc{font-weight: bold;} /* Keyword.Constant */ - .kd{font-weight: bold;} /* Keyword.Declaration */ - .kn{font-weight: bold;} /* Keyword.Namespace */ - .kp{font-weight: bold;} /* Keyword.Pseudo */ - .kr{font-weight: bold;} /* Keyword.Reserved */ - .kt{color: #458;font-weight: bold;} /* Keyword.Type */ - .m { color: #0000DD; font-weight: bold } /* Literal.Number */ - .p { color: #eee; } - .s { color: #0AD; background-color: transparent } /* Literal.String */ - .na{color: #008080;} /* Name.Attribute */ - .nb{color: #0086B3;} /* Name.Builtin */ - .nc{color: #ccc;font-weight: bold;} /* Name.Class */ - .no{color: turquoise;} /* Name.Constant */ - .ni{color: #800080;} - .ne{color: #900;font-weight: bold;} /* Name.Exception */ - .nf{color: #ccc;font-weight: bold;} /* Name.Function */ - .nn{color: #79C3E0;font-weight: bold;} /* Name.Namespace */ - .nt{color: #fc5;} /* Name.Tag */ - .nv{color: #FA4;} /* Name.Variable */ - .py { color: #336699; font-weight: bold } /* Name.Property */ - .ow { color: #008800 } /* Operator.Word */ - .w { color: #bbbbbb } /* Text.Whitespace */ - .mf { color: #7AC; font-weight: bold } /* Literal.Number.Float */ - .mh { color: #7AC; font-weight: bold } /* Literal.Number.Hex */ - .mi {color: #099;} /* Literal.Number.Integer */ - .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ - .sb { color: #dd2200; background-color: transparent; } /* Literal.String.Backtick */ - .sc{color: #d14;} /* Literal.String.Char */ - .sd { color: #dd2200; background-color: transparent; } /* Literal.String.Doc */ - .s2{color: orange;} /* Literal.String.Double */ - .se{color: orange;} /* Literal.String.Escape */ - .sh{color: orange;} /* Literal.String.Heredoc */ - .si{color: orange;} /* Literal.String.Interpol */ - .sx{color: orange;} /* Literal.String.Other */ - .sr{color: orange;} /* Literal.String.Regex */ - .s1{color: orange;} /* Literal.String.Single */ - .ss{color: orange;} /* Literal.String.Symbol */ - .bp { color: #D58 } /* Name.Builtin.Pseudo */ - .vc { color: #336699 } /* Name.Variable.Class */ - .vg { color: #dd7700 } /* Name.Variable.Global */ - .vi { color: cyan } -} + background-color: #232323; + } + + .hljs { + display: block; + padding: 0.5em; + background: #232323; + color: #E6E1DC; + } + + .hljs-comment, + .hljs-template_comment, + .hljs-javadoc, + .hljs-shebang { + color: #BC9458; + font-style: italic; + } + + .hljs-keyword, + .ruby .hljs-function .hljs-keyword, + .hljs-request, + .hljs-status, + .nginx .hljs-title, + .method, + .hljs-list .hljs-title { + color: #C26230; + } + + .hljs-string, + .hljs-number, + .hljs-regexp, + .hljs-tag .hljs-value, + .hljs-cdata, + .hljs-filter .hljs-argument, + .hljs-attr_selector, + .apache .hljs-cbracket, + .hljs-date, + .tex .hljs-command, + .markdown .hljs-link_label { + color: #A5C261; + } + + .hljs-subst { + color: #519F50; + } + + .hljs-tag, + .hljs-tag .hljs-keyword, + .hljs-tag .hljs-title, + .hljs-doctype, + .hljs-sub .hljs-identifier, + .hljs-pi, + .input_number { + color: #E8BF6A; + } + + .hljs-identifier { + color: #D0D0FF; + } + + .hljs-class .hljs-title, + .haskell .hljs-type, + .smalltalk .hljs-class, + .hljs-javadoctag, + .hljs-yardoctag, + .hljs-phpdoc { + text-decoration: none; + } + + .hljs-constant { + color: #DA4939; + } + + + .hljs-symbol, + .hljs-built_in, + .ruby .hljs-symbol .hljs-string, + .ruby .hljs-symbol .hljs-identifier, + .markdown .hljs-link_url, + .hljs-attribute { + color: #6D9CBE; + } + + .markdown .hljs-link_url { + text-decoration: underline; + } + + + .hljs-params, + .hljs-variable, + .clojure .hljs-attribute { + color: #D0D0FF; + } + + .css .hljs-tag, + .hljs-rules .hljs-property, + .hljs-pseudo, + .tex .hljs-special { + color: #CDA869; + } + + .css .hljs-class { + color: #9B703F; + } + + .hljs-rules .hljs-keyword { + color: #C5AF75; + } + + .hljs-rules .hljs-value { + color: #CF6A4C; + } + + .css .hljs-id { + color: #8B98AB; + } + + .hljs-annotation, + .apache .hljs-sqbracket, + .nginx .hljs-built_in { + color: #9B859D; + } + + .hljs-preprocessor, + .hljs-preprocessor *, + .hljs-pragma { + color: #8996A8 !important; + } + + .hljs-hexcolor, + .css .hljs-value .hljs-number { + color: #A5C261; + } + + .hljs-title, + .hljs-decorator, + .css .hljs-function { + color: #FFC66D; + } + + .diff .hljs-header, + .hljs-chunk { + background-color: #2F33AB; + color: #E6E1DC; + display: inline-block; + width: 100%; + } + + .diff .hljs-change { + background-color: #4A410D; + color: #F8F8F8; + display: inline-block; + width: 100%; + } + + .hljs-addition { + background-color: #144212; + color: #E6E1DC; + display: inline-block; + width: 100%; + } + + .hljs-deletion { + background-color: #600; + color: #E6E1DC; + display: inline-block; + width: 100%; + } + + .coffeescript .javascript, + .javascript .xml, + .tex .hljs-formula, + .xml .javascript, + .xml .vbscript, + .xml .css, + .xml .hljs-cdata { + opacity: 0.7; + } +} diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss index c9709fa7f..fb0da7cea 100644 --- a/app/assets/stylesheets/highlight/monokai.scss +++ b/app/assets/stylesheets/highlight/monokai.scss @@ -1,89 +1,140 @@ -$monokai-fg: #f8f8f2; -$monokai-comment: #75715e; -$monokai-pink: #f92672; -$monokai-blue: #66d9ef; -$monokai-green: #a6e22e; -$monokai-gold: #e6db74; -$monokai-dark: #3b3a32; -$monokai-purple: #ae81ff; +.monokai { + background-color: #272822; -.monokai .highlight { + .highlight{ + border-left: 1px solid #444; + } - background-color: #272822; + .line-numbers a { + color: #666; + } pre { background-color: #272822; - color: $monokai-fg; + color: #f8f8f2; } - .hll { background-color: darken($hover, 65%) } - .c { color: $monokai-comment } /* Comment */ - .err { color: $monokai-fg } /* Error */ - .g { color: $monokai-fg } /* Generic */ - .k { color: $monokai-pink } /* Keyword */ - .l { color: $monokai-fg } /* Literal */ - .n { color: $monokai-blue } /* Name */ - .o { color: $monokai-fg } /* Operator */ - .x { color: $monokai-fg } /* Other */ - .p { color: $monokai-fg } /* Punctuation */ - .cm { color: $monokai-comment } /* Comment.Multiline */ - .cp { color: $monokai-comment } /* Comment.Preproc */ - .c1 { color: $monokai-comment } /* Comment.Single */ - .cs { color: $monokai-comment } /* Comment.Special */ - .gd { color: #8b0807 } /* Generic.Deleted */ - .ge { color: $monokai-fg; text-decoration: underline } /* Generic.Emph */ - .gr { color: $monokai-fg } /* Generic.Error */ - .gh { color: $monokai-fg; font-weight: bold } /* Generic.Heading */ - .gi { color: $monokai-fg; font-weight: bold; background-color: #46830c } /* Generic.Inserted */ - .go { color: $monokai-dark; background-color: #31322c } /* Generic.Output */ - .gp { color: $monokai-fg } /* Generic.Prompt */ - .gs { color: $monokai-fg } /* Generic.Strong */ - .gu { color: $monokai-fg; font-weight: bold } /* Generic.Subheading */ - .gt { color: #f8f8f0; background-color: $monokai-pink } /* Generic.Traceback */ - .kc { color: $monokai-purple } /* Keyword.Constant */ - .kd { color: $monokai-pink } /* Keyword.Declaration */ - .kn { color: $monokai-pink } /* Keyword.Namespace */ - .kp { color: $monokai-pink } /* Keyword.Pseudo */ - .kr { color: $monokai-pink } /* Keyword.Reserved */ - .kt { color: $monokai-fg } /* Keyword.Type */ - .ld { color: $monokai-fg } /* Literal.Date */ - .m { color: $monokai-purple } /* Literal.Number */ - .s { color: $monokai-gold } /* Literal.String */ - .na { color: $monokai-purple } /* Name.Attribute */ - .nb { color: $monokai-blue } /* Name.Builtin */ - .nc { color: $monokai-fg } /* Name.Class */ - .no { color: $monokai-fg } /* Name.Constant */ - .nd { color: $monokai-fg } /* Name.Decorator */ - .ni { color: $monokai-fg } /* Name.Entity */ - .ne { color: $monokai-fg } /* Name.Exception */ - .nf { color: $monokai-green } /* Name.Function */ - .nl { color: $monokai-gold } /* Name.Label */ - .nn { color: $monokai-fg } /* Name.Namespace */ - .nx { color: $monokai-fg } /* Name.Other */ - .nt { color: $monokai-pink } /* Name.Tag */ - .nv { color: $monokai-blue; font-style: italic } /* Name.Variable */ - .py { color: $monokai-fg } /* Name.Property */ - .ow { color: $monokai-pink } /* Operator.Word */ - .w { color: $monokai-fg } /* Text.Whitespace */ - .mf { color: $monokai-purple } /* Literal.Number.Float */ - .mh { color: $monokai-purple } /* Literal.Number.Hex */ - .mi { color: $monokai-purple } /* Literal.Number.Integer */ - .mo { color: $monokai-purple } /* Literal.Number.Oct */ - .sb { color: $monokai-gold } /* Literal.String.Backtick */ - .sc { color: $monokai-gold } /* Literal.String.Char */ - .sd { color: $monokai-gold } /* Literal.String.Doc */ - .s2 { color: $monokai-gold } /* Literal.String.Double */ - .se { color: $monokai-gold } /* Literal.String.Escape */ - .sh { color: $monokai-gold } /* Literal.String.Heredoc */ - .si { color: $monokai-gold } /* Literal.String.Interpol */ - .sx { color: $monokai-gold } /* Literal.String.Other */ - .sr { color: $monokai-gold } /* Literal.String.Regex */ - .s1 { color: $monokai-gold } /* Literal.String.Single */ - .ss { color: $monokai-gold } /* Literal.String.Symbol */ - .bp { color: $monokai-fg } /* Name.Builtin.Pseudo */ - .vc { color: $monokai-blue; font-style: italic } /* Name.Variable.Class */ - .vg { color: $monokai-blue; font-style: italic } /* Name.Variable.Global */ - .vi { color: $monokai-blue; font-style: italic } /* Name.Variable.Instance */ - .il { color: $monokai-purple } /* Literal.Number.Integer.Long */ -} + .hljs { + display: block; padding: 0.5em; + background: #272822; + } + + .hljs-tag, + .hljs-tag .hljs-title, + .hljs-keyword, + .hljs-literal, + .hljs-strong, + .hljs-change, + .hljs-winutils, + .hljs-flow, + .lisp .hljs-title, + .clojure .hljs-built_in, + .nginx .hljs-title, + .tex .hljs-special { + color: #F92672; + } + + .hljs { + color: #DDD; + } + + .hljs .hljs-constant, + .asciidoc .hljs-code { + color: #66D9EF; + } + .hljs-code, + .hljs-class .hljs-title, + .hljs-header { + color: white; + } + + .hljs-link_label, + .hljs-attribute, + .hljs-symbol, + .hljs-symbol .hljs-string, + .hljs-value, + .hljs-regexp { + color: #BF79DB; + } + + .hljs-link_url, + .hljs-tag .hljs-value, + .hljs-string, + .hljs-bullet, + .hljs-subst, + .hljs-title, + .hljs-emphasis, + .haskell .hljs-type, + .hljs-preprocessor, + .hljs-pragma, + .ruby .hljs-class .hljs-parent, + .hljs-built_in, + .sql .hljs-aggregate, + .django .hljs-template_tag, + .django .hljs-variable, + .smalltalk .hljs-class, + .hljs-javadoc, + .django .hljs-filter .hljs-argument, + .smalltalk .hljs-localvars, + .smalltalk .hljs-array, + .hljs-attr_selector, + .hljs-pseudo, + .hljs-addition, + .hljs-stream, + .hljs-envvar, + .apache .hljs-tag, + .apache .hljs-cbracket, + .tex .hljs-command, + .hljs-prompt { + color: #A6E22E; + } + + .hljs-comment, + .java .hljs-annotation, + .smartquote, + .hljs-blockquote, + .hljs-horizontal_rule, + .python .hljs-decorator, + .hljs-template_comment, + .hljs-pi, + .hljs-doctype, + .hljs-deletion, + .hljs-shebang, + .apache .hljs-sqbracket, + .tex .hljs-formula { + color: #75715E; + } + + .hljs-keyword, + .hljs-literal, + .css .hljs-id, + .hljs-phpdoc, + .hljs-title, + .hljs-header, + .haskell .hljs-type, + .vbscript .hljs-built_in, + .sql .hljs-aggregate, + .rsl .hljs-built_in, + .smalltalk .hljs-class, + .diff .hljs-header, + .hljs-chunk, + .hljs-winutils, + .bash .hljs-variable, + .apache .hljs-tag, + .tex .hljs-special, + .hljs-request, + .hljs-status { + font-weight: bold; + } + + .coffeescript .javascript, + .javascript .xml, + .tex .hljs-formula, + .xml .javascript, + .xml .vbscript, + .xml .css, + .xml .hljs-cdata { + opacity: 0.5; + } +} diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss index 1a35d1ed2..694f3590f 100644 --- a/app/assets/stylesheets/highlight/solarized_dark.scss +++ b/app/assets/stylesheets/highlight/solarized_dark.scss @@ -10,6 +10,10 @@ color: #eee; } + .line-numbers a { + color: #666; + } + .hljs { display: block; padding: 0.5em; diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss index 855e6ca34..7eec3da94 100644 --- a/app/assets/stylesheets/highlight/white.scss +++ b/app/assets/stylesheets/highlight/white.scss @@ -2,7 +2,7 @@ background-color: #fff; .highlight{ - border-left: 1px solid #ddd; + border-left: 1px solid #eee; } pre { @@ -17,6 +17,158 @@ .line-numbers a { color: #999; } + + .hljs { + display: block; padding: 0.5em; + background: #fff; color: black; + } + + .hljs-comment, + .hljs-template_comment, + .hljs-javadoc, + .hljs-comment * { + color: #006a00; + } + + .hljs-keyword, + .hljs-literal, + .nginx .hljs-title { + color: #aa0d91; + } + .method, + .hljs-list .hljs-title, + .hljs-tag .hljs-title, + .setting .hljs-value, + .hljs-winutils, + .tex .hljs-command, + .http .hljs-title, + .hljs-request, + .hljs-status { + color: #008; + } + + .hljs-envvar, + .tex .hljs-special { + color: #660; + } + + .hljs-string { + color: #c41a16; + } + .hljs-tag .hljs-value, + .hljs-cdata, + .hljs-filter .hljs-argument, + .hljs-attr_selector, + .apache .hljs-cbracket, + .hljs-date, + .hljs-regexp { + color: #080; + } + + .hljs-sub .hljs-identifier, + .hljs-pi, + .hljs-tag, + .hljs-tag .hljs-keyword, + .hljs-decorator, + .ini .hljs-title, + .hljs-shebang, + .hljs-prompt, + .hljs-hexcolor, + .hljs-rules .hljs-value, + .hljs-symbol, + .hljs-symbol .hljs-string, + .hljs-number, + .css .hljs-function, + .clojure .hljs-title, + .clojure .hljs-built_in, + .hljs-function .hljs-title, + .coffeescript .hljs-attribute { + color: #1c00cf; + } + + .hljs-class .hljs-title, + .haskell .hljs-type, + .smalltalk .hljs-class, + .hljs-javadoctag, + .hljs-yardoctag, + .hljs-phpdoc, + .hljs-typename, + .hljs-tag .hljs-attribute, + .hljs-doctype, + .hljs-class .hljs-id, + .hljs-built_in, + .setting, + .hljs-params, + .clojure .hljs-attribute { + color: #5c2699; + } + + .hljs-variable { + color: #3f6e74; + } + .css .hljs-tag, + .hljs-rules .hljs-property, + .hljs-pseudo, + .hljs-subst { + color: #000; + } + + .css .hljs-class, + .css .hljs-id { + color: #9B703F; + } + + .hljs-value .hljs-important { + color: #ff7700; + font-weight: bold; + } + + .hljs-rules .hljs-keyword { + color: #C5AF75; + } + + .hljs-annotation, + .apache .hljs-sqbracket, + .nginx .hljs-built_in { + color: #9B859D; + } + + .hljs-preprocessor, + .hljs-preprocessor *, + .hljs-pragma { + color: #643820; + } + + .tex .hljs-formula { + background-color: #EEE; + font-style: italic; + } + + .diff .hljs-header, + .hljs-chunk { + color: #808080; + font-weight: bold; + } + + .diff .hljs-change { + background-color: #BCCFF9; + } + + .hljs-addition { + background-color: #BAEEBA; + } + + .hljs-deletion { + background-color: #FFC8BD; + } + + .hljs-comment .hljs-yardoctag { + font-weight: bold; + } + + .method .hljs-id { + color: #000; + } } .shadow { -- 2.11.0