Support annotations in code examples

[damithc]

Current: code snippets can be syntax colored

Suggested: add the ability to add more information into code snippets, for example,

• highlight specific parts of the code
• add a comment about a specific part of a code
• show line numbers

[openorclose]

Some prior work:

This markdown plugin allows for highlighting of specific lines (not parts):

https://github.com/egoist/markdown-it-highlight-lines

https://meta.stackexchange.com/questions/221268/highlighting-and-notating-part-of-a-line-in-a-code-block

This stackoverflow post from 5 years ago also asked for a similar feature.

[nbriannl]

Just curious, I assume you'll be installing markdown-it plugins and passing multiple markdown-it-attrs to the fenced code blocks to fulfill the above functionality?

Actually scratch that, just like #957, maybe to make the syntax more readable, we need to consider something else other than passing in multiple attributes and letting markdown-it parse.

[openorclose]

If we were to use vue components, feels like the syntax would be roughly the same:

<codeblock stuff-to-highlight="<custom syntax>" display-language="MarkBind">
```md
# Some markbind 
```
</codeblock>

vs

```md {stuff-to-highlight="<custom syntax>" display-language="MarkBind"}
# Some markbind 
```

So maybe using markdown-it-attrs for it is ok.

[crphang]

I have an implementation calling it internally as Widget, which is similar to (1) the first. Currently it helps to escape syntax using code fence (data layer) and allow it to inject additional context using a more familiar Markbind components.

The idea is to make it extensible to different "widget" which could potentially have clashing syntax (puml, latex, and more) but also give it a consistent experience going forward

#968

The PR above handles both src and inline PUML.

[nbriannl]

Just to raise awareness, in case we conflict. Currently, #991, #1020 are adding additional features to code block via markdown-it-attrs

With markdown-it-attrs the theoretical syntax for headings, line highlighting and line numbers can be as follow:

```md {highlight-lines="1,2,4-5" heading="Can contain either file name or language used"}
# Some markbind 
```

```md {.no-line-numbers heading="Markdown"}
# Some markbind 
```

If users just want plain code blocks, they use the usual syntax (note: line numbers are default)

```html
# Some html code
```

[damithc]

md {highlight-lines="1,2,4-5" heading="Can contain either file name or language used"}

Is anybody adding support for line highlighting (as hinted by this code snippet)?