diff --git a/README.md b/README.md index fb8ea29..5136c4c 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,28 @@ Based on the Nord color pa --- +## Getting started + +### Installation + +If your're using Git you can clone the repository to install the latest version: + +```sh +git clone https://github.com/arcticicestudio/nord-highlightjs +``` + +Otherwise download [the latest stable version][nord-latest-zip] or [`develop` branch][nord-develop-zip] as ZIP archive. + +### Usage + +Make sure to read the official documentation on [how to use highlight.js][hljs-docs-usage]. + +Copy the [`nord.css`][nord-dist-css] file to your desired directory and include the theme as stylesheet: + +```html + +``` + ### Contribution Please report issues/bugs, feature requests and suggestions for improvements to the [issue tracker](https://github.com/arcticicestudio/nord-highlightjs/issues). @@ -24,4 +46,4 @@ Please report issues/bugs, feature requests and suggestions for improvements to [hljs-docs-usage]: https://highlightjs.org/usage [nord-develop-zip]: https://github.com/arcticicestudio/nord-highlightjs/archive/develop.zip [nord-dist-css]: https://github.com/arcticicestudio/nord-highlightjs/blob/develop/dist/nord.css -[nord-latest-zip]: https://github.com/arcticicestudio/nord-highlightjs/archive/v0.o.0.zip +[nord-latest-zip]: https://github.com/arcticicestudio/nord-highlightjs/archive/v0.0.0.zip diff --git a/src/modules/_base.scss b/src/modules/_base.scss new file mode 100644 index 0000000..cca9668 --- /dev/null +++ b/src/modules/_base.scss @@ -0,0 +1,11 @@ +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: $nord0; +} + +.hljs, +.hljs-subst { + color: $nord4; +} diff --git a/src/modules/_css.scss b/src/modules/_css.scss new file mode 100644 index 0000000..558eedb --- /dev/null +++ b/src/modules/_css.scss @@ -0,0 +1,20 @@ +.hljs-selector-tag { + color: $nord9; +} + +.hljs-selector-id { + color: $nord7; + font-weight: bold; +} + +.hljs-selector-class { + color: $nord7; +} + +.hljs-selector-attr { + color: $nord7; +} + +.hljs-selector-pseudo { + color: $nord8; +} diff --git a/src/modules/_diff.scss b/src/modules/_diff.scss new file mode 100644 index 0000000..6a4e321 --- /dev/null +++ b/src/modules/_diff.scss @@ -0,0 +1,7 @@ +.hljs-addition { + background-color: transparentize($nord14, 0.5); +} + +.hljs-deletion { + background-color: transparentize($nord11, 0.5); +} diff --git a/src/modules/_general.scss b/src/modules/_general.scss new file mode 100644 index 0000000..6584e06 --- /dev/null +++ b/src/modules/_general.scss @@ -0,0 +1,42 @@ +.hljs-built_in, +.hljs-type { + color: $nord7; +} + +.hljs-class { + color: $nord7; +} + +.hljs-function { + color: $nord8; + + > .hljs-title { + color: $nord8; + } +} + +.hljs-keyword, +.hljs-literal, +.hljs-symbol { + color: $nord9; +} + +.hljs-number { + color: $nord15; +} + +.hljs-regexp { + color: $nord13; +} + +.hljs-string { + color: $nord14; +} + +.hljs-title { + color: $nord7; +} + +.hljs-params { + color: $nord4; +} diff --git a/src/modules/_markup.scss b/src/modules/_markup.scss new file mode 100644 index 0000000..efae4c4 --- /dev/null +++ b/src/modules/_markup.scss @@ -0,0 +1,29 @@ +.hljs-bullet { + color: $nord9; +} + +.hljs-code { + color: $nord7; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-formula { + color: $nord7; +} + +.hljs-strong { + font-weight: bold; +} + +.hljs-link { + &:hover { + text-decoration: underline; + } +} + +.hljs-quote { + color: $nord3; +} diff --git a/src/modules/_meta.scss b/src/modules/_meta.scss new file mode 100644 index 0000000..24663ce --- /dev/null +++ b/src/modules/_meta.scss @@ -0,0 +1,16 @@ +.hljs-comment { + color: $nord3; +} + +.hljs-doctag { + color: $nord7; +} + +.hljs-meta, +.hljs-meta-keyword { + color: $nord10; +} + +.hljs-meta-string { + color: $nord14; +} diff --git a/src/modules/_tags_attributes_configs.scss b/src/modules/_tags_attributes_configs.scss new file mode 100644 index 0000000..d7d857c --- /dev/null +++ b/src/modules/_tags_attributes_configs.scss @@ -0,0 +1,27 @@ +.hljs-attr { + color: $nord7; +} + +.hljs-attribute { + color: $nord4; +} + +.hljs-builtin-name { + color: $nord9; +} + +.hljs-name { + color: $nord9; +} + +.hljs-section { + color: $nord8; +} + +.hljs-tag { + color: $nord9; +} + +.hljs-variable { + color: $nord4; +} diff --git a/src/modules/_templates.scss b/src/modules/_templates.scss new file mode 100644 index 0000000..a58b8f5 --- /dev/null +++ b/src/modules/_templates.scss @@ -0,0 +1,7 @@ +.hljs-template-variable { + color: $nord4; +} + +.hljs-template-tag { + color: $nord10; +} diff --git a/src/nord.scss b/src/nord.scss new file mode 100644 index 0000000..58cb2d1 --- /dev/null +++ b/src/nord.scss @@ -0,0 +1,29 @@ +/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +title Nord highlight.js + +project nord-highlightjs + +version + +repository https://github.com/arcticicestudio/nord-highlightjs + +author Arctic Ice Studio + +email development@arcticicestudio.com + +copyright Copyright (C) 2017 + +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + +[References] +Nord + https://github.com/arcticicestudio/nord +highlight.js + http://highlightjs.readthedocs.io/en/latest/style-guide.html + http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html +*/ + +@import "../node_modules/nord/src/sass/nord"; + +@import "modules/base"; +@import "modules/css"; +@import "modules/diff"; +@import "modules/general"; +@import "modules/markup"; +@import "modules/meta"; +@import "modules/_tags_attributes_configs"; +@import "modules/templates";