Shipless Highlight

Shipless Highlight is a Renders highlighted Prism output to React

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

• Membuat 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