# highlight-code

> syntax highlighting library using javascript styles. README is WIP.

Latest version **1.0.0** (published 2016-10-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install highlight-code
pnpm add highlight-code
yarn add highlight-code
bun add highlight-code
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2016-10-23 |
| First published | 2016-10-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | conorhastings |

## Links

- npm: https://www.npmjs.com/package/highlight-code
- npm.io page: https://npm.io/package/highlight-code

## Dependencies (2)

- [lowlight](https://npm.io/package/lowlight.md) ^1.4.0
- [highlight.js-js-styles](https://npm.io/package/highlight.js-js-styles.md) ^1.0.0

## Recent versions

- 1.0.0 (latest) — 2016-10-23
- 0.0.1 — 2016-10-23

## README

## Code Highlight

syntax highlighting library using javascript styles. README is WIP.

### Install

`npm install highlight-code --save`

### Javascript Styles!
One of the biggest pain points for me trying to find a syntax highlighter for my own projects was the need to put a stylesheet tag on my page. I wanted to provide out of the box code styling with my modules without requiring awkward inclusion of another libs stylesheets. The styles in this module are all javascript based, and all styles supported by `highlight.js` have been ported! 


### Use

Code Highlight takes a single object argument that looks at the following properties:

* `language` - the language to highlight code in.
* `style` - style object required from <a href="https://github.com/conorhastings/highlight.js-js-styles">highlight.js-js-styles</a>. You can see available styles <a href="https://github.com/conorhastings/highlight.js-js-styles/blob/master/AVAILABLE_STYLES.MD">here</a>. `import { style } from 'highlight.js-js-styles'` . Will use default if style is not included.
* `codeString` - the code string to highlight.
* `customStyle` - properties that will be combined with the top level style on the pre tag, styles here will overwrite earlier styles. 
* `codeTagProps` - properties that will be added to the `<code`> tag that is the direct parent of the highlighted code elements. Useful for styling/assigning classNames.

additional properties will be assigned to the pre tag with `setAttribute`

```js
import SyntaxHighlighter from 'code-higlight';
import { docco } from 'highlight.js-js-styles

const codeString = `const woah = fun => fun + 1;
const dude = woah(2) + 3;
function thisIsAFunction() {
  return [1,2,3].map(n => n + 1).filter(n !== 3);
}
console.log('making up fake code is really hard');

function itIs() {
  return 'no seriously really it is';
}`;

SyntaxHighlighter({
  codeString,
  language: 'javascript',
  style: docco,
  querySelector: '#app'
});
```

---
_Source: https://npm.io/package/highlight-code · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._