Transfer and polish existing "Nord highlight.js" docs and assets

Inititially this includes the install & activation and asset
catalog color set guide.

GH-188

Author: arcticicestudio

README.md

@@ -1,11 +1,102 @@
-<p align="center"><a href="https://www.nordtheme.com"><img src="https://raw.githubusercontent.com/arcticicestudio/nord-docs/develop/assets/images/repository-hero.svg?sanitize=true"/></a></p>
+<p align="center"><a href="https://www.nordtheme.com/ports/highlightjs" target="_blank"><img src="https://raw.githubusercontent.com/arcticicestudio/nord-docs/develop/assets/images/ports/highlightjs/repository-hero.svg?sanitize=true"/></a></p>
 
-<p align="center"><a href="https://github.com/arcticicestudio/nord-docs/releases/latest"><img src="https://img.shields.io/github/release/arcticicestudio/nord-docs.svg?style=flat-square&label=Release&logo=github&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/></a> <a href="https://github.com/arcticicestudio/nord-docs/blob/develop/CHANGELOG.md"><img src="https://img.shields.io/github/release/arcticicestudio/nord-docs.svg?style=flat-square&label=Changelog&logo=github&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/></a></p>
+<p align="center"><a href="https://github.com/arcticicestudio/nord-highlightjs/releases/latest"><img src="https://img.shields.io/github/release/arcticicestudio/nord-highlightjs.svg?style=flat-square&label=Release&logo=github&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/></a> <a href="https://www.nordtheme.com/docs/ports/highlightjs"><img src="https://img.shields.io/github/release/arcticicestudio/nord-highlightjs.svg?style=flat-square&label=Docs&colorA=4c566a&colorB=88c0d0&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI%2BCiAgICA8cGF0aCBmaWxsPSIjZDhkZWU5IiBkPSJNMTMuNzQ2IDIuODEzYS42Ny42NyAwIDAgMC0uNTU5LS4xMzNMOCAzLjg0OGwtNS4xODgtMS4xOGEuNjY5LjY2OSAwIDAgMC0uNTcuMTMzLjY3Ny42NzcgMCAwIDAtLjI0Mi41MzF2OC4xMzNjLS4wMDguMzIuMjEuNTk4LjUyLjY2OGw1LjMzMiAxLjE5OWguMjk2bDUuMzMyLTEuMmEuNjY4LjY2OCAwIDAgMCAuNTItLjY2N1YzLjMzMmEuNjU5LjY1OSAwIDAgMC0uMjU0LS41MnpNMy4zMzIgNC4xNjhsNCAuODk4djYuNzY2bC00LS44OTh6bTkuMzM2IDYuNzY2bC00IC44OThWNS4wNjZsNC0uODk4em0wIDAiLz4KPC9zdmc%2BCg%3D%3D"/></a> <a href="https://github.com/arcticicestudio/nord-highlightjs/blob/develop/CHANGELOG.md#050"><img src="https://img.shields.io/github/release/arcticicestudio/nord-highlightjs.svg?style=flat-square&label=Changelog&logo=github&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/></a></p>
 
-<p align="center"><a href="https://nordtheme.com"><img src="https://img.shields.io/badge/Deployment-production-88c0d0.svg?style=flat-square&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=netlify"/></a> <a href="https://www.nordtheme.com"><img src="https://img.shields.io/badge/Deployment-development-88c0d0.svg?style=flat-square&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=netlify"/></a></p>
+<p align="center"><a href="https://www.npmjs.com/package/nord-highlightjs" target="_blank"><img src="https://img.shields.io/npm/v/nord-highlightjs.svg?style=flat-square&colorA=4c566a&colorB=88c0d0&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTEyIDE0SDRhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoOGEyIDIgMCAwIDEgMiAydjhhMiAyIDAgMCAxLTIgMnpNNCAzLjMzMkEuNjcuNjcgMCAwIDAgMy4zMzIgNHY4YzAgLjM2Ny4zLjY2OC42NjguNjY4aDhhLjY3LjY3IDAgMCAwIC42NjgtLjY2OFY0QS42Ny42NyAwIDAgMCAxMiAzLjMzMnptMCAwIi8+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTggNmgyLjY2OHY2LjY2OEg4em0wIDAiLz48L3N2Zz4K"/></a> <a href="https://www.npmjs.com/package/nord-highlightjs" target="_blank"><img src="https://img.shields.io/npm/dt/nord-highlightjs.svg?style=flat-square&colorA=4c566a&colorB=88c0d0&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTEyIDE0SDRhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoOGEyIDIgMCAwIDEgMiAydjhhMiAyIDAgMCAxLTIgMnpNNCAzLjMzMkEuNjcuNjcgMCAwIDAgMy4zMzIgNHY4YzAgLjM2Ny4zLjY2OC42NjguNjY4aDhhLjY3LjY3IDAgMCAwIC42NjgtLjY2OFY0QS42Ny42NyAwIDAgMCAxMiAzLjMzMnptMCAwIi8+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTggNmgyLjY2OHY2LjY2OEg4em0wIDAiLz48L3N2Zz4K"/></a></p>
 
-<p align="center"><a href="https://circleci.com/gh/arcticicestudio/nord-docs"><img src="https://img.shields.io/circleci/project/github/arcticicestudio/nord-docs/develop.svg?style=flat-square&label=Build&logo=circleci&logoColor=eceff4&colorA=4c566a"/></a> <a href="https://codecov.io/gh/arcticicestudio/nord-docs"><img src="https://img.shields.io/codecov/c/github/arcticicestudio/nord-docs/develop.svg?style=flat-square&label=Coverage&logo=codecov&logoColor=eceff4&colorA=4c566a"/></a></p>
+<p align="center"><a href="https://circleci.com/gh/arcticicestudio/nord-highlightjs" target="_blank"><img src="https://img.shields.io/circleci/project/github/arcticicestudio/nord-highlightjs/develop.svg?style=flat-square&label=Build&logo=circleci&logoColor=eceff4&colorA=4c566a"/></a></p>
 
-<p align="center"><a href="https://github.com/arcticicestudio/styleguide-javascript/releases/latest"><img src="https://img.shields.io/github/release/arcticicestudio/styleguide-javascript.svg?style=flat-square&label=JavaScript%20Style%20Guide&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=javascript"/></a> <a href="https://github.com/arcticicestudio/styleguide-markdown/releases/latest"><img src="https://img.shields.io/github/release/arcticicestudio/styleguide-markdown.svg?style=flat-square&label=Markdown%20Style%20Guide&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOSIgaGVpZ2h0PSIzOSIgdmlld0JveD0iMCAwIDM5IDM5Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNEOERFRTkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMS41IDEuNWgzNnYzNmgtMzZ6Ii8%2BPHBhdGggZmlsbD0iI0Q4REVFOSIgZD0iTTIwLjY4MyAyNS42NTVsNS44NzItMTMuNDhoLjU2Nmw1Ljg3MyAxMy40OGgtMS45OTZsLTQuMTU5LTEwLjA1Ni00LjE2MSAxMC4wNTZoLTEuOTk1em0tMi42OTYgMGwtMTMuNDgtNS44NzJ2LS41NjZsMTMuNDgtNS44NzJ2MS45OTVMNy45MzEgMTkuNWwxMC4wNTYgNC4xNnoiLz48L3N2Zz4%3D"/></a> <a href="https://github.com/arcticicestudio/styleguide-git/releases/latest"><img src="https://img.shields.io/github/release/arcticicestudio/styleguide-git.svg?style=flat-square&label=Git%20Style%20Guide&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=git"/></a></p>
+<p align="center"><a href="https://github.com/arcticicestudio/styleguide-markdown/releases/latest" target="_blank"><img src="https://img.shields.io/github/release/arcticicestudio/styleguide-markdown.svg?style=flat-square&label=Markdown%20Style%20Guide&colorA=4c566a&colorB=88c0d0&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOSIgaGVpZ2h0PSIzOSIgdmlld0JveD0iMCAwIDM5IDM5Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNEOERFRTkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMS41IDEuNWgzNnYzNmgtMzZ6Ii8%2BPHBhdGggZmlsbD0iI0Q4REVFOSIgZD0iTTIwLjY4MyAyNS42NTVsNS44NzItMTMuNDhoLjU2Nmw1Ljg3MyAxMy40OGgtMS45OTZsLTQuMTU5LTEwLjA1Ni00LjE2MSAxMC4wNTZoLTEuOTk1em0tMi42OTYgMGwtMTMuNDgtNS44NzJ2LS41NjZsMTMuNDgtNS44NzJ2MS45OTVMNy45MzEgMTkuNWwxMC4wNTYgNC4xNnoiLz48L3N2Zz4%3D"/></a> <a href="https://github.com/arcticicestudio/styleguide-git/releases/latest" target="_blank"><img src="https://img.shields.io/github/release/arcticicestudio/styleguide-git.svg?style=flat-square&label=Git%20Style%20Guide&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=git"/></a></p>
 
-<p align="center">The official <a href="https://github.com/arcticicestudio/nord" alt="Nord">Nord</a> website and documentation</p>
+<p align="center"><a href="https://highlightjs.org" target="_blank"><img src="https://img.shields.io/static/v1.svg?style=flat-square&label=highlight.js&message=9.x.x&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/></a></p>
+
+<p align="center">An arctic, north-bluish clean and elegant <a href="https://highlightjs.org" target="_blank">highlight.js</a> theme.</p>
+
+<p align="center">Designed for a fluent and clear workflow based on the <a href="https://www.nordtheme.com" target="_blank">Nord</a> color palette.</p>
+
+<p align="center"><a href="https://www.nordtheme.com/ports/highlightjs" target="_blank"><img src="https://raw.githubusercontent.com/arcticicestudio/nord-docs/develop/assets/images/ports/highlightjs/overview.png"/></a></p>
+
+## Getting started
+
+Visit the [official website][nord-home] to learn all about the [features][nord-home#intro], how to [install and use][nord-docs-home-install] the theme and more from the [official documentations][nord-docs-home].
+
+### Quick Start
+
+Since Nord highlight.js is used in web technology based projects, it's main installation method are therefore [**npm**][npm] or [**yarn**][yarn], the [Node.js][] package managers.
+
+Install and add it as production dependency from the command line:
+
+```sh
+# When using npm...
+npm install --save nord-highlightjs
+
+# ...or yarn as package manager.
+yarn add nord-highlightjs
+```
+
+To use Nord highlight.js in projects without Node.js, the CSS file can be used through CDN services like [UNPKG][]:
+
+```html
+<!-- Replace the version with any available release. -->
+<link href="https://unpkg.com/[email protected]/dist/nord.css" rel="stylesheet" type="text/css" />
+```
+
+#### Usage
+
+To use Nord highlight.js include the CSS file as stylesheet depending on the installation method:
+
+```sh
+<!-- When installed via npm/yarn for Node.js based projects -->
+<link href="node_modules/nord-highlightjs/dist/nord.css" rel="stylesheet" type="text/css" />
+<!-- When using CDN service like UNPKG -->
+<link href="https://unpkg.com/[email protected]/dist/nord.css" rel="stylesheet" type="text/css" />
+```
+
+## Features
+
+<p align="center"><strong>Beautiful code to keep focused.</strong></p>
+<p align="center">Support for a wide range of <a href="https://en.wikipedia.org/wiki/List_of_programming_languages_by_type" target="_blank">language types</a>.</p>
+<p align="center"><img src="https://raw.githubusercontent.com/arcticicestudio/nord-docs/develop/assets/images/ports/highlightjs/go-comments.png"/></p>
+
+<p align="center">JavaScript with a <a href="https://reactjs.org/docs/hooks-intro" target="_blank">React Hook</a> for <a href="https://www.react-spring.io" target="_blank">React Spring</a> animations.</p>
+<p align="center"><img src="https://raw.githubusercontent.com/arcticicestudio/nord-docs/develop/assets/images/ports/highlightjs/javascript-react-hook.png"/></p>
+
+<p align="center"><a href="https://reactjs.org" target="_blank">React</Link> component with <a href="https://reactjs.org/docs/forwarding-refs.html" target="_blank"> forwarded <code>ref</code></a>.</p>
+<p align="center"><img src="https://raw.githubusercontent.com/arcticicestudio/nord-docs/develop/assets/images/ports/highlightjs/javascript-react-jsx.png"/></p>
+
+## Contributing
+
+Nord is an open source project and we love to receive contributions from the [community][nord-comm]!
+
+There are many ways to contribute, from [writing- and improving documentation and tutorials][nord-contrib-guide-docs], [reporting bugs][nord-contrib-guide-bugs], [submitting enhancement suggestions][nord-contrib-guide-enhance] that can be added to Nord by [submitting pull requests][nord-contrib-guide-pr].
+
+Please take a moment to read Nord's full [contributing guide][nord-contrib-guide] to learn about the development process, the project's used [styleguides][nord-contrib-guide-styles], [branch organization][nord-contrib-guide-branching] and [versioning][nord-contrib-guide-versioning] model.
+
+The guide also includes information about [minimal, complete, and verifiable examples][nord-contrib-guide-mcve] and other ways to contribute to the project like [improving existing issues][nord-contrib-guide-impr-issues] and [giving feedback on issues and pull requests][nord-contrib-guide-feedback].
+
+<p align="center"><img src="https://raw.githubusercontent.com/arcticicestudio/nord-docs/develop/assets/images/nord/repository-footer-separator.svg?sanitize=true" /></p>
+
+<p align="center">Copyright &copy; 2017-present <a href="https://www.arcticicestudio.com" target="_blank">Arctic Ice Studio</a> and <a href="https://www.svengreb.de" target="_blank">Sven Greb</a></p>
+
+<p align="center"><a href="https://github.com/arcticicestudio/nord-highlightjs/blob/develop/LICENSE.md"><img src="https://img.shields.io/static/v1.svg?style=flat-square&label=License&message=MIT&logoColor=eceff4&logo=github&colorA=4c566a&colorB=88c0d0"/></a></p>
+
+[node.js]: https://nodejs.org
+[nord-comm]: https://www.nordtheme.com/community
+[nord-contrib-guide-branching]: https://github.com/arcticicestudio/nord/blob/develop/CONTRIBUTING.md#branch-organization
+[nord-contrib-guide-bugs]: https://github.com/arcticicestudio/nord/blob/develop/CONTRIBUTING.md#bug-reports
+[nord-contrib-guide-docs]: https://github.com/arcticicestudio/nord/blob/develop/CONTRIBUTING.md#documentations
+[nord-contrib-guide-enhance]: https://github.com/arcticicestudio/nord/blob/develop/CONTRIBUTING.md#enhancement-suggestions
+[nord-contrib-guide-feedback]: https://github.com/arcticicestudio/nord/blob/develop/CONTRIBUTING.md#give-feedback-on-issues-and-pull-requests
+[nord-contrib-guide-impr-issues]: https://github.com/arcticicestudio/nord/blob/develop/CONTRIBUTING.md#improve-issues
+[nord-contrib-guide-mcve]: https://github.com/arcticicestudio/nord/blob/develop/CONTRIBUTING.md#mcve
+[nord-contrib-guide-pr]: https://github.com/arcticicestudio/nord/blob/develop/CONTRIBUTING.md#pull-requests
+[nord-contrib-guide-styles]: https://github.com/arcticicestudio/nord/blob/develop/CONTRIBUTING.md#styleguides
+[nord-contrib-guide-versioning]: https://github.com/arcticicestudio/nord/blob/develop/CONTRIBUTING.md#versioning
+[nord-contrib-guide]: https://github.com/arcticicestudio/nord/blob/develop/CONTRIBUTING.md
+[nord-docs-home-install]: https://www.nordtheme.com/docs/ports/highlightjs/installation
+[nord-docs-home]: https://www.nordtheme.com/docs/ports/highlightjs
+[nord-home]: https://www.nordtheme.com/ports/highlightjs
+[nord-home#intro]: https://www.nordtheme.com/ports/highlightjs#introduction
+[npm]: https://www.npmjs.com
+[unpkg]: https://unpkg.com
+[yarn]: https://yarnpkg.com

content/docs/ports/highlightjs/installation/index.mdx

@@ -0,0 +1,76 @@
+import Link from "atoms/core/Link";
+import { Banner, Image, ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements";
+import { Code } from "atoms/core/html-elements";
+import { ReactComponent as WindowCode } from "assets/images/illustrations/window-code.svg";
+import { ROUTE_DOCS_COLOR_AND_PALETTES, ROUTE_PORTS } from "config/routes/mappings";
+
+import WIPNotice from "../../../../shared/docs/wip-notice";
+
+export const frontmatter = {
+  title: "Installation & Usage",
+  subline: "Get up and running in one line of code"
+};
+
+<ShrinkedWidth value={25}>
+
+<SpaceBox mTop={4} mBottom={4}>
+  <WindowCode />
+</SpaceBox>
+
+</ShrinkedWidth>
+
+<ShrinkedWidth value={80}>
+
+<WIPNotice />
+
+<Banner
+  title={
+    <>
+      Highlight.js prerequisites
+    </>
+  }
+>
+
+Make sure to read the official _highlight.js_ documentation lo learn [how to install and use highlight.js][hjs-usage] in order to use themes like Nord.
+
+</Banner>
+
+## Installation
+
+Since Nord highlight.js is used in web technology based projects, it's main installation method are therefore [**npm**][npm] or [**yarn**][yarn], the [Node.js][] package managers.
+
+Install and add it as production dependency from the command line:
+
+```sh
+# When using npm...
+npm install --save nord-highlightjs
+
+# ...or yarn as package manager.
+yarn add nord-highlightjs
+```
+
+To use Nord highlight.js in projects without Node.js, the CSS file can be used through CDN services like [UNPKG][]:
+
+```html
+<!-- Replace the version with any available release. -->
+<link href="https://unpkg.com/[email protected]/dist/nord.css" rel="stylesheet" type="text/css" />
+```
+
+## Usage
+
+To use Nord highlight.js include the CSS file as stylesheet depending on the installation method:
+
+```sh
+<!-- When installed via npm/yarn for Node.js based projects -->
+<link href="node_modules/nord-highlightjs/dist/nord.css" rel="stylesheet" type="text/css" />
+<!-- When using CDN service like UNPKG -->
+<link href="https://unpkg.com/[email protected]/dist/nord.css" rel="stylesheet" type="text/css" />
+```
+
+</ShrinkedWidth>
+
+[hjs-usage]: https://highlightjs.org/usage
+[node.js]: https://nodejs.org
+[npm]: https://www.npmjs.com
+[unpkg]: https://unpkg.com
+[yarn]: https://yarnpkg.com