https://github.com/alirezahematidev/jsx-marker

JSX Marker is a versatile React component for styling text based on custom patterns and matchers.
https://github.com/alirezahematidev/jsx-marker

highlighting jsx react styling

Last synced: about 2 months ago
JSON representation

JSX Marker is a versatile React component for styling text based on custom patterns and matchers.

• Host: GitHub
• URL: https://github.com/alirezahematidev/jsx-marker
• Owner: alirezahematidev
• License: mit
• Created: 2024-04-05T16:18:23.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-07-18T14:04:14.000Z (6 months ago)
• Last Synced: 2024-10-28T15:29:36.744Z (3 months ago)
• Topics: highlighting, jsx, react, styling
• Language: TypeScript
• Homepage:
• Size: 95.7 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![NPM](https://nodei.co/npm/jsx-marker.png)](https://nodei.co/npm/jsx-marker/)

# Getting Started

JSX Marker is a versatile React component for styling text based on custom patterns and matchers. With JSX Marker, you can easily apply styling to specific portion of the text within your React applications.

[![Version][version-badge]][package]

[![NPM Downloads][dw-badge]][package]

[dw-badge]: https://img.shields.io/npm/dw/jsx-marker

[version-badge]: https://img.shields.io/npm/v/jsx-marker

[package]: https://www.npmjs.com/package/jsx-marker

## Installation

To install jsx-marker, you will need to have [npm](https://npmjs.com), [yarn](https://yarnpkg.com) or [pnpm](https://pnpm.io) installed on your system. Once you have one of these package managers set up, you can install jsx-marker by running the following command:

```bash

  npm install --save jsx-marker

```

```bash

  yarn add jsx-marker

```

```bash

  pnpm add jsx-marker

```

This will install the latest version of jsx-marker and add it as a dependency to your project.

## Usage/Examples

```jsx

import { Marker } from "jsx-marker";

function App() {

  return (

    <>

      {/* Matches 'd' character */}

      }} />

      {/* Matches portions of the text which starts with 'd' */}

      }} />

      {/* Matches portions of the text which ends with 'd' */}

      }} />

      {/* Matches portions of the text between 'b' and 'f'. */}

       }} />

      {/* Matches portions of the text between 'b' and 'f' including 'b' and 'f' */}

       }} />

      {/* Define custom matchers and link them into matchers object using @ */}

       }} />

      {/* Matches all of the text */}

      }} />

      {/* Also matches all of the text if the text contains the  */}

      *": }} />

    >

  )

}

```

## Authors

- [@alirezahematidev](https://github.com/alirezahematidev)

## License

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