diff --git a/.themes/classic/sass/partials/_syntax.scss b/.themes/classic/sass/partials/_syntax.scss index 1ab02c1..84e5581 100644 --- a/.themes/classic/sass/partials/_syntax.scss +++ b/.themes/classic/sass/partials/_syntax.scss @@ -1,112 +1,3 @@ -.highlight, html .gist .gist-file .gist-syntax .gist-highlight { - table td.code { width: 100%; } - .line-numbers { - text-align: right; - font-size: 13px; - line-height: 1.45em; - @if lightness($base03) > lightness(#555) { - background: lighten($base03, 1) $noise-bg !important; - border-right: 1px solid darken($base02, 2) !important; - @include box-shadow(lighten($base03, 2) -1px 0 inset); - text-shadow: lighten($base02, 2) 0 -1px; - } @else { - background: $base02 $noise-bg !important; - border-right: 1px solid darken($base03, 2) !important; - @include box-shadow(lighten($base02, 2) -1px 0 inset); - text-shadow: darken($base02, 10) 0 -1px; - } - span { color: $base01 !important; } - padding: .8em !important; - @include border-radius(0); - } - border: 1px solid $pre-border !important; -} -figure.code, .gist-file, pre { - @include box-shadow(rgba(#000, .06) 0 0 10px); - .highlight pre { @include box-shadow(none); } -} - -pre .line.marked { - position: relative; - display: block; - &:after { - content: ""; - position: absolute; - background: $marker-bg; - left: -.8em; top: 0; bottom: 0; right: -.8em; - border: 1px solid { left-color: $marker-border-left; left-width: 2px; right-color: $marker-border; top: 0; bottom: 0; } - } - &.start:after { - border-top: 1px solid $marker-border; - } - &.end:after { - border-bottom: 1px solid $marker-border; - } -} - -html .gist .gist-file { - margin-bottom: 1.8em; - position: relative; - border: none; - padding-top: image-height("code_bg.png") !important; - .gist-syntax { - border-bottom: 0 !important; - background: none !important; - .gist-highlight{ - background: $base03 !important; - pre { - @extend .pre-code; - } - } - } - .gist-meta { - padding: .6em 0.8em; - border: 1px solid lighten($base02, 2) !important; - color: $base01; - font-size: .7em !important; - @if lightness($base03) > lightness(#555) { - background: lighten($base03, 2) $noise-bg; - border: 1px solid $pre-border !important; - border-top: 1px solid lighten($base03, 2) !important; - } @else { - background: $base02 $noise-bg; - } - @extend .sans; - line-height: 1.5em; - a { - color: mix($base1, $base01) !important; - @include hover-link; - &:hover { color: $base1 !important; } - } - a[href*='#file'] { - position: absolute; top: 0; left:0; right:-10px; - color: #474747 !important; - @extend .code-title; - &:hover { color: $link-color !important; } - } - a[href*=raw]{ - @extend .download-source; - top: .4em; - } - } -} -pre { - background: $pre-bg $noise-bg; - @include border-radius(.4em); - @extend .mono; - border: 1px solid $pre-border; - line-height: 1.45em; - font-size: 13px; - margin-bottom: 2.1em; - padding: .8em 1em; - color: $pre-color; - overflow: auto; -} -h3.filename { - @extend .code-title; - + pre { @include border-top-radius(0px); } -} - p, li { code { @extend .mono; @@ -121,94 +12,211 @@ p, li { padding: 0 .3em; margin: -1px 0; } - pre code { font-size: 1em !important; background: none; border: none; } + pre code { font-size: 1em; background: none; border: none; } } -.pre-code { - font-family: $mono !important; - overflow: scroll; - overflow-y: hidden; - display: block; - padding: .8em !important; - overflow-x: auto; +pre { + background: $pre-bg $noise-bg; + @include border-radius(.4em); + @extend .mono; + border: 1px solid $pre-border; line-height: 1.45em; - background: $base03 $noise-bg !important; - color: $base1 !important; - span { color: $base1 !important; } - span { font-style: normal !important; font-weight: normal !important; } - - .c { color: $base01 !important; font-style: italic !important; } /* Comment */ - .cm { color: $base01 !important; font-style: italic !important; } /* Comment.Multiline */ - .cp { color: $base01 !important; font-style: italic !important; } /* Comment.Preproc */ - .c1 { color: $base01 !important; font-style: italic !important; } /* Comment.Single */ - .cs { color: $base01 !important; font-weight: bold !important; font-style: italic !important; } /* Comment.Special */ - .err { color: $solar-red !important; background: none !important; } /* Error */ - .k { color: $solar-orange !important; } /* Keyword */ - .o { color: $base1 !important; font-weight: bold !important; } /* Operator */ - .p { color: $base1 !important; } /* Operator */ - .ow { color: $solar-cyan !important; font-weight: bold !important; } /* Operator.Word */ - .gd { color: $base1 !important; background-color: mix($solar-red, $base03, 25%) !important; display: inline-block; } /* Generic.Deleted */ - .gd .x { color: $base1 !important; background-color: mix($solar-red, $base03, 35%) !important; display: inline-block; } /* Generic.Deleted.Specific */ - .ge { color: $base1 !important; font-style: italic !important; } /* Generic.Emph */ - //.gr { color: #aa0000 } /* Generic.Error */ - .gh { color: $base01 !important; } /* Generic.Heading */ - .gi { color: $base1 !important; background-color: mix($solar-green, $base03, 20%) !important; display: inline-block; } /* Generic.Inserted */ - .gi .x { color: $base1 !important; background-color: mix($solar-green, $base03, 40%) !important; display: inline-block; } /* Generic.Inserted.Specific */ - //.go { color: #888888 } /* Generic.Output */ - //.gp { color: #555555 } /* Generic.Prompt */ - .gs { color: $base1 !important; font-weight: bold !important; } /* Generic.Strong */ - .gu { color: $solar-violet !important; } /* Generic.Subheading */ - //.gt { color: #aa0000 } /* Generic.Traceback */ - .kc { color: $solar-green !important; font-weight: bold !important; } /* Keyword.Constant */ - .kd { color: $solar-blue !important; } /* Keyword.Declaration */ - .kp { color: $solar-orange !important; font-weight: bold !important; } /* Keyword.Pseudo */ - .kr { color: $solar-magenta !important; font-weight: bold !important; } /* Keyword.Reserved */ - .kt { color: $solar-cyan !important; } /* Keyword.Type */ - .n { color: $solar-blue !important; } - .na { color: $solar-blue !important; } /* Name.Attribute */ - .nb { color: $solar-green !important; } /* Name.Builtin */ - .nc { color: $solar-magenta !important;} /* Name.Class */ - .no { color: $solar-yellow !important; } /* Name.Constant */ - //.ni { color: #800080 } /* Name.Entity */ - .nl { color: $solar-green !important; } - .ne { color: $solar-blue !important; font-weight: bold !important; } /* Name.Exception */ - .nf { color: $solar-blue !important; font-weight: bold !important; } /* Name.Function */ - .nn { color: $solar-yellow !important; } /* Name.Namespace */ - .nt { color: $solar-blue !important; font-weight: bold !important; } /* Name.Tag */ - .nx { color: $solar-yellow !Important; } - //.bp { color: #999999 } /* Name.Builtin.Pseudo */ - //.vc { color: #008080 } /* Name.Variable.Class */ - .vg { color: $solar-blue !important; } /* Name.Variable.Global */ - .vi { color: $solar-blue !important; } /* Name.Variable.Instance */ - .nv { color: $solar-blue !important; } /* Name.Variable */ - //.w { color: #bbbbbb } /* Text.Whitespace */ - .mf { color: $solar-cyan !important; } /* Literal.Number.Float */ - .m { color: $solar-cyan !important; } /* Literal.Number */ - .mh { color: $solar-cyan !important; } /* Literal.Number.Hex */ - .mi { color: $solar-cyan !important; } /* Literal.Number.Integer */ - //.mo { color: #009999 } /* Literal.Number.Oct */ - .s { color: $solar-cyan !important; } /* Literal.String */ - //.sb { color: #d14 } /* Literal.String.Backtick */ - //.sc { color: #d14 } /* Literal.String.Char */ - .sd { color: $solar-cyan !important; } /* Literal.String.Doc */ - .s2 { color: $solar-cyan !important; } /* Literal.String.Double */ - .se { color: $solar-red !important; } /* Literal.String.Escape */ - //.sh { color: #d14 } /* Literal.String.Heredoc */ - .si { color: $solar-blue !important; } /* Literal.String.Interpol */ - //.sx { color: #d14 } /* Literal.String.Other */ - .sr { color: $solar-cyan !important; } /* Literal.String.Regex */ - .s1 { color: $solar-cyan !important; } /* Literal.String.Single */ - //.ss { color: #990073 } /* Literal.String.Symbol */ - //.il { color: #009999 } /* Literal.Number.Integer.Long */ - div { .gd, .gd .x, .gi, .gi .x { display: inline-block; width: 100%; }} + font-size: 13px; + margin-bottom: 2.1em; + padding: .8em 1em; + color: $pre-color; + overflow: auto; + @if $code-selection-color != false { + @include selection($code-selection); + } + .marked { + position: relative; + display: block; + &:after { + content: ""; + position: absolute; + background: $marker-bg; + left: -.8em; top: 0; bottom: 0; right: -.8em; + border: 1px solid { left-color: $marker-border-left; left-width: 2px; right-color: $marker-border; top: 0; bottom: 0; } + } + &.start:after { + border-top: 1px solid $marker-border; + } + &.end:after { + border-bottom: 1px solid $marker-border; + } + } } -.highlight, .gist-highlight { - pre { background: none; @include border-radius(none); border: none; padding: 0; margin-bottom: 0; } - margin-bottom: 1.8em; +figure.code { + @include box-shadow(rgba(#000, .06) 0 0 10px); + background: none; + padding: 0; + border: 0; + margin-bottom: 1.5em; + pre { margin-bottom: 0; } + figcaption { + position: relative; + text-align: center; + font-size: 13px; + line-height: 2em; + font-weight: normal; + margin-bottom: 0; + @include border-top-radius(5px); + font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; + background-color: #aaaaaa; + @if lightness($base03) <= lightness(#555) { + text-shadow: #cbcccc 0 1px 0; + color: #555; + @include background-image(linear-gradient( + #e0e0e0, #cfcfcf 6%, #b1b1b1 90%, #aaaaaa + )); + border: 1px solid #a5a5a5 { + top-color: #cbcbcb; + bottom: 0; + } + } + @else if lightness($base03) > lightness(#555) { + text-shadow: #fff 0 1px 0; + color: #777; + @include background-image(linear-gradient( + #fff, #f0f0f0 6%, #e5e5e5 90%, #ddd + )); + border: 1px solid #c5c5c5 { + top-color: #d5d5d5; + bottom: 0; + } + } + a { + position: absolute; right: .8em; + @include hover-link; + color: inherit; + z-index: 1; + font-size: 13px; + padding-left: 3em; + } + } +} + +.highlight { + border: 1px solid $pre-border; background: $base03; overflow-y: hidden; overflow-x: auto; + pre { + background: none; + @include border-radius(0px); + @include box-shadow(none); + border: none; + padding: 0; + margin-bottom: 0; + } + + code { + font-family: $mono; + overflow: scroll; + overflow-y: hidden; + display: block; + padding: .8em; + overflow-x: auto; + line-height: 1.45em; + background: $base03 $noise-bg; + color: $base1; + span { + color: $base1; + font-style: normal; + font-weight: normal; + } + } + + table td.code { width: 100%; } + + .line-numbers { + @include border-radius(0); + text-align: right; + font-size: 13px; + line-height: 1.45em; + padding: .8em; + + @if lightness($base03) > lightness(#555) { + background: lighten($base03, 1) $noise-bg; + border-right: 1px solid darken($base02, 2); + @include box-shadow(lighten($base03, 2) -1px 0 inset); + text-shadow: lighten($base02, 2) 0 -1px; + } @else { + background: $base02 $noise-bg; + border-right: 1px solid darken($base03, 2); + @include box-shadow(lighten($base02, 2) -1px 0 inset); + text-shadow: darken($base02, 10) 0 -1px; + } + + span { color: $base01; } + } + + .c { color: $base01; font-style: italic; } /* Comment */ + .cm { color: $base01; font-style: italic; } /* Comment.Multiline */ + .cp { color: $base01; font-style: italic; } /* Comment.Preproc */ + .c1 { color: $base01; font-style: italic; } /* Comment.Single */ + .cs { color: $base01; font-weight: bold; font-style: italic; } /* Comment.Special */ + .err { color: $solar-red; background: none; } /* Error */ + .k { color: $solar-orange; } /* Keyword */ + .o { color: $base1; font-weight: bold; } /* Operator */ + .p { color: $base1; } /* Operator */ + .ow { color: $solar-cyan; font-weight: bold; } /* Operator.Word */ + .gd { color: $base1; background-color: mix($solar-red, $base03, 25%); display: inline-block; } /* Generic.Deleted */ + .gd .x { color: $base1; background-color: mix($solar-red, $base03, 35%); display: inline-block; } /* Generic.Deleted.Specific */ + .ge { color: $base1; font-style: italic; } /* Generic.Emph */ + //.gr { color: #aa0000 } /* Generic.Error */ + .gh { color: $base01; } /* Generic.Heading */ + .gi { color: $base1; background-color: mix($solar-green, $base03, 20%); display: inline-block; } /* Generic.Inserted */ + .gi .x { color: $base1; background-color: mix($solar-green, $base03, 40%); display: inline-block; } /* Generic.Inserted.Specific */ + //.go { color: #888888 } /* Generic.Output */ + //.gp { color: #555555 } /* Generic.Prompt */ + .gs { color: $base1; font-weight: bold; } /* Generic.Strong */ + .gu { color: $solar-violet; } /* Generic.Subheading */ + //.gt { color: #aa0000 } /* Generic.Traceback */ + .kc { color: $solar-green; font-weight: bold; } /* Keyword.Constant */ + .kd { color: $solar-blue; } /* Keyword.Declaration */ + .kp { color: $solar-orange; font-weight: bold; } /* Keyword.Pseudo */ + .kr { color: $solar-magenta; font-weight: bold; } /* Keyword.Reserved */ + .kt { color: $solar-cyan; } /* Keyword.Type */ + .n { color: $solar-blue; } + .na { color: $solar-blue; } /* Name.Attribute */ + .nb { color: $solar-green; } /* Name.Builtin */ + .nc { color: $solar-magenta;} /* Name.Class */ + .no { color: $solar-yellow; } /* Name.Constant */ + //.ni { color: #800080 } /* Name.Entity */ + .nl { color: $solar-green; } + .ne { color: $solar-blue; font-weight: bold; } /* Name.Exception */ + .nf { color: $solar-blue; font-weight: bold; } /* Name.Function */ + .nn { color: $solar-yellow; } /* Name.Namespace */ + .nt { color: $solar-blue; font-weight: bold; } /* Name.Tag */ + .nx { color: $solar-yellow !Important; } + //.bp { color: #999999 } /* Name.Builtin.Pseudo */ + //.vc { color: #008080 } /* Name.Variable.Class */ + .vg { color: $solar-blue; } /* Name.Variable.Global */ + .vi { color: $solar-blue; } /* Name.Variable.Instance */ + .nv { color: $solar-blue; } /* Name.Variable */ + //.w { color: #bbbbbb } /* Text.Whitespace */ + .mf { color: $solar-cyan; } /* Literal.Number.Float */ + .m { color: $solar-cyan; } /* Literal.Number */ + .mh { color: $solar-cyan; } /* Literal.Number.Hex */ + .mi { color: $solar-cyan; } /* Literal.Number.Integer */ + //.mo { color: #009999 } /* Literal.Number.Oct */ + .s { color: $solar-cyan; } /* Literal.String */ + //.sb { color: #d14 } /* Literal.String.Backtick */ + //.sc { color: #d14 } /* Literal.String.Char */ + .sd { color: $solar-cyan; } /* Literal.String.Doc */ + .s2 { color: $solar-cyan; } /* Literal.String.Double */ + .se { color: $solar-red; } /* Literal.String.Escape */ + //.sh { color: #d14 } /* Literal.String.Heredoc */ + .si { color: $solar-blue; } /* Literal.String.Interpol */ + //.sx { color: #d14 } /* Literal.String.Other */ + .sr { color: $solar-cyan; } /* Literal.String.Regex */ + .s1 { color: $solar-cyan; } /* Literal.String.Single */ + //.ss { color: #990073 } /* Literal.String.Symbol */ + //.il { color: #009999 } /* Literal.Number.Integer.Long */ + div { .gd, .gd .x, .gi, .gi .x { display: inline-block; width: 100%; }} } $solar-scroll-bg: rgba(#fff, .15); @@ -218,72 +226,8 @@ $solar-scroll-thumb: rgba(#fff, .2); $solar-scroll-thumb: rgba(#000, .15); } -pre, .highlight, .gist-highlight { +pre, .highlight { &::-webkit-scrollbar { height: .5em; background: $solar-scroll-bg; } &::-webkit-scrollbar-thumb:horizontal { background: $solar-scroll-thumb; -webkit-border-radius: 4px; border-radius: 4px } } -.highlight code { @extend .pre-code; background: #000;} -figure.code { - background: none; - padding: 0; - border: 0; - margin-bottom: 1.5em; - pre { margin-bottom: 0; } - figcaption { - position: relative; - @extend .code-title; - a { @extend .download-source; } - } - .highlight { - margin-bottom: 0; - } -} - -pre { - @if $code-selection-color != false { - @include selection($code-selection); - } -} - -.code-title { - text-align: center; - font-size: 13px; - line-height: 2em; - font-weight: normal; - margin-bottom: 0; - @include border-top-radius(5px); - font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; - background-color: #aaaaaa; // image-url("code_bg.png") top repeat-x; - @if lightness($base03) <= lightness(#555) { - text-shadow: #cbcccc 0 1px 0; - color: #555; - @include background-image(linear-gradient( - #e0e0e0, #cfcfcf 6%, #b1b1b1 90%, #aaaaaa - )); - border: 1px solid #a5a5a5 { - top-color: #cbcbcb; - bottom: 0; - } - } - @else if lightness($base03) > lightness(#555) { - text-shadow: #fff 0 1px 0; - color: #777; - @include background-image(linear-gradient( - #fff, #f0f0f0 6%, #e5e5e5 90%, #ddd - )); - border: 1px solid #c5c5c5 { - top-color: #d5d5d5; - bottom: 0; - } - } -} - -.download-source { - position: absolute; right: .8em; - @include hover-link; - color: inherit !important; - z-index: 1; - font-size: 13px; - padding-left: 3em; -} diff --git a/plugins/gist_tag.rb b/plugins/gist_tag.rb index dd84bee..73dc47f 100644 --- a/plugins/gist_tag.rb +++ b/plugins/gist_tag.rb @@ -74,7 +74,7 @@ module Jekyll lang = file.empty? ? '' : file.split('.')[-1] link = "https://gist.github.com/#{gist}" caption = file.empty? ? "Gist: #{gist}" : file - data = highlight(data.body, lang, { linenos: true, start: 1, caption: caption, url: link, anchor: 'View Gist' }) + data = highlight(data.body, lang, { linenos: true, start: 1, caption: caption, url: link, anchor: 'Gist page' }) cache gist, file, data unless @cache_disabled data diff --git a/plugins/include_code.rb b/plugins/include_code.rb index bb2c36b..1feb436 100644 --- a/plugins/include_code.rb +++ b/plugins/include_code.rb @@ -98,7 +98,7 @@ module Jekyll @lang = file.extname.sub('.','') unless @lang title = @title ? "#{@title} (#{file.basename})" : file.basename url = "/#{code_dir}/#{@file}" - highlight(code, @lang, {caption: title, url: url, anchor: 'download', start: @start, marks: @marks, linenos: @linenos }) + highlight(code, @lang, {caption: title, url: url, anchor: 'view raw', start: @start, marks: @marks, linenos: @linenos }) end end end diff --git a/plugins/pygments_code.rb b/plugins/pygments_code.rb index eae638a..20bd6ca 100644 --- a/plugins/pygments_code.rb +++ b/plugins/pygments_code.rb @@ -66,7 +66,7 @@ module HighlightCode def captionize (caption, url, anchor) figcaption = "
#{caption}" - figcaption += " #{anchor || 'link'}" if url + figcaption += "#{anchor.strip || 'link'}" if url figcaption += "
" end