Overhaul CodeBlock rendering

[cte]

Overview

Note: This work was done by @KJ7LNW - I just fixed the latest merge conflicts related to the recent terminal handling PR.

This is a port of cline/cline#1583 to RooCode, plus new features:

This PR has become pretty mature, please give it a try.

Summary of CodeBlock Features

• Copy Button: Users can easily copy code snippets with a dedicated button that stays visible.
• Word Wrap Toggle: Users can switch word wrapping on or off in code blocks.
• Collapsible Code Blocks: Code blocks can be collapsed or expanded, with the collapse icon hidden for shorter blocks.
• Language Display: Code blocks show a subtle, semi‑transparent label indicating the language.
• Language Selection: The language name is a pull down to change the selected highlight language
• Auto‑Scroll on Update: Code blocks automatically scroll to the bottom when their content changes.

Summary of Shiki Features

• On-Demand Loading: Languages load only when needed, reducing initial wait times.
• Singleton Highlighter: A single instance is used to optimize memory usage.
• Language Aliasing & Fallback: Recognizes language abbreviations and defaults to plain text for unrecognized languages.
• Refactored code block rendering to use a single component across the application, ensuring consistent styling and behavior.
• Syntax highlight style is github-dark or github-light depending on whether the vscode theme contains the word "light" (close/reopen the Roo task if you change your VSCode theme).

Testing

Latest test build:

• https://www.linuxglobal.com/out/roo-cline-3.10.3-roo-code-block-copy-button.vsix

Here is a good test instruction:

show me a survey of sample language programs without language duplication display them directly in response to not create files. as soon as I reply, provide more examples always different without duplication. include a few invalid languages and md language tags like ```lang . one sample should be a long sample in a valid language.

How to Test

1. Open any chat or conversation with code blocks
2. Hover over a code block to see the copy button appear in the top-right corner
3. Click the button to copy the code (you should see a checkmark icon briefly)
4. Paste the code elsewhere to verify it was copied correctly

New Screenshots

1. Feature widgets top-right corner w/ language pull down selector in case AI chose the wrong language
2. Syntax highlight via shiki

Older Screenshots

These were taken earlier in development, before the expand/collapse and word-wrap widgets were added:

Code

Notice that the current syntax highlight Rehype (left) is not recognizing syntax like regular expression symbols or nested var = "${variables} in strings" --- but Shiki does this really well (right, this PR).

Shell

Shiki also provides beautiful shell markup:

More examples:

Current Rehype (left) - Shiki (right, this PR)

Get in Touch

If you have any questions or feedback, please reach out on the Roo Code Discord.

My Discord handle is KJ7LNW.

---

Important

Overhaul CodeBlock rendering with new features, Shiki integration for syntax highlighting, and build updates for WebAssembly support.

• CodeBlock Features:
  • Added copy button, word wrap toggle, collapsible code blocks, language display, language selection, and auto-scroll on update in CodeBlock.tsx.
  • Refactored to use a single component for consistent styling and behavior.
• Shiki Integration:
  • Implemented on-demand language loading and singleton highlighter in highlighter.ts.
  • Added language aliasing and fallback to plain text for unrecognized languages.
  • Syntax highlight style set to github-dark or github-light based on VSCode theme.
• Build and Configuration:
  • Updated vite.config.ts to include a WebAssembly plugin for Shiki.
  • Excluded shiki and related dependencies from optimization in vite.config.ts.
• Testing and Miscellaneous:
  • Added tests for CodeBlock in CodeBlock.test.tsx.
  • Updated package.json to include shiki and adjust dependencies.

^{This description was created by for 1117500926889242a2fc63f1d102b1b9cf78e864. It will automatically update as commits are pushed.}

[changeset-bot]

🦋 Changeset detected

Latest commit: dda3132

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
roo-cline	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[ellipsis-dev]

The pull request is quite large, with significant changes across multiple files. It might be beneficial to split the changes into smaller, more focused pull requests. Here are some suggestions:

1. CodeBlock Enhancements: The changes related to the CodeBlock component, including syntax highlighting, copy functionality, and inertial scrolling, could be grouped into a separate pull request.

2. Security Policy Updates: The updates to the Content-Security-Policy meta tag in ClineProvider.ts and related tests could be isolated into another pull request.

3. Dependency Updates: The changes in package.json related to the Shiki dependency update could be a standalone pull request.

4. Testing Enhancements: The new tests for the CodeBlock component and enhancements in ClineProvider.test.ts could be grouped together.

Please consider splitting the pull request to improve reviewability and maintain focus on specific changes. Let me know if you need further assistance!

[KJ7LNW]

thanks!

I am working on a follow up PR for terminal syntax highlight