Add customizable parsing to wrap text in span elements

Downloads in past


522.1.25 years ago5 years agoMinified + gzip package size for remark-terms in KB


This remark plugin adds parsing to wrap markdown text in <span> elements with a unique class.

Default Syntax

By default, special terms are marked with single or double curly braces: {} or {{}}. ```markdown {term one} {{term two}} ``` results in: ```html term one term two ``` Terms will be parsed in most places, including headers: # Header with a {term} renders as <h1>Header with a <span class="term-1">term</span></h1> Nested terms will also be parsed: {I am a special phrase with {several} nested {{terms}} renders as <p><span class="term-1">I am a special phrase with <span class="term-1">several</span> nested <span class="term-2">terms</span></span></p> Special term syntax can be escaped in markdown with a backslash (\). For example: {this special term needs to \{preserve\} curly braces} renders as <p><span class="term-1">this special term needs to {preserve} curly braces</span></p>


```bash npm install remark-terms ```


Dependencies: ```javascript const unified = require('unified') const remarkParse = require('remark-parse') const remarkTerms = require('remark-terms') const stringify = require('rehype-stringify') const remark2rehype = require('remark-rehype') ``` Usage: ```javascript unified() .use(remarkParse) .use(remarkTerms) .use(remark2rehype) .use(stringify) ```


Specifying custom configurations will override the default behavior. To preserve the default syntax, be sure to include the configurations in the example below. Options can be supplied to remark-terms as an [] of Configurations: ```javascript var processor = unified()
.use(terms, [{
name: 'term_1',
open: '{',
close: '}',
element: 'span',
class: 'term-1'
}, {
name: 'term_2',
open: '{{',
close: '}}',
element: 'span',
class: 'term-2'

A Configuration

Configures a particular special term.


Optional, default is term_1 and term_2 or term_{index of config in the reversed configurations array} A string used as the remark tokenizer name and the name of the MDAST node.


Required A string that marks the start of a term.


Required A string that marks the end of a special term.


Optional, default is span The name of an html element as a string. This can be anything, but a flow content will probably work the best.


Optional, default is none The optional name of a class to place on the element.


MITlicense © Dan Behlingsnevenall