How to highlight rows in markdown code blocks?

[hakib]

Is there an easy way to highlight specific rows in a codeblock?

In Python markdown it looks like this:

    ```python hl_lines="2,3"
    print(
        'this line'
        'and this line will be highlighted'
    )
    ```

I found this discussion but it looks related to the vscode extension.

What is the best way to enable syntax highligh in markdown code blocks using the marp CLI?

[yhatt]

// marp.config.js
const { Marp } = require('@marp-team/marp-core')
const highlightLines = require('markdown-it-highlight-lines')

module.exports = {
  engine: (opts) => new Marp(opts).use(highlightLines),
}

# markdown.md

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

<style>
.highlighted-line {
  background-color: #ff0;
  display: block;
  margin: 0 -16px;
  padding: 0 16px;
}
</style>

npm i --save @marp-team/marp-core @marp-team/marp-cli markdown-it-highlight-lines
npx marp -c ./marp.config.js markdown.md

[hakib]

Hey,
Thank you for the quick response. I followed your instructions but I can't make it work: the highlighted-line class is not being added to the code block.

$ cat markdown.md 
# markdown.md

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

<style>
.highlighted-line {
  background-color: #ff0;
  display: block;
  margin: 0 -16px;
  padding: 0 16px;
}
.highlight {
  color:red!important;
}
</style>

$ cat marp.config.js 
const { Marp } = require('@marp-team/marp-core')
const highlightLines = require('markdown-it-highlight-lines')

module.exports = (opts) => new Marp(opts).use(highlightLines)

$ npx marp -c ./marp.config.js markdown.md
[  INFO ] Converting 1 markdown...
[  INFO ] markdown.md => markdown.html

[yhatt]

Oops, I had a mistake how to specify custom engine.

  // marp.config.js
  const { Marp } = require('@marp-team/marp-core')
  const highlightLines = require('markdown-it-highlight-lines')
  
- module.exports = (opts) => new Marp(opts).use(highlightLines)
+ module.exports = {
+   engine: (opts) => new Marp(opts).use(highlightLines),
+ }

And don't indent the code block with tab. Code block by indent will lose language info for highlight.

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

  <style>
  .highlighted-line {
    background-color: #ff0;
    display: block;
    margin: 0 -16px;
    padding: 0 16px;
  }
  .highlight {
    color:red!important;
  }
  </style>

[hakib]

Oops, I had a mistake how to specify custom engine.

Yup... that did the trick! Thanks ;)

And don't indent the code block with tab. Code block by indent will lose language info for highlight.

Yeah, I added the indention for github markdown.

Thanks Yuki, I've been using marp for all my presentation needs and it's amazing!

[Doctor-love]

This is a neat feature, IMHO. Have you considered including "markdown-it-highlight-lines" in Marp out-of-the-box and classes to support this in the default themes, @yhatt ?

[yhatt]

A similar feature already has been mentioned at marp-team/marp-core#296.

However, we need to carefully determine how to implement this feature, considering the extent to which similar syntax has been adopted and how it has been implemented across the Markdown ecosystem.