markdown-it-highlight-lines

    

Install

``bash
yarn add markdown-it-highlight-lines
`

Usage

`js
const MarkdownIt = require('markdown-it')
const highlightLines = require('markdown-it-highlight-lines')

const md = new MarkdownIt()
md.use(highlightLines)

md.render(markdownString)
`

For example, highlight line 1, 2, and line 4 to 5:

``markdown
`js {1,2,4-5}
function foo() {
return bar()
.then(res => {
return res.doSomething()
})
}
`
``

_Note that the spaces between language name and opening curly bracket are optional._

Each highlighted line will be wrapped in , you can apply some custom styles to this element, recommended:

`css
pre, pre[class*="language-"] {
padding: 1.575rem;
white-space: pre-wrap;
word-break: break-word;
margin: 30px 0;
color: white;
overflow: auto;
}

.highlighted-line {
background-color: #14161a;
display: block;
margin: 0 -1.575rem;
padding: 0 1.575rem;
}
`

You can tweak it a bit to suit your own needs.

A real-world example is reactjs.org, this is how it looks like:

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature`
5. Submit a pull request :D

Author

markdown-it-highlight-lines © EGOIST, Released under the MIT License.

Authored and maintained by EGOIST with help from contributors (list).

> github.com/egoist · GitHub @EGOIST · Twitter @_egoistlily