Any easy way to add annotation to markdown codeblock?

[kayx23]

Any easy way to add annotation to markdown codeblock with Docusaurus?

Such as the following:

I would like to use these icons/markers to mark the (lines of) code I want to explain, instead of leaving long comments in the code block.

Requirement: these icons should not interfere with code block one-click copying.

[slorber]

We don't really have first-class support for this but the magic comment system could enable you to build it

https://docusaurus.io/docs/markdown-features/code-blocks#custom-magic-comments

We don't have a way currently to have "parametrized magic comments" but you can probably create magic comments for each number from 1 to 10 and that could be good enough for now? 🤔

[kayx23]

Thanks for your suggestion! Could you please elaborate:

create magic comments for each number from 1 to 10

I was thinking about passing numbers to the css file using html attribute id and position the corresponding number (in unicode) to the right hand side of the line but that probably interferes with code copying, too...

p.s. there is a relevant feature request here:
https://docusaurus.canny.io/feature-requests/p/annotationscomments-for-code-blocks

[slorber]

Instead of highlighting the line in red, you can have a magic comment // badge-1, make it add a class .code-badge-1 and the class renders a badge with content: '1' at the beginning or end of the code line.

You can make the badge impossible to select with CSS to avoid interfering with code copying

[kayx23]

Got it. Will give it a go! Thanks.

[kayx23]

Ok, just experimented around. One problem I'm running into is it is difficult to position the ::after number dynamically based on the width of the line of code. Reason I don't want to position it all the way to the right hand side of the line/block is that it is hard to see which line the number corresponds to without highlighting the line.

My thoughts are that I either

• combine numbering with line/block highlighting (background colour); or
• add javascript to calculate the line width and dynamically position the number (feels complicated and not sure how)

I'm rolling with plan 1 because it's a lot easier ;P