nord-highlightjs

Version:

An arctic, north-bluish clean and elegant highlight.js theme

www.nordtheme.com/ports/highlightjs

arcticicestudio/nord-highlightjs

103 lines (69 loc) • 10.9 kB

Markdown

<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> <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> <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> <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> <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> <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> An arctic, north-bluish clean and elegant <a href="https://highlightjs.org" target="_blank">highlight.js</a> theme. Designed for a fluent and clear workflow based on the <a href="https://www.nordtheme.com" target="_blank">Nord</a> color palette. <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> ## 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  <link href="https://unpkg.com/nord-highlightjs@0.2.0/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  <link href="node_modules/nord-highlightjs/dist/nord.css" rel="stylesheet" type="text/css" />  <link href="https://unpkg.com/nord-highlightjs@0.2.0/dist/nord.css" rel="stylesheet" type="text/css" /> ``` ## Features Beautiful code to keep focused. Support for a wide range of <a href="https://en.wikipedia.org/wiki/List_of_programming_languages_by_type" target="_blank">language types</a>. <img src="https://raw.githubusercontent.com/arcticicestudio/nord-docs/develop/assets/images/ports/highlightjs/go-comments.png"/> 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. <img src="https://raw.githubusercontent.com/arcticicestudio/nord-docs/develop/assets/images/ports/highlightjs/javascript-react-hook.png"/> <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>. <img src="https://raw.githubusercontent.com/arcticicestudio/nord-docs/develop/assets/images/ports/highlightjs/javascript-react-jsx.png"/> ## 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]. <img src="https://raw.githubusercontent.com/arcticicestudio/nord-docs/develop/assets/images/nord/repository-footer-separator.svg?sanitize=true" /> Copyright © 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> <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> [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