Add line numbers to code block

[fredzett]

First of all: this is such a great framework and it really helps me to create nice slides using Latex / code in much less time than before.

I am using VSCode extension and don't know much about CSS/HTML, but managed to create my own template using my own css theme.

One thing I can't manage to do: is there a way to add line numbers to code blocks?

something like this:

1: a = 3
2: b = 4
3: c = a * b

Thanks for your help!

[yhatt]

It cannot only in theme CSS + Marp for VS Code. It's a time to borrow a power of JavaScript with Marp CLI!

Customize a Markdown engine with a Marp plugin. The engine in below has written a plugin inline.

// engine.js
module.exports = ({ marp }) =>
  marp.use(({ marpit }) => {
    const { highlighter } = marpit

    // Override Marp Core's highlighter to wrap each lines by ordered list items
    marpit.highlighter = (...args) => {
      const original = highlighter(...args)
      const listItems = original
        .split(/\n(?!$)/) // Don't split at the trailing newline
        .map((line) => `<li>${line}</li>`)

      return `<ol>${listItems.join('')}</ol>`
    }
  })

And contain its style to either of Markdown or theme CSS:

```javascript
a = 3
b = 4
c = a * b
```

<style>
pre ol {
  all: unset;
  display: block;
  counter-reset: line-number 0;
}
pre ol li {
  all: unset;
  display: list-item;
  list-style: none;
}
pre ol li::before {
  content: counter(line-number) ": ";
  counter-increment: line-number;
}
</style>

And convert Markdown by using Marp CLI. It works!

marp --engine ./engine.js ./markdown.md

[yhatt]

1.) Can you explain why this is not possible inside the VS Code extension?

It's an intentional design for saving Marp users from any malicious attacks. Using customized Marp engine is powerful, but with great power comes great responsibility. For example, Marp extension might be used as an attack vector to steal some important data in your PC if enabled the engine customization by JS. The same thing can be said for many other VS Code extensions, but actually underestimate yet!

Recently VS Code is working on Workspace Trust, to make a security layer for preventing malicious attacks. However, it is still new one and not applied to Markdown preview yet (microsoft/vscode#131939). If VS Code made stable Workspace Trust support for Markdown, we could work on the engine customization in Marp extension. (marp-team/marp-vscode#194)

[yhatt]

2.) How can I use a custom css file that I have uploaded to GitHub? --theme "link-to-github does not work in my above line of Code

Marp CLI cannot use a remote URL as a theme. Require to save to somewhere of the local disk, and use a path to the saved CSS file. (marp-team/marp-cli#183)

[fredzett]

Thanks a lot for your work and your helpful answers! Much appreciated!!

[j2deme]

Hi @yhatt first of all thank you for Marp 👍 , I read about it a couple of months ago, but it was up to now that I decided to use it and totally loved it! ❤️

I implemented the custom engine as suggested in your answer, included the given CSS and it totally worked 🥳 until I needed to show blocks of code with 10+ lines, I noticed it looked a little displaced to the right.

I'm a noob in terms of CSS, but I managed to get the "right" answer, it was just a matter of adding some extra CSS to the pre ol li::before.

pre ol li::before {
  display: inline-block; /* Added lines */
  width: 1em; /* Added lines */
  color: var(--muted);
  content: counter(line-number) ": ";
  counter-increment: line-number;
}

Problem solved! 😄

I still think it's not fully right, as it overlaps with the colon symbol, but seems Ok.

Hope it works for someone with the same issue.

English is not my first language, I hope my message is understandable

[yhatt]

I think using CSS Grid is better to automatically determine the width for line numbers based on the length of characters in the line number. Followings are updated JS and CSS to use CSS Grid:

// engine.js
module.exports = ({ marp }) =>
  marp.use(({ marpit }) => {
    const { highlighter } = marpit

    marpit.highlighter = function (...args) {
      const original = highlighter.apply(this, args)
      const listItems = original
        .split(/\n(?!$)/) // Don't split at the trailing newline
        .map(
          (line) =>
            `<li><span data-marp-line-number></span><span>${line}</span></li>`
        )

      return `<ol>${listItems.join('')}</ol>`
    }
  })

pre ol {
  all: unset;
  display: grid;
  grid-template-columns: auto 1fr;
  counter-reset: line-number 0;
}
pre ol li {
  display: contents;
}
pre ol li span[data-marp-line-number]::before {
  display: block;
  content: counter(line-number) ": ";
  counter-increment: line-number;
  text-align: right;
}