Pages should support code snippets

[AlexandreSajus]

Description A user on our Discord wants Taipy GUI to support code snippets. This makes sense since taipy is based on Markdown, which supports code snippets.

Here's an example of taipy code:

This results in:

But should result in:

Acceptance Criteria

• [ ] Ensure code snippets are separated from text in a box
• [ ] Ensure code snippets are correctly syntax highlighted

[AlexandreSajus]

The user on Discord (gmarabout) has found somewhat of a fix for this issue if you want to take a look:

Hi @[TPY] Alex 👋 I actually came up with another solution. Please let me know what you think of it... I created a Taipy UI component that actually embeds the (very cool) react-markdown web component. I can now dynamically inject Markdown (including code) into a Taipy page. Here is an example (see the "answer"section which is a Markdown dynamically injected). With the ticket you propose, I am not sure I would get the "dynamic" way to inject MD into a page... But I might be mistaken... The source is here, if you want to have a look: https://github.com/gmarabout/doc-chatbot/tree/main/src/tp_markdown

[FabienLelaquais]

We may want to tackle this in a far more generic manner. The initial idea would be to extend the capacities of the text control, adding a property that would drive the rendering. A 'style' (or 'mode', or 'code') property could be added and set to a value that drives the rendering:

• "raw" or "html" would be similar to setting the raw property to True
• "markdown" would generate from Markdown content... within Markdown
• "js"/"py"/"python"/... would trigger the appropriate highlighter to get a neat result. The drawback would be the tuning of highlighters...

[FredLL-Avaiga]

@AlexandreSajus did you try text|mode=markdown ?

[AlexandreSajus]

@AlexandreSajus did you try text|mode=markdown ?

Does not work (taipy==3.1.0.dev0)

Returns

[FredLL-Avaiga]

The syntax highlighting won't happen in taipy-gui We could provide an example of extension that brings in all the frontend dependencies needed for this

The code (triple back-quote) is supported (HTML code tags are generated with language specific class names) But one would need to declare some css for it to be highlighted.

[FabienLelaquais]

What about <|{text}|text|mode=markdown[extensions]|> that would allow to load extensions on the Markdown parser?

[FredLL-Avaiga]

interesting idea, to be investigated