markdown-it-highlight-lines

2019-06-13

Highlight specific lines in code blocks.

markdown-it-highlight-lines

NPM versionNPM downloadsCircleCIdonatechat

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:

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:

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 MITLicense.
Authored and maintained by EGOIST with help from contributors (list).

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

Repository

egoist/markdown-it-highlight-lines


上一篇:labrador-cli-patch
下一篇:JavaScript之call()理解
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部