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

[KunjShah95]

Kindly assign me this tasks as a task

[jrobinAV]

@KunjShah95 Thank you for your help.

[KunjShah95]

Understanding the Issue

It seems that the Taipy GUI currently does not support code snippets, which is a feature that would be beneficial to users, especially since Taipy is based on Markdown, which supports code snippets. The user has provided an example of Taipy code that is not being rendered correctly.

Analyzing the Issue

From the provided images, it appears that the code snippet is not being separated from the text and is not being syntax highlighted correctly. The acceptance criteria for this issue are:

Ensure code snippets are separated from text in a box Ensure code snippets are correctly syntax highlighted Proposed Solution

To fix this issue, we can modify the Taipy GUI to support code snippets by:

Using a Markdown parser that supports code snippets, such as Marked or CommonMark Adding a code block element to the Taipy GUI, which would wrap the code snippet in a box and apply syntax highlighting Using a syntax highlighting library, such as Prism or Highlight.js, to correctly highlight the code snippet Here is an example of how the modified Taipy GUI code could look:

markdown

Verify

Open In Editor Edit Copy code

# This is a code snippet
print("Hello, World!")

Verify

Open In Editor
Edit
Copy code
This would render as a code block with syntax highlighting, separated from the surrounding text.

**Next Steps**

Before implementing the solution, I would like to confirm with the user that this is the correct approach and that the proposed solution meets their requirements. Additionally, I would like to discuss any potential edge cases or considerations that need to be taken into account.

Would you like me to elaborate on any part of the solution or proceed with implementing it?

[KunjShah95]

KIDNLY CHECK IF IT HELPS YOU

[KunjShah95]

sorry i am not able to figure out the exact issue in the code so kindly unassign me

[Karush2807]

According to me the issue lies in the problem of SYNTAX HIGHLIGHTING because it is not rendering those code snippets properly so integrating the js libraries such as Prism.js or Highlight.js

So i request to kindly assign the issue to me so i can look into this :)

[FlorianJacta]

Here you go, @Karush2807; let me assign you this issue! Thank you for taking care of it

[quest-bot[bot]]

New Quest!

A new Quest has been launched in @Avaiga’s repo. Merge a PR that solves this issue to loot the Quest and earn your reward.

---

Some loot has been stashed in this issue to reward the solver!

🗡 Comment @quest-bot embark to check-in for this Quest and start solving the issue. Other solvers will be notified!

⚔️ When you submit a PR, comment @quest-bot loot #381 to link your PR to this Quest.

Questions? Check out the docs.