firefly-expressive-code-config

Modify dark and light code themes and collapsible code behavior in expressiveCodeConfig.ts.

1|Updated Feb 16, 2026

Search Tags:#syntax highlighting #code highlighting #expressive code #firefly #theme configuration #collapsible code

Ready to run

npx skills add https://github.com/GodBlf/godblf.github.io --skill firefly-expressive-code-config

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: firefly-expressive-code-config
Source: https://github.com/GodBlf/godblf.github.io/tree/main/.agents/skills/firefly-expressive-code-config
Command: npx skills add https://github.com/GodBlf/godblf.github.io --skill firefly-expressive-code-config

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill allows you to modify the code highlighting configuration for the Firefly blog theme, specifically when changing between dark and light code themes or adjusting the collapsible code behavior.

Core Features & Use Cases

Theme Switching: Easily update the darkTheme and lightTheme values in the configuration file.
Collapsible Code: Control the behavior of collapsible code blocks, including enabling/disabling the feature, setting line thresholds, and defining default states.
Use Case: You want to switch the default code highlighting theme in your Firefly blog from "github-dark" to "material-oceanic" and ensure that code blocks longer than 50 lines are collapsed by default.

Quick Start

Use the firefly-expressive-code-config skill to change the dark theme to 'material-oceanic' and set the default collapsed state for code blocks longer than 50 lines.

Frequently Asked Questions about firefly-expressive-code-config

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

FAQPage Schema

How do I change the code highlighting theme in my Firefly blog?▼

To change the code highlighting theme in your Firefly blog, you update the `darkTheme` and `lightTheme` values within the `src/config/expressiveCodeConfig.ts` file, ensuring changes match existing object structures for clean diffs.

How do I configure collapsible code blocks in the Firefly blog theme?▼

Configuring collapsible code blocks in the Firefly blog theme involves modifying `src/config/expressiveCodeConfig.ts` to enable the feature, set line thresholds for automatic collapsing, and define default collapsed states.

Can I set a specific line limit to automatically collapse long code blocks in Firefly?▼

Yes, you can set a specific line limit to automatically collapse long code blocks in Firefly by adjusting the line threshold settings within the `expressiveCodeConfig.ts` file to trigger default collapsed states.

What configuration file do I need to edit to switch between dark and light code themes?▼

You need to edit the `src/config/expressiveCodeConfig.ts` file to switch between dark and light code themes, ensuring that your modifications strictly adhere to existing style and value types for minimal, reviewable diffs.

Does updating expressive code configuration require maintaining specific object structures?▼

Yes, updating expressive code configuration requires adherence to existing styles, object structures, and value types to ensure the modifications produce minimal, reviewable diffs within your Firefly theme setup.