Feature/code block component by 0xharkirat · Pull Request #673 · SSWConsulting/SSW.Products

0xharkirat · 2026-02-18T00:03:15Z

Part of #589

This PR introduces a new Code Block Component matching the implementation in , as discussed with @joshbermanssw.

It replaces the previous partial solution with a fully custom, syntax-highlighted component powered by Shiki (v3).

🚀 Key Features

Advanced Highlighting: Implementing v3 with theme for accurate VS Code-like syntax highlighting.
Transformers Support:
- Diffs: // [code wikipedia_reader ++] and // [code wikipedia_reader --]
- Highlighting: // [code wikipedia_reader highlight]
- Focus mode: // [code wikipedia_reader focus]
Better UX: Added a Skeleton Loader for smoother loading without layout shifts and a Copy Button with success feedback.
Performance: Uses a Singleton Pattern to lazy-load languages on the client, keeping the initial bundle size small.

🛠️ Changes

New Components:
- code-block.tsx: Main client component with robust error handling and HTML sanitization.
- code-block-skeleton.tsx: Deterministic shimmer loader to prevent hydration mismatches.
- shiki-singleton.tsx: Utility to manage highlighter lifecycle and dynamic language loading.
Styling: Added code-block.css for specific token styling (diffs, line numbers, scrolling).
Dependencies: Added shiki and @shikijs/transformers.
- Note: pnpm-lock.yaml shows both shiki@1.x (via TinaCMS/TypeDoc) and our shiki@3.x. This duplication is necessary for our feature requirements.
Layout: Adjusted docs layout grid for better sidebar sizing.

🧪 Verification

Added a temporary test page (test-code-block.mdx) to verify rendering across multiple languages.

Figure: Updated code blocks with Shiki (as implemented in tinadocs)

…nd copy functionality for markdown.

…ck component.

…and add new code block examples for Bash, PowerShell, and Bicep.

vercel · 2026-02-18T00:03:20Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ssw-products	Ready	Preview, Comment	Feb 18, 2026 11:24pm

content/docs/EagleEye/test-code-block.mdx

Copilot

Pull request overview

Introduces a reusable CodeBlock component and wires it into TinaMarkdown rendering so documentation code snippets get syntax highlighting and copy-to-clipboard support, plus a docs-only verification page and a small docs layout tweak.

Changes:

Added components/shared/CodeBlock.tsx and integrated it into tina/tinamarkdownStyles/DocAndBlogMarkdownStyle.tsx for rendering fenced code blocks.
Added react-syntax-highlighter (and types) dependencies and a /docs/test-code-block MDX page for manual verification.
Updated docs layout grid sidebar widths and applied a minor MDX formatting cleanup.

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
utils/cn.ts	New `cn` helper added (duplicates existing helper).
tina/tinamarkdownStyles/DocAndBlogMarkdownStyle.tsx	Routes TinaMarkdown code blocks to the new `CodeBlock` renderer.
components/shared/CodeBlock.tsx	New client component for highlighted code + copy button.
content/docs/EagleEye/test-code-block.mdx	Adds a documentation page to visually test code blocks.
content/docs/EagleEye/prerequisites.mdx	Minor formatting cleanup.
app/[product]/docs/layout.tsx	Adjusts docs grid columns for fixed-width sidebar.
package.json	Adds syntax highlighting dependencies.
pnpm-lock.yaml	Lockfile updates for new dependencies.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

package.json

components/shared/CodeBlock.tsx

tina/tinamarkdownStyles/DocAndBlogMarkdownStyle.tsx

content/docs/EagleEye/test-code-block.mdx

utils/cn.ts

…` to `shiki` as per tinadocs implementation

…tina-lock.json.

Copilot

Pull request overview

Copilot reviewed 9 out of 10 changed files in this pull request and generated 10 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

content/docs/EagleEye/prerequisites.mdx:22

Typo in the newly added code block content: someting should be something.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

components/shared/code-block/code-block.tsx

components/shared/code-block/shiki-singleton.tsx

components/shared/code-block/code-block-skeleton.tsx

package.json

pnpm-lock.yaml

components/shared/code-block/code-block.tsx

…ut` cleanup, and conditional border, and add Shiki highlighter fallback on initialization failure.

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

…xt code blocks, and add explicit prop types to the skeleton component.

0xharkirat · 2026-02-18T05:23:41Z

Do not merge automatically need to remove test file docs/test-code-block

app/[product]/docs/layout.tsx

0xharkirat added 4 commits February 16, 2026 17:48

feat: introduce a new code block component with syntax highlighting a…

b729f7e

…nd copy functionality for markdown.

fix: adjust layout grid column widths and add max-w-full to CodeBlo…

6a60279

…ck component.

feat: Improve Bicep syntax highlighting by aliasing it to TypeScript …

5806759

…and add new code block examples for Bash, PowerShell, and Bicep.

docs: Remove test az cli from prerequisites...

a30eaaa

0xharkirat requested a review from joshbermanssw February 18, 2026 00:03

0xharkirat commented Feb 18, 2026

View reviewed changes

content/docs/EagleEye/test-code-block.mdx Outdated Show resolved Hide resolved

0xharkirat requested a review from Copilot February 18, 2026 00:16

Copilot started reviewing on behalf of 0xharkirat February 18, 2026 00:17 View session

Copilot AI reviewed Feb 18, 2026

View reviewed changes

vercel bot had a problem deploying to Preview February 18, 2026 00:52 Failure

0xharkirat force-pushed the feature/code-block-component branch from 055f2b0 to a30eaaa Compare February 18, 2026 00:56

fix: CodeBlock async copy and clean imports (kept full Prism)

c223788

vercel bot deployed to Preview February 18, 2026 01:00 View deployment

fix: improve pre/code block handling and language regex

99d070d

vercel bot deployed to Preview February 18, 2026 01:07 View deployment

0xharkirat and others added 2 commits February 18, 2026 15:45

refactor: migrate code block component from `react-syntax-highlighter…

b53ddf6

…` to `shiki` as per tinadocs implementation

Merge branch 'main' into feature/code-block-component

5d6c31a

0xharkirat requested review from Copilot February 18, 2026 04:46

Copilot started reviewing on behalf of 0xharkirat February 18, 2026 04:47 View session

vercel bot deployed to Preview February 18, 2026 04:49 View deployment

docs: remove empty code block from EagleEye prerequisites and update …

5db65b8

…tina-lock.json.

Copilot AI reviewed Feb 18, 2026

View reviewed changes

vercel bot deployed to Preview February 18, 2026 04:53 View deployment

feat: Enhance CodeBlock with improved copy functionality, `setTimeo…

cea7493

…ut` cleanup, and conditional border, and add Shiki highlighter fallback on initialization failure.

vercel bot deployed to Preview February 18, 2026 05:06 View deployment

Copilot AI reviewed Feb 18, 2026

View reviewed changes

fix: Enhance Shiki language loading fallback, escape HTML in plain te…

cbb796a

…xt code blocks, and add explicit prop types to the skeleton component.

vercel bot deployed to Preview February 18, 2026 05:16 View deployment

joshbermanssw reviewed Feb 18, 2026

View reviewed changes

app/[product]/docs/layout.tsx Outdated Show resolved Hide resolved

style: adjust docs layout grid column widths to use fractional units.

cd596ac

vercel bot deployed to Preview February 18, 2026 06:11 View deployment

joshbermanssw approved these changes Feb 18, 2026

View reviewed changes

chore: delete temporary test code block documentation file.

97c0f9e

vercel bot deployed to Preview February 18, 2026 23:24 View deployment

0xharkirat merged commit e419680 into main Feb 18, 2026
2 checks passed

0xharkirat deleted the feature/code-block-component branch February 18, 2026 23:25

0xharkirat mentioned this pull request Feb 19, 2026

✨ Anchor Links and Code Blocks - Improve Documentation Navigation and Readability #589

Open

Conversation

0xharkirat commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Key Features

🛠️ Changes

🧪 Verification

Uh oh!

vercel bot commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

0xharkirat commented Feb 18, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

0xharkirat commented Feb 18, 2026 •

edited

Loading

vercel bot commented Feb 18, 2026 •

edited

Loading