markdown-it-highlight-lines

1.0.2 • Public • Published

markdown-it-highlight-lines

NPM version NPM downloads CircleCI donate chat

Install

yarn add markdown-it-highlight-lines

Usage

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:

```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 <span class="highlighted-line"></span>, you can apply some custom styles to this element, recommended:

prepre[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:

reactjs.org

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

Readme

Keywords

none

Package Sidebar

Install

npm i markdown-it-highlight-lines

Weekly Downloads

46

Version

1.0.2

License

MIT

Unpacked Size

6.59 kB

Total Files

4

Last publish

Collaborators

  • rem