0.0.5 • Published 3 years ago

@shipless/highlight v0.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

Shipless Highlight

Shipless Highlight is a Renders highlighted Prism output to React

npm (scoped) npm NPM npm bundle size

Installation

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

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

Usage

import @shipless/highlight package suck as the following:

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:

@import url("@shipless/highlight/dist/style.css");

Demo

Example

Showcase

Propsdescriptiondefaultrequired
langlanguange that your codetrue
codeInitial code to be displayedtrue

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