Having icons rendered within code blocks.

[UltraInstinct05]

Is it possible to display icons within code blocks. It would be useful especially when you show a directory like structure. Right now, something like this doesn't work.

└── :material-file-tree: folder_1/
    ├── :material-file-tree: folder_2/
    └── ...other files

[squidfunk]

Hmm, interesting idea. Theoretically, it should be possible, albeit I'm not sure at which stage this would need to be implemented, as those short codes might interfere with highlighting. @facelessuser could this be done somehow prior to lexing, i.e. by taking the shortcodes out and inserting them back in after highlighting, or does it mandate an extra lexer for each and every language?

[squidfunk]

Yes, that's comparing apples to oranges. Code annotations are mounted in the browser. You can disable JavaScript to see what your documentation site looks like when they cannot be mounted due to the missing runtime. For code annotations, this is no problem, since they need JavaScript for positioning anyway, and the fallback is graceful.

For icons the story is different, since shortcodes are converted to svg, which can only be done at build time.

[facelessuser]

could this be done somehow prior to lexing, i.e. by taking the shortcodes out and inserting them back in after highlighting, or does it mandate an extra lexer for each and every language?

@squidfunk Could this be done? Yes. Could this be done reliably? Maybe not.

You could certainly do this in a pre-processor step. Find shortcodes anywhere in the language and then replace them with some placeholder. There are a couple of potential problems though.

1. What if : has some significance in the language and we have false positive matches for emoji? It is certainly possible, though I don't know the likelihood as I am not familiar with all code block syntaxes that are available or will be available in the future.

2. What do you pick as a placeholder? You have to pick something that will survive the code block translation. Is there some universal placeholder that could be used that would not trigger accidental highlighting in all languages? 🤷🏻

Code annotations work because you post-process a language construct that is usually not altered once found, comments. This is one ideal way to approach such things. You could easily translate syntax in comments once the highlighter is done. You could turn links into clickable links, emoji shortcuts to emoji icons, or basically do whatever you want, assuming the syntax in that construct is untouched.

Running with the above idea, you could come up with a generic solution. Assuming you can determine a construct in the language which would preserve your icon syntax, you could let the highlighter do its thing, and then provide the general solution element classes where emoji are allowed for a given language and post-process the HTML to translate the shortcuts in a custom Superfence fence.

To pre-process, you just have to blindly look for them, hope you don't mess up the syntax by aggressively grabbing emoji shortcuts that aren't really emoji shortcuts, hope you properly picked a universal placeholder (though I guess you could make this per-language configurable), and then replace the placeholder once the highlighting is done. This could also be done with a custom SuperFence. I guess you could make the shortcut syntax per-language configurable as well.

Either way, it is a bit complicated, but I won't say impossible. It is much, much easier if you are working with a specific, known language and just want to create s special custom fence for that specific language instead of making it completely general. In this case, the custom fence can be constructed to work well for that specific language.

Using either pre or post processing, you could just have a solution with pre determined supported languages and hard code the requirements for each language. If a language has no hard coded requirements, you use a default unless some requirements are added officially to the solution.

In short, I don't think you need custom highlighters, and I do think it is possible. If it were me, I wouldn't waste time with a general solution as I doubt I need emojis in every syntax available. I imagine I would have very specific use cases, like a tree file structure. I could see a simple tree custom fence being created that does handle this specific case than a general solution that works in every language where it isn't nearly as useful.

This is just me "spitballing" right now.

Now, this wasn't specifically asked, but I'll answer this. I personally wouldn't want to develop and maintain a generic solution. I would be willing to answer questions if someone was trying to create their own custom fence to do this or had specific questions. I'm not sure I want to try to solve this universally though.

[squidfunk]

What if : has some significance in the language and we have false positive matches for emoji? It is certainly possible, though I don't know the likelihood as I am not familiar with all code block syntaxes that are available or will be available in the future.

What do you pick as a placeholder? You have to pick something that will survive the code block translation. Is there some universal placeholder that could be used that would not trigger accidental highlighting in all languages? 🤷🏻

Jup, jup, jup. Thanks for your view on this! Agree with everything you said. For a generic solution, it would have to be limited to comments, but that would be too limiting probably and likely not of much use.

Either way, it is a bit complicated, but I won't say impossible. It is much, much easier if you are working with a specific, known language and just want to create s special custom fence for that specific language instead of making it completely general. In this case, the custom fence can be constructed to work well for that specific language.

This is likely the way to go. It could be a custom fence that's called emoji (or icons), which is just plain text with replaced emojis. Those could be used for directory listings or other stuff, but I'm unsure how big of a use case this is. Honestly, it might be a better idea to come up with a block that's specifically used for this (once generic blocks are out), which wraps the content in a code block (or just looks like a code block), piggybacking on the Markdown Emoji extension that we all love.

I personally wouldn't want to develop and maintain a generic solution.

Same here! 🙋‍♂️

This is just me "spitballing" right now.

Now that is something I've never heard 😁

[squidfunk]

I'll mark this as answered for now. Not possible right now, but possible with some effort.

Future reader: if you're interested, you may give this a thumb 👍

[facelessuser]

Now that is something I've never heard

Definitely an "Americanism" :)

 to propose (ideas, suggestions, etc.) for consideration in an informal, preliminary way

[kitroling]

这是来自QQ邮箱的假期自动回复邮件。 您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[pawamoy]

So, I managed to render icons in code blocks, but not the way it was asked here.

I've done it for Markdown-Exec, specifically for tree fences (they display file trees). The fence is based on pymdownx.superfences. The formatter reads the code block, transforms it a bit to make it look like a tree, and add a "folder" emoji in front of directories.

Before, it added a "file" emoji (or whatever its name is) in front of files. Now it finds the relevant icon (in Simple Icons provided by Material for MkDocs) depending on the file name and/or extension, and add a unique text ID that corresponds to this icon in front of it. After converting the transformed tree into HTML, it regex-replaces the unique IDs with the final svg (obtained again from Material for MkDocs files), wrapping it into <span class="twemoji">...</span>.

The end result:

I'll probably release this as an Insiders feature of Markdown-Exec 😎