887 update engine usage section to display markdown

[neelneelneel]

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

[github-actions]

@CodiumAI-Agent /describe

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

Title

887 update engine usage section to display markdown

---

User description

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

---

PR Type

Enhancement

---

Description

• Add new Markdown component with custom renderers.

• Implement Code component with syntax highlighting.

• Update engine pages to use Markdown as children.

• Upgrade dependencies and tsconfig module resolution.

---

Changes walkthrough 📝

	Relevant files
Enhancement	7 files Markdown.tsx Implement Markdown component with custom renderers              +140/-0  Code.tsx Create Code component with syntax highlighting support      +111/-0  EngineUsagePage.tsx Replace custom code block with Markdown rendering                +14/-32  EngineIndexPage.tsx Update Markdown import and usage in engine index                  +2/-4      EngineQAPage.tsx Update Markdown usage for conclusion rendering                      +2/-2      CodeContainer.tsx Add CodeContainer component for wrapping code blocks          +28/-0    MarkdownEditor.tsx Replace Markdown content prop with children usage                +2/-2
Tests	2 files Markdown.stories.tsx Add Storybook stories for Markdown component                          +93/-0    Code.stories.tsx Add Storybook stories for Code component                                  +62/-0
Configuration changes	5 files index.ts Export new Code and Markdown components in index                  +2/-0      package.json Add new dependencies for Markdown and Code features            +9/-2      package.json Remove marked and update typescript version to 5.1.3          +1/-2      tsconfig.json Change moduleResolution from node to bundler                          +1/-1      tsconfig.json Update moduleResolution to bundler in tsconfig                      +1/-1
Dependencies	1 files pnpm-lock.yaml Update dependencies including shikijs and markdown plugins +691/-54
Additional files	9 files index.ts +10/-0    LoadingScreen.tsx +5/-1      index.ts +4/-0      Typography.tsx +2/-0      Markdown.tsx +0/-47    index.ts +0/-1      markdown.css +0/-33    index.ts +0/-1      tsconfig.base.json +1/-1

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Dangerous HTML Usage The component uses dangerouslySetInnerHTML to insert highlighted code. Ensure that the highlighter output is properly sanitized to prevent potential XSS vulnerabilities. <StyledCode sx={sx} dangerouslySetInnerHTML={{ __html: highlightedHtml }} /> ); Raw HTML Rendering The Markdown component enables raw HTML via the rehypeRaw plugin. Make sure that incoming markdown content is either trusted or sanitized to avoid injection risks. import rehypeRaw from "rehype-raw"; Debug Logging The console.log(sx) statement appears to be left in the code. Remove debugging logs before production to avoid leaking unnecessary internal details. console.log(sx);

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Correct dependency name typo Check if "devlop" is a typo and update it to the correct dependency name (e.g. "develop") or remove it if it’s unintended. pnpm-lock.yaml [23662] -devlop: 1.1.0 +develop: 1.1.0 Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies "devlop" as a probable typo and recommends correcting it. Fixing this could prevent potential dependency resolution errors, thereby improving the correctness of the lockfile.	Medium
	Confirm module resolution setting Verify that the use of "bundler" as the module resolution strategy is intentional and compatible with your build system; consider reverting to "node" if not supported. tsconfig.base.json [7] -"moduleResolution": "bundler", +"moduleResolution": "node", # Change to "bundler" only if all dependencies support it Suggestion importance[1-10]: 6 __ Why: This suggestion draws attention to a change from "node" to "bundler" for module resolution, which could lead to compatibility issues if unsupported. It is a valid reminder to double-check the configuration even though the improvement is based on a cautious approach.	Low

[github-actions]

@CodiumAI-Agent /update_changelog