# @shipless/highlight

Latest version **0.0.5** (published 2021-08-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @shipless/highlight
pnpm add @shipless/highlight
yarn add @shipless/highlight
bun add @shipless/highlight
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2021-08-14 |
| First published | 2021-07-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 53.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | muhrusdi |

## Links

- npm: https://www.npmjs.com/package/@shipless/highlight
- Repository: https://github.com/shipless/highlight
- Homepage: https://github.com/shipless/highlight#readme
- Issues: https://github.com/shipless/highlight/issues
- npm.io page: https://npm.io/package/@shipless/highlight

## Dependencies (2)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.13.10
- [prism-react-renderer](https://npm.io/package/prism-react-renderer.md) ^1.2.1

## Recent versions

- 0.0.5 (latest) — 2021-08-14
- 0.0.4 — 2021-07-27
- 0.0.3 — 2021-07-24
- 0.0.2 — 2021-07-24

## README

<p align="center">
  <a href="https://github.com/shipless/highlight">
    <img alt="shipless" src="https://res.cloudinary.com/muhrusdi/image/upload/v1627215311/shipless-high.png" width="100%" />
  </a>
</p>

# Shipless Highlight

Shipless Highlight is a Renders highlighted Prism output to React 

[![npm (scoped)](https://img.shields.io/npm/v/@shipless/highlight?style=for-the-badge)](https://www.npmjs.com/package/@shipless/highlight)
[![npm](https://img.shields.io/npm/dt/@shipless/highlight?label=Download&style=for-the-badge)](https://www.npmjs.com/package/@shipless/highlight)
![NPM](https://img.shields.io/npm/l/@shipless/highlight?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/@shipless/highlight?style=for-the-badge)
### Installation

Use the package manager `yarn` or `npm` to install this package.

```bash
yarn add @shipless/highlight
# or
npm install @shipless/highlight
```

### Usage

`import` @shipless/highlight package suck as the following:

```js
import Highlight from "@shipless/highlight"

const codeSnippet = `module.exports = {
  ...
  plugins: [
    ...
    {
      resolve: "gatsby-source-filesystem", // highlight-line
      options: {
        // highlight-remove-start
        name: "cheatsheets",
        path: "\${__dirname}/src/data/cheatsheets",
        // highlight-remove-end
        // highlight-add-start
        name: "blogs",
        path: "\${__dirname}/src/data/blogs",
        // highlight-add-end
      },
    },
    ...
  ],
}`

<Highlight code={codeSnippet} lang="js"/>
```

 Then you must import style on your css file:
 ```css
 @import url("@shipless/highlight/dist/style.css");
 ```

 ### Demo

 [Example](https://shipless-highlight.netlify.app/)

 ### Showcase

 - [Membuat blog menggunakan Gatsbyjs](https://muhrusdi.github.io/blog/membuat-personal-blog-menggunakan-gatsbyjs) - muhrusdi

 ### API

|      Props       |                          description                       |   default                                | required |
| :--------------: | :--------------------------------------------------------: | :--------------------------------------: | :------: |
|        lang        |             languange that your code             |                                          |   true  |
|  code            |            Initial code to be displayed                    |                                          |   true   |

### Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

### License
[MIT](https://choosealicense.com/licenses/mit/)

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