data-auto-scaling not kicking in when using markdown-it-highlight-lines

[mil-ad]

marp has this nice data-auto-scaling="downscale-only" logic that kicks in when the text in a code block (i.e. ```) doesn't fit but when I use the markdown-it-highlight-lines plugin the downscaling logic doesn't get applied to code blocks with line highlighting. Is there a way to manually include it for a div?

[yhatt]

It brings because markdown-it-highlight-lines plugin will overload the code block renderer provided by Marp Core. You can write a markdown-it plugin to fix the renderer.

// engine.mjs
import markdownItHighlightLines from 'markdown-it-highlight-lines'

const fixMarkdownItHighlightLinesPlugin = (md) => {
  // Store the original fence renderer
  const { fence } = md.renderer.rules

  // Overload the fence renderer to add Marp Core compatible attributes
  md.renderer.rules.fence = (...args) => {
    // Call the original renderer
    const rendered = fence(...args)

    // Add Marp Core compatible attributes to the rendered code block
    if (rendered.startsWith('<pre')) {
      return `<pre is="marp-pre" data-auto-scaling="downscale-only"${rendered.slice(4)}`
    }

    return rendered
  }
}

export default ({ marp }) =>
  marp.use(markdownItHighlightLines).use(fixMarkdownItHighlightLinesPlugin)