markdown-it-highlight-lines

2019-06-13 admin

markdown-it-highlight-lines是什么

什么是markdown-it-highlight-lines,Highlight specific lines in code blocks.

markdown-it-highlight-lines使用教程帮助文档

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:

```source-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:

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

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67204.html

文章标题:markdown-it-highlight-lines

回到顶部