skills.rest
musher-dev
musher-devOFFICIAL
Explore all skills by this author →
WebsiteGitHub

building-code-displays

Generate CSS-only highlighted code displays with split-panel and tabbed views.

Updated Mar 6, 2026
Search Tags:#yaml#svelte#code display#syntax highlighting#marketing site#cli output
One-click install
npx skills add https://github.com/musher-dev/bundles --skill building-code-displays
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-code-displays
Source: https://github.com/musher-dev/bundles/tree/main/marketing-site-authoring/skills/building-code-displays
Command: npx skills add https://github.com/musher-dev/bundles --skill building-code-displays

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the creation of visually appealing and functional code display components for marketing websites without relying on external syntax highlighting libraries.

Core Features & Use Cases

  • CSS-Only Syntax Highlighting: Apply syntax highlighting using only CSS variables and Tailwind classes, ensuring consistency with design tokens.
  • Code-Then-Output Split Panels: Build side-by-side or stacked layouts to showcase configuration code alongside its corresponding CLI output, crucial for explaining mechanisms.
  • Tabbed Multi-File Views: Display related code files (e.g., bundle.yaml and pipeline.yaml) in a tabbed interface for organized presentation.
  • Interactive Terminal Chrome: Implement terminal-like interfaces with animated effects for engaging demos.

Quick Start

Build a code-then-output split panel for the marketing site, displaying bundle.yaml on the left and its apply command output on the right.

Frequently Asked Questions about building-code-displays

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add syntax highlighting to code blocks on a marketing site without external libraries?▼

Syntax highlighting without external libraries is achieved using CSS-only variables and Tailwind classes. This approach applies token-based styling directly in your Svelte UI components, ensuring visual consistency with your existing design system.

What is the best way to display YAML configuration alongside its CLI output?▼

Displaying YAML configuration alongside CLI output is best handled using a split-panel layout. This design showcases the code file on one side and its corresponding terminal output on the other, clearly explaining the execution mechanism.

Can I show multiple code files in a tabbed view for a Svelte marketing website?▼

Showing multiple code files in a tabbed view is fully supported for Svelte marketing websites. You can organize related configuration files, such as bundle.yaml and pipeline.yaml, within a single tabbed interface component.

How do I build an interactive terminal demo for a marketing page?▼

Building an interactive terminal demo involves implementing terminal chrome with animated effects using Svelte components. This creates an engaging, terminal-like interface that visually simulates command line interactions for your visitors.

Does this code display approach work with existing design tokens?▼

This code display approach works directly with existing design tokens by utilizing CSS variables for styling. The highlighting and layout components reference these tokens, ensuring your code blocks match your brand's visual identity.

Related Skills

Explore More Marketing & Sales Skills→
decoutkhanqindevdecoutkhanqindev
8

kta-compose-design-tokens

Convert Figma, Stitch, and Claude Design files into Kotlin Compose design tokens.

Community
Advanced
remotion-devremotion-dev
55.9k

docs-demo

Embed interactive Remotion demos into documentation pages via a Demo component.

Official
Basic
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced
flashfoxerflashfoxer

baoyu-markdown-to-html

Convert Markdown to styled HTML with syntax highlighting and math rendering.

Community
Advanced