feat(code block): add line number attribute to code block lines

[nobkd]

🔗 Linked issue

#1972
#1970

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR adds an attribute line for each line of a code block. Inline codes are unaffected.
A line attributes contains the line number for the current line.

Non-highlighted code blocks always just had one line.
Therefore, a new function was added to split the plain code to individual lines.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[netlify]

✅ Deploy Preview for nuxt-content ready!

Name	Link
🔨 Latest commit	8cd152d
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt-content/deploys/643692ba217af4000855d22a
😎 Deploy Preview	https://deploy-preview-1973--nuxt-content.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[nobkd]

Maybe there's a better way to make those line numbers available, so we're also able to display them next to the code as requested in #1970

[farnabaz]

Maybe there's a better way to make those line numbers available, so we're also able to display them next to the code as requested in #1970

I think it would be better if we add line number as a data attribute instead of class

<div data-line="1" ...>...</div>
<div data-line="2" ...>...</div>

This way, users can display line number using with CSS styling.

WDYT @nobkd ?

[nobkd]

LGTM, then someone should be able to style a line with [line="X"] and use the attr(line) to append the number to ::before.

[nobkd]

@farnabaz
I have updated the code.

I think this should be mentioned in the docs, but I don't quite know where to put it. Do you have any suggestion?
Maybe here? https://content.nuxtjs.org/guide/writing/markdown#code-highlighting

EDIT: I just added it first. Feel free to edit or move the notice.

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
content	Edit on Studio ↗︎	View Live Preview	8cd152d

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
content	Edit on Studio ↗︎	View Live Preview	6bdc0d9

[farnabaz]

Thanks