nitin42 / React Marker
🖍️ Highlight keywords and add colors to your text.
Stars: ✭ 45
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Marker
Rxmarkdown
📠Markdown for Android, supports TextView && EditText (Live Preview), supports code high light.
Stars: ✭ 714 (+1486.67%)
Mutual labels: markdown, highlight
Markdown Edit
online markdown editor/viewer
Stars: ✭ 188 (+317.78%)
Mutual labels: markdown, highlight
Remark Boilerplate
A boilerplate to create presentations using remark, Gulp, Stylus and more.
Stars: ✭ 41 (-8.89%)
Mutual labels: markdown, highlight
Markdown Latex
A markdown parser for converting markdown to LaTeX written in PHP.
Stars: ✭ 40 (-11.11%)
Mutual labels: markdown
Markdownview
MarkdownView is an Android webview with the capablity of loading Markdown text or file and display it as HTML, it uses MarkdownJ and extends Android webview.
Stars: ✭ 993 (+2106.67%)
Mutual labels: markdown
Blink Mind React
A mind map library for react that based on immutable.js.
Stars: ✭ 38 (-15.56%)
Mutual labels: markdown
Gatsby Embedder Excalidraw
🤴 Custom transformer to embed Excalidraw diagrams
Stars: ✭ 45 (+0%)
Mutual labels: markdown
Markdown It Incremental Dom
markdown-it renderer plugin by using Incremental DOM.
Stars: ✭ 44 (-2.22%)
Mutual labels: markdown
Mkdocs With Pdf
Generate a single PDF file from MkDocs repository.
Stars: ✭ 39 (-13.33%)
Mutual labels: markdown
Marked
Confluence macro plugin which renders remote Markdown.
Stars: ✭ 42 (-6.67%)
Mutual labels: markdown
Recipes
A super minimal recipe website built on Markdown
Stars: ✭ 38 (-15.56%)
Mutual labels: markdown
Metalsmith
An extremely simple, pluggable static site generator.
Stars: ✭ 7,692 (+16993.33%)
Mutual labels: markdown
react-marker
🖍️ Highlight keywords and add colors to your text
Install
npm install react-marker
This package also depends on React, so make sure you've already installed it.
Demo
Usage
Highlighting keywords
To highlight keywords automatically in your text, use Keywords
component. Here is an example -
import React from 'react'
import ReactDOM from 'react-dom'
import {Keywords} from 'react-marker'
const TEXT = `
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
`
class App extends React.Component {
render() {
return (
<Keywords
text={TEXT}
maxKeywords={8}
color="mistyrose"
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('container'))
This then renders to -
Highlight the text with different colors
This was inspired by Titus Wormer's work
import React from 'react'
import ReactDOM from 'react-dom'
import {Highlight} from 'react-marker'
const TEXT = `
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
`
class App extends React.Component {
render() {
return (
<Highlight text={TEXT} />
)
}
}
ReactDOM.render(<App />, document.getElementById('container'))
This renders to -
Another example -
API
react-marker
exposes only two components, Highlight
and Keywords
.
Components
Highlight keywords in your text.
Props | Default value | Description |
---|---|---|
text |
"" | Text paragraph |
maxKeywords |
5 | Max. no of keywords to highlight |
color |
hsl(60, 91%, 83%) |
Color used to highlight the keywords |
Highlight your text with different hue range.
Props | Default value | Description |
---|---|---|
text |
"" | Text paragraph |
TODO
- [ ] Gatsby plugin
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].