https://github.com/jaebradley/textstyler
Style substrings
https://github.com/jaebradley/textstyler
nodejs npm textstyle
Last synced: about 2 months ago
JSON representation
Style substrings
- Host: GitHub
- URL: https://github.com/jaebradley/textstyler
- Owner: jaebradley
- License: mit
- Created: 2017-11-30T07:40:24.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-06-11T23:43:52.000Z (about 6 years ago)
- Last Synced: 2026-04-02T21:05:52.490Z (3 months ago)
- Topics: nodejs, npm, textstyle
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/textstyler
- Size: 129 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# textstyler
[](https://travis-ci.org/jaebradley/textstyler)
[](https://www.npmjs.com/package/textstyler)
[](https://www.npmjs.com/package/textstyler)
[](https://github.com/jaebradley/textstyler/releases)
## Introduction
Apply text styling to substrings (represented by character index ranges)
I mostly built this library to handle text match results returned by [the GitHub Search API](https://developer.github.com/v3/search/)
```json
{
"fragment": " without crashing', () => {\n const div = document.createElement('div');\n ReactDOM.render(, div);\n});\n",
"matches": [
{
"text": "React",
"indices": [
75,
80
]
}
]
}
```
so that I can format the matching fragment like
## Install
`npm install textstyler --save`
## API
### Text Style Options
Pretty much a 1-to-1 mapping with the [`colors` package](https://github.com/Marak/colors.js)
__TextColors__:
* BLACK
* RED
* GREEN
* YELLOW
* BLUE
* MAGENTA
* CYAN
* WHITE
* GRAY
* GREY
__BackgroundColors__:
* BLACK
* RED
* GREEN
* YELLOW
* BLUE
* MAGENTA
* CYAN
* WHITE
__TextFormat__:
* RESET
* BOLD
* DIM
* ITALIC
* UNDERLINE
* INVERSE
* HIDDEN
* STRIKETHROUGH
### Style
* `TextStyler.style(text, styledSubstrings)`
* `text` is a string to apply formatting to
* `styledSubstrings` are an array of `StyledRange` objects
* A `StyledRange` takes
* A `Range`
* Takes a `start` and an `end` parameter
* These are numbers that represent the __inclusive__ character indices to apply a particular `TextStyle` to
* A `TextStyle`
* Takes a `color`, `backgroundColor`, and `format` parameter
* `color` represents the text color
* `backgroundColor` represents the text background color
* `format` represents some text format (like __bold__ text)
* `StyledRange`s are applied in order - text styles are merged based on the last text style
#### Example
```javascript
import { Range, TextStyler, StyledRange, TextStyle, TextColor, TextFormat, BackgroundColor } from 'textstyler';
const value = 'foobar';
const range = new Range(1, 3);
const anotherRange = new Range(2, 4);
const style = new TextStyle(TextColor.CYAN, BackgroundColor.WHITE, TextFormat.ITALIC);
const anotherStyle = new TextStyle(TextColor.RED, BackgroundColor.BLUE, TextFormat.BOLD);
const styledRange = new StyledRange(range, style);
const anotherStyledRange = new StyledRange(anotherRange, anotherStyle);
const styledText = TextStyler.style(value, [ styledRange, anotherStyledRange ]);
```
The above example should output
