├── README.md ├── colors.less ├── LICENSE ├── syntax-firewatch.css ├── syntax-one-dark.css ├── syntax-firewatch-green.css ├── syntax-one-dark-vivid.css ├── syntax-variables.less └── syntax.less /README.md: -------------------------------------------------------------------------------- 1 | # OneDarkJekyll 2 | 3 | *Use Atom's One Dark syntax colors in your Jekyll powered blog!* 4 | 5 | It's LESS file which can be compiled to a - Pygments, Rouge compatible - stylesheet from Atom editor's One Dark syntax theme (and any theme based on it, for example One Dark Vivid, Firewatch, etc.). 6 | 7 | Download the stylesheet files or compile a new one from any Atom syntax theme which based on One Dark (the variable names in `colors.less` must match with One Dark's) 8 | 9 | ## Create a new syntax stylesheet 10 | 11 | 1. `npm install -g less less-plugin-clean-css` 12 | 2. Clone this repository 13 | 3. Download the `colors.css` file from the syntax theme's repository (for example https://github.com/atom/one-dark-syntax/blob/master/styles/colors.less in case of One-Dark) 14 | 4. Put the previously downloaded file next to `syntax.less` 15 | 5. Run `lessc syntax.less syntax.css --clean-css` 16 | 6. Use the `syntax.css` 17 | 18 | It's not final and in case you find any error/improvement feel free to create a PR. :) 19 | -------------------------------------------------------------------------------- /colors.less: -------------------------------------------------------------------------------- 1 | // Config ----------------------------------- 2 | @syntax-hue: 220; 3 | @syntax-saturation: 13%; 4 | @syntax-brightness: 18%; 5 | 6 | 7 | // Monochrome ----------------------------------- 8 | @mono-1: hsl(@syntax-hue, 14%, 71%); // default text 9 | @mono-2: hsl(@syntax-hue, 9%, 55%); 10 | @mono-3: hsl(@syntax-hue, 10%, 40%); 11 | 12 | // Colors ----------------------------------- 13 | @hue-1: hsl(187, 47%, 55%); // <-cyan 14 | @hue-2: hsl(207, 82%, 66%); // <-blue 15 | @hue-3: hsl(286, 60%, 67%); // <-purple 16 | @hue-4: hsl( 95, 38%, 62%); // <-green 17 | 18 | @hue-5: hsl(355, 65%, 65%); // <-red 1 19 | @hue-5-2: hsl( 5, 48%, 51%); // <-red 2 20 | 21 | @hue-6: hsl( 29, 54%, 61%); // <-orange 1 22 | @hue-6-2: hsl( 39, 67%, 69%); // <-orange 2 23 | 24 | 25 | // Base colors ----------------------------------- 26 | @syntax-fg: @mono-1; 27 | @syntax-bg: hsl(@syntax-hue, @syntax-saturation, @syntax-brightness); 28 | @syntax-gutter: darken(@syntax-fg, 26%); 29 | @syntax-guide: fade(@syntax-fg, 15%); 30 | @syntax-accent: hsl(@syntax-hue, 100%, 66% ); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Mihály Gyöngyösi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /syntax-firewatch.css: -------------------------------------------------------------------------------- 1 | .highlight,pre.highlight{background:#282c34;color:#abb2bf}.highlight pre{background:#282c34}.highlight .hll{background:#282c34}.highlight .c{color:#5c6370;font-style:italic}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#dd672c}.highlight .l{color:#c8ae9d}.highlight .n{color:#abb2bf}.highlight .o{color:#abb2bf}.highlight .p{color:#abb2bf}.highlight .cm{color:#5c6370;font-style:italic}.highlight .cp{color:#5c6370;font-style:italic}.highlight .c1{color:#5c6370;font-style:italic}.highlight .cs{color:#5c6370;font-style:italic}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .kc{color:#dd672c}.highlight .kd{color:#dd672c}.highlight .kn{color:#dd672c}.highlight .kp{color:#dd672c}.highlight .kr{color:#dd672c}.highlight .kt{color:#dd672c}.highlight .ld{color:#c8ae9d}.highlight .m{color:#d19a66}.highlight .s{color:#c8ae9d}.highlight .na{color:#d19a66}.highlight .nb{color:#e5c07b}.highlight .nc{color:#e5c07b}.highlight .no{color:#e5c07b}.highlight .nd{color:#e5c07b}.highlight .ni{color:#e5c07b}.highlight .ne{color:#e5c07b}.highlight .nf{color:#abb2bf}.highlight .nl{color:#e5c07b}.highlight .nn{color:#abb2bf}.highlight .nx{color:#abb2bf}.highlight .py{color:#e5c07b}.highlight .nt{color:#e06c75}.highlight .nv{color:#e5c07b}.highlight .ow{font-weight:700}.highlight .w{color:#f8f8f2}.highlight .mf{color:#d19a66}.highlight .mh{color:#d19a66}.highlight .mi{color:#d19a66}.highlight .mo{color:#d19a66}.highlight .sb{color:#c8ae9d}.highlight .sc{color:#c8ae9d}.highlight .sd{color:#c8ae9d}.highlight .s2{color:#c8ae9d}.highlight .se{color:#c8ae9d}.highlight .sh{color:#c8ae9d}.highlight .si{color:#c8ae9d}.highlight .sx{color:#c8ae9d}.highlight .sr{color:#56b6c2}.highlight .s1{color:#c8ae9d}.highlight .ss{color:#56b6c2}.highlight .bp{color:#e5c07b}.highlight .vc{color:#e5c07b}.highlight .vg{color:#e5c07b}.highlight .vi{color:#e06c75}.highlight .il{color:#d19a66}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e} -------------------------------------------------------------------------------- /syntax-one-dark.css: -------------------------------------------------------------------------------- 1 | .highlight,pre.highlight{background:#282c34;color:#abb2bf}.highlight pre{background:#282c34}.highlight .hll{background:#282c34}.highlight .c{color:#5c6370;font-style:italic}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#c678dd}.highlight .l{color:#98c379}.highlight .n{color:#abb2bf}.highlight .o{color:#abb2bf}.highlight .p{color:#abb2bf}.highlight .cm{color:#5c6370;font-style:italic}.highlight .cp{color:#5c6370;font-style:italic}.highlight .c1{color:#5c6370;font-style:italic}.highlight .cs{color:#5c6370;font-style:italic}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .kc{color:#c678dd}.highlight .kd{color:#c678dd}.highlight .kn{color:#c678dd}.highlight .kp{color:#c678dd}.highlight .kr{color:#c678dd}.highlight .kt{color:#c678dd}.highlight .ld{color:#98c379}.highlight .m{color:#d19a66}.highlight .s{color:#98c379}.highlight .na{color:#d19a66}.highlight .nb{color:#e5c07b}.highlight .nc{color:#e5c07b}.highlight .no{color:#e5c07b}.highlight .nd{color:#e5c07b}.highlight .ni{color:#e5c07b}.highlight .ne{color:#e5c07b}.highlight .nf{color:#abb2bf}.highlight .nl{color:#e5c07b}.highlight .nn{color:#abb2bf}.highlight .nx{color:#abb2bf}.highlight .py{color:#e5c07b}.highlight .nt{color:#e06c75}.highlight .nv{color:#e5c07b}.highlight .ow{font-weight:700}.highlight .w{color:#f8f8f2}.highlight .mf{color:#d19a66}.highlight .mh{color:#d19a66}.highlight .mi{color:#d19a66}.highlight .mo{color:#d19a66}.highlight .sb{color:#98c379}.highlight .sc{color:#98c379}.highlight .sd{color:#98c379}.highlight .s2{color:#98c379}.highlight .se{color:#98c379}.highlight .sh{color:#98c379}.highlight .si{color:#98c379}.highlight .sx{color:#98c379}.highlight .sr{color:#56b6c2}.highlight .s1{color:#98c379}.highlight .ss{color:#56b6c2}.highlight .bp{color:#e5c07b}.highlight .vc{color:#e5c07b}.highlight .vg{color:#e5c07b}.highlight .vi{color:#e06c75}.highlight .il{color:#d19a66}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e} -------------------------------------------------------------------------------- /syntax-firewatch-green.css: -------------------------------------------------------------------------------- 1 | .highlight,pre.highlight{background:#282c34;color:#abb2bf}.highlight pre{background:#282c34}.highlight .hll{background:#282c34}.highlight .c{color:#5c6370;font-style:italic}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#5ba473}.highlight .l{color:#c8ae9d}.highlight .n{color:#abb2bf}.highlight .o{color:#abb2bf}.highlight .p{color:#abb2bf}.highlight .cm{color:#5c6370;font-style:italic}.highlight .cp{color:#5c6370;font-style:italic}.highlight .c1{color:#5c6370;font-style:italic}.highlight .cs{color:#5c6370;font-style:italic}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .kc{color:#5ba473}.highlight .kd{color:#5ba473}.highlight .kn{color:#5ba473}.highlight .kp{color:#5ba473}.highlight .kr{color:#5ba473}.highlight .kt{color:#5ba473}.highlight .ld{color:#c8ae9d}.highlight .m{color:#d19a66}.highlight .s{color:#c8ae9d}.highlight .na{color:#d19a66}.highlight .nb{color:#e5c07b}.highlight .nc{color:#e5c07b}.highlight .no{color:#e5c07b}.highlight .nd{color:#e5c07b}.highlight .ni{color:#e5c07b}.highlight .ne{color:#e5c07b}.highlight .nf{color:#abb2bf}.highlight .nl{color:#e5c07b}.highlight .nn{color:#abb2bf}.highlight .nx{color:#abb2bf}.highlight .py{color:#e5c07b}.highlight .nt{color:#77b181}.highlight .nv{color:#e5c07b}.highlight .ow{font-weight:700}.highlight .w{color:#f8f8f2}.highlight .mf{color:#d19a66}.highlight .mh{color:#d19a66}.highlight .mi{color:#d19a66}.highlight .mo{color:#d19a66}.highlight .sb{color:#c8ae9d}.highlight .sc{color:#c8ae9d}.highlight .sd{color:#c8ae9d}.highlight .s2{color:#c8ae9d}.highlight .se{color:#c8ae9d}.highlight .sh{color:#c8ae9d}.highlight .si{color:#c8ae9d}.highlight .sx{color:#c8ae9d}.highlight .sr{color:#56b6c2}.highlight .s1{color:#c8ae9d}.highlight .ss{color:#56b6c2}.highlight .bp{color:#e5c07b}.highlight .vc{color:#e5c07b}.highlight .vg{color:#e5c07b}.highlight .vi{color:#77b181}.highlight .il{color:#d19a66}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e} -------------------------------------------------------------------------------- /syntax-one-dark-vivid.css: -------------------------------------------------------------------------------- 1 | .highlight,pre.highlight{background:#31343f;color:#dee2f7}.highlight pre{background:#31343f}.highlight .hll{background:#31343f}.highlight .c{color:#63677e;font-style:italic}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#e19ef5}.highlight .l{color:#a3eea0}.highlight .n{color:#dee2f7}.highlight .o{color:#dee2f7}.highlight .p{color:#dee2f7}.highlight .cm{color:#63677e;font-style:italic}.highlight .cp{color:#63677e;font-style:italic}.highlight .c1{color:#63677e;font-style:italic}.highlight .cs{color:#63677e;font-style:italic}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .kc{color:#e19ef5}.highlight .kd{color:#e19ef5}.highlight .kn{color:#e19ef5}.highlight .kp{color:#e19ef5}.highlight .kr{color:#e19ef5}.highlight .kt{color:#e19ef5}.highlight .ld{color:#a3eea0}.highlight .m{color:#eddc96}.highlight .s{color:#a3eea0}.highlight .na{color:#eddc96}.highlight .nb{color:#fdce68}.highlight .nc{color:#fdce68}.highlight .no{color:#fdce68}.highlight .nd{color:#fdce68}.highlight .ni{color:#fdce68}.highlight .ne{color:#fdce68}.highlight .nf{color:#dee2f7}.highlight .nl{color:#fdce68}.highlight .nn{color:#dee2f7}.highlight .nx{color:#dee2f7}.highlight .py{color:#fdce68}.highlight .nt{color:#f9867b}.highlight .nv{color:#fdce68}.highlight .ow{font-weight:700}.highlight .w{color:#f8f8f2}.highlight .mf{color:#eddc96}.highlight .mh{color:#eddc96}.highlight .mi{color:#eddc96}.highlight .mo{color:#eddc96}.highlight .sb{color:#a3eea0}.highlight .sc{color:#a3eea0}.highlight .sd{color:#a3eea0}.highlight .s2{color:#a3eea0}.highlight .se{color:#a3eea0}.highlight .sh{color:#a3eea0}.highlight .si{color:#a3eea0}.highlight .sx{color:#a3eea0}.highlight .sr{color:#7be2f9}.highlight .s1{color:#a3eea0}.highlight .ss{color:#7be2f9}.highlight .bp{color:#fdce68}.highlight .vc{color:#fdce68}.highlight .vg{color:#fdce68}.highlight .vi{color:#f9867b}.highlight .il{color:#eddc96}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e} -------------------------------------------------------------------------------- /syntax-variables.less: -------------------------------------------------------------------------------- 1 | @import "colors.less"; 2 | 3 | // Official Syntax Variables ----------------------------------- 4 | 5 | // General colors 6 | @syntax-text-color: @syntax-fg; 7 | @syntax-cursor-color: @syntax-accent; 8 | @syntax-selection-color: lighten(@syntax-background-color, 10%); 9 | @syntax-selection-flash-color: @syntax-accent; 10 | @syntax-background-color: @syntax-bg; 11 | 12 | // Guide colors 13 | @syntax-wrap-guide-color: @syntax-guide; 14 | @syntax-indent-guide-color: @syntax-guide; 15 | @syntax-invisible-character-color: @syntax-guide; 16 | 17 | // For find and replace markers 18 | @syntax-result-marker-color: fade(@syntax-accent, 24%); 19 | @syntax-result-marker-color-selected: @syntax-accent; 20 | 21 | // Gutter colors 22 | @syntax-gutter-text-color: @syntax-gutter; 23 | @syntax-gutter-text-color-selected: @syntax-fg; 24 | @syntax-gutter-background-color: @syntax-bg; // unused 25 | @syntax-gutter-background-color-selected: lighten(@syntax-bg, 2%); 26 | 27 | // Git colors - For git diff info. i.e. in the gutter 28 | @syntax-color-renamed: hsl(208, 100%, 60%); 29 | @syntax-color-added: hsl(150, 60%, 54%); 30 | @syntax-color-modified: hsl(40, 60%, 70%); 31 | @syntax-color-removed: hsl(0, 70%, 60%); 32 | 33 | // For language entity colors 34 | @syntax-color-variable: @hue-5; 35 | @syntax-color-constant: @hue-6; 36 | @syntax-color-property: @syntax-fg; 37 | @syntax-color-value: @syntax-fg; 38 | @syntax-color-function: @hue-2; 39 | @syntax-color-method: @hue-2; 40 | @syntax-color-class: @hue-6-2; 41 | @syntax-color-keyword: @hue-3; 42 | @syntax-color-tag: @hue-5; 43 | @syntax-color-attribute: @hue-6; 44 | @syntax-color-import: @hue-3; 45 | @syntax-color-snippet: @hue-4; 46 | 47 | 48 | // Custom Syntax Variables ----------------------------------- 49 | // Don't use in packages 50 | 51 | @syntax-cursor-line: hsla(@syntax-hue, 100%, 80%, .04); // needs to be semi-transparent to show search results 52 | 53 | @syntax-deprecated-fg: darken(@syntax-color-modified, 50%); 54 | @syntax-deprecated-bg: @syntax-color-modified; 55 | @syntax-illegal-fg: white; 56 | @syntax-illegal-bg: @syntax-color-removed; -------------------------------------------------------------------------------- /syntax.less: -------------------------------------------------------------------------------- 1 | /* 2 | LESS for Pygments 3 | */ 4 | 5 | @import "syntax-variables.less"; 6 | 7 | pre.highlight, 8 | .highlight { 9 | background: @syntax-bg; 10 | color: @mono-1; 11 | } 12 | .highlight { 13 | pre { background: @syntax-bg; } 14 | .hll { background: @syntax-bg; } 15 | .c { color: @mono-3; font-style: italic; } /* Comment */ 16 | .err { color: @syntax-illegal-fg; background-color: @syntax-illegal-bg; } /* Error */ 17 | .k { color: @hue-3; } /* Keyword */ 18 | .l { color: @hue-4; } /* Literal */ 19 | .n { color: @mono-1; } /* Name */ 20 | .o { color: @mono-1; } /* Operator */ 21 | .p { color: @mono-1; } /* Punctuation */ 22 | .cm { color: @mono-3; font-style: italic; } /* Comment.Multiline */ 23 | .cp { color: @mono-3; font-style: italic; } /* Comment.Preproc */ 24 | .c1 { color: @mono-3; font-style: italic; } /* Comment.Single */ 25 | .cs { color: @mono-3; font-style: italic; } /* Comment.Special */ 26 | .ge { font-style: italic } /* Generic.Emph */ 27 | .gs { font-weight: bold } /* Generic.Strong */ 28 | .kc { color: @hue-3; } /* Keyword.Constant */ 29 | .kd { color: @hue-3; } /* Keyword.Declaration */ 30 | .kn { color: @hue-3; } /* Keyword.Namespace */ 31 | .kp { color: @hue-3; } /* Keyword.Pseudo */ 32 | .kr { color: @hue-3; } /* Keyword.Reserved */ 33 | .kt { color: @hue-3; } /* Keyword.Type */ 34 | .ld { color: @hue-4; } /* Literal.Date */ 35 | .m { color: @hue-6; } /* Literal.Number */ 36 | .s { color: @hue-4; } /* Literal.String */ 37 | .na { color: @hue-6; } /* Name.Attribute */ 38 | .nb { color: @hue-6-2; } /* Name.Builtin */ 39 | .nc { color: @hue-6-2; } /* Name.Class */ 40 | .no { color: @hue-6-2; } /* Name.Constant */ 41 | .nd { color: @hue-6-2; } /* Name.Decorator */ 42 | .ni { color: @hue-6-2; } /* Name.Entity */ 43 | .ne { color: @hue-6-2; } /* Name.Exception */ 44 | .nf { color: @mono-1; } /* Name.Function */ 45 | .nl { color: @hue-6-2; } /* Name.Label */ 46 | .nn { color: @mono-1; } /* Name.Namespace */ 47 | .nx { color: @mono-1; } /* Name.Other */ 48 | .py { color: @hue-6-2; } /* Name.Property */ 49 | .nt { color: @hue-5; } /* Name.Tag */ 50 | .nv { color: @hue-6-2; } /* Name.Variable */ 51 | .ow { font-weight: bold; } /* Operator.Word */ 52 | .w { color: #f8f8f2 } /* Text.Whitespace */ 53 | .mf { color: @hue-6; } /* Literal.Number.Float */ 54 | .mh { color: @hue-6; } /* Literal.Number.Hex */ 55 | .mi { color: @hue-6; } /* Literal.Number.Integer */ 56 | .mo { color: @hue-6; } /* Literal.Number.Oct */ 57 | .sb { color: @hue-4; } /* Literal.String.Backtick */ 58 | .sc { color: @hue-4; } /* Literal.String.Char */ 59 | .sd { color: @hue-4; } /* Literal.String.Doc */ 60 | .s2 { color: @hue-4; } /* Literal.String.Double */ 61 | .se { color: @hue-4; } /* Literal.String.Escape */ 62 | .sh { color: @hue-4; } /* Literal.String.Heredoc */ 63 | .si { color: @hue-4; } /* Literal.String.Interpol */ 64 | .sx { color: @hue-4; } /* Literal.String.Other */ 65 | .sr { color: @hue-1; } /* Literal.String.Regex */ 66 | .s1 { color: @hue-4; } /* Literal.String.Single */ 67 | .ss { color: @hue-1; } /* Literal.String.Symbol */ 68 | .bp { color: @hue-6-2; } /* Name.Builtin.Pseudo */ 69 | .vc { color: @hue-6-2; } /* Name.Variable.Class */ 70 | .vg { color: @hue-6-2; } /* Name.Variable.Global */ 71 | .vi { color: @hue-5; } /* Name.Variable.Instance */ 72 | .il { color: @hue-6; } /* Literal.Number.Integer.Long */ 73 | 74 | .gh { } /* Generic Heading & Diff Header */ 75 | .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ 76 | .gd { color: @syntax-color-removed; } /* Generic.Deleted & Diff Deleted */ 77 | .gi { color: @syntax-color-added; } /* Generic.Inserted & Diff Inserted */ 78 | 79 | ::selection { background-color: @syntax-selection-color; } 80 | 81 | .language-json { 82 | .w + .s2 { color: @hue-5; } 83 | .kc { color: @hue-1; } 84 | } 85 | 86 | .language-python { 87 | // python related modifications 88 | } 89 | 90 | .language-csharp { 91 | // csharp related modifications 92 | } 93 | } 94 | --------------------------------------------------------------------------------