``` This is matched by CSS rules in `spoiler-theme.css`: ```css .marked-extended-spoiler.spoiler-theme-info .marked-extended-spoiler-overlay { background: linear-gradient(145deg, rgba(13, 110, 253, 0.95), rgba(10, 88, 202, 0.98)) !important; color: #ffffff !important; } ``` ### Customizing Themes You can override theme colors by targeting the theme classes in your own CSS: ```css /* Override the info theme color */ .marked-extended-spoiler.spoiler-theme-info .marked-extended-spoiler-overlay { background: linear-gradient(145deg, #0066cc, #004999) !important; color: #ffffff !important; } /* Or modify the shadow */ .marked-extended-spoiler.spoiler-theme-info .marked-extended-spoiler-overlay { box-shadow: 0 8px 30px rgba(0, 102, 204, 0.3) !important; } ``` ### CSS Variable Customization Customize animation timing and spacing: ```css :root { --spoiler-animation-duration: 0.4s; --spoiler-padding: 16px; --spoiler-border-radius: 8px; --spoiler-transition-timing: cubic-bezier(0.4, 0, 0.2, 1); } ``` ### Theme Not Applying? ✅ Fixed! **Previous Issue:** Themes were defined but not visually applied to spoilers. **Current Solution:** As of v17.0.0+, themes are now fully functional with: - ✅ Inline style injection from the renderer - ✅ CSS class-based styling as fallback - ✅ Proper shadow effects for each theme - ✅ Complete support for all 7 themes **To ensure themes work correctly:** 1. Import the theme stylesheet: `import '@fsegurai/marked-extended-spoiler/styles/spoiler-theme.css'` 2. Specify a theme in your spoiler: `::::spoiler{theme="info"}` 3. The spoiler will automatically display with the selected theme colors! ### Configuration Options The marked-extended-spoiler extension accepts the following configuration options: #### Extension Options - `className`: Base CSS class for spoiler containers. Defaults to 'marked-extended-spoiler'. - `prefixId`: Prefix for spoiler element IDs. Defaults to 'spoiler-'. - `template`: Custom HTML template for spoiler structure. Defaults to built-in template. - `customizeToken`: Function to customize tokens before rendering. Defaults to null. #### Styling Styles are no longer injected automatically. Import the CSS/SCSS files you need: ```javascript // In your main JavaScript/TypeScript file import '@fsegurai/marked-extended-spoiler/styles/spoiler.css'; import '@fsegurai/marked-extended-spoiler/styles/spoiler-theme.css'; ``` Or in your CSS/SCSS: ```css @import '@fsegurai/marked-extended-spoiler/styles/spoiler.css'; @import '@fsegurai/marked-extended-spoiler/styles/spoiler-theme.css'; ``` Spoiler syntax parameters: - `title`: Custom title for the spoiler. Defaults to 'Spoiler'. - `subtitle`: Custom subtitle text for the spoiler reveal hint. Defaults to 'Click to reveal'. - `theme`: Visual theme name ('default', 'dark', 'light', 'danger', 'info', 'warning', 'success'). ### Advanced Examples #### Gaming Guide with Multiple Spoiler Types ```markdown # Game Walkthrough Guide ## Level 1: The Forest Start by collecting the ||magic sword|| near the waterfall. ### Boss Strategy ::::spoiler{title="Boss Weakness" type="click"} The forest guardian is weak to fire attacks. Use your fire spell 3 times, then attack with your sword when it's stunned. **Recommended items:** - Fire resistance potion - Health potions (at least 5) - Magic restoration items **Attack pattern:** 1. Guardian charges (dodge left) 2. Magic blast (use fire resistance) 3. Vulnerable window (3 seconds) - attack now! ::::spoilerend ## Level 2: The Cave System Navigate to the ||second tunnel on the right|| to find the hidden treasure. ### Puzzle Solution ::::spoiler{title="Crystal Puzzle Answer" type="hover"} Arrange the crystals in this order: 1. Blue (top-left) 2. Red (top-right) 3. Green (bottom-left) 4. Yellow (bottom-right) 5. Purple (center) The sequence must be activated by touching them in numerical order. ::::spoilerend ### Secret Achievement ||||You can unlock the "Master Explorer" achievement by finding all 12 hidden gems in this level.|||| ``` #### Educational Quiz ```markdown # Physics Quiz ## Question 1 What is the speed of light in a vacuum? ::::spoiler{title="Answer" type="click"} The speed of light in a vacuum is approximately **299,792,458 meters per second** (often rounded to 3 × 10⁸ m/s). **Additional context:** - This is a fundamental constant of nature - Symbol: *c* - It's the maximum speed at which all matter and information can travel - Einstein's theory of relativity is built around this constant **Formula**: E = mc² where *m* is mass and *c* is the speed of light ::::spoilerend ## Question 2 Who developed the theory of general relativity? Quick answer: ||Albert Einstein|| ## Question 3 What happens to time as you approach the speed of light? ::::spoiler{title="Detailed Answer"} According to special relativity, time dilation occurs as you approach the speed of light. Time appears to slow down relative to a stationary observer. **Time dilation formula:** ``` t' = t / √(1 - v²/c²) ``` Where: - t' = dilated time - t = proper time - v = velocity - c = speed of light **Practical example:** If you traveled at 90% the speed of light, time would pass about 2.3 times slower for you compared to someone on Earth. ::::spoilerend ``` #### Sensitive Content Warning ```markdown # Content with Warnings ## News Article Discussion The recent events have been difficult to process. ::::spoiler{title="⚠️ Sensitive Content Warning" type="click"} **Content Warning**: This section discusses topics related to violence and loss. The incident resulted in multiple casualties and has deeply impacted the local community. Support services have been established for those affected, and counseling resources are available. **Resources:** - Crisis hotline: 1-800-XXX-XXXX - Local support center: [link] - Online counseling services: [link] If you or someone you know needs support, please don't hesitate to reach out to these resources. ::::spoilerend ## Community Response The community has come together to ||organize fundraising efforts|| for the affected families. ``` #### Interactive Story ```markdown # Choose Your Adventure: The Mysterious Package You find a mysterious package on your doorstep. What do you do? ## Option A: Open it immediately ::::spoiler{title="Reveal Consequence A" type="hover"} You eagerly tear open the package and find... a beautiful vintage music box! As you wind it up, it plays a haunting melody that seems familiar. Suddenly, you remember - this belonged to your grandmother, who passed away last year. A note inside reads: "For my dearest grandchild, may this bring you as much joy as it brought me." **Emotional impact**: You feel overwhelmed with love and nostalgia. **Item gained**: Grandmother's Music Box **Story continues**: [Go to Chapter 2A] ::::spoilerend ## Option B: Examine it carefully first ||||You notice the package has no return address, but there's a small symbol pressed into the wax seal - a crescent moon. This triggers a memory of an old family legend about mystical gifts that appear when most needed.|||| ## Option C: Call the authorities ::::spoiler{title="Reveal Consequence C" type="click"} You decide to play it safe and call the local police. Officer Martinez arrives within 20 minutes and carefully examines the package. "This is interesting," she says, pointing to the postmark. "This was sent from a town that hasn't existed for 30 years." After a thorough inspection, she determines it's safe to open. Inside you find... **Plot twist**: The story takes a supernatural turn! **Trust gained**: +1 with Local Authorities **Story continues**: [Go to Chapter 2C] ::::spoilerend ``` #### Configuration Examples ```javascript // Gaming/entertainment focused marked.use(markedExtendedSpoiler({ spoilerClass: 'game-spoiler', revealType: 'click', showTitle: true, blurEffect: true, customTitle: '🎮 Game Spoiler' })); // Educational/quiz focused marked.use(markedExtendedSpoiler({ spoilerClass: 'quiz-answer', revealType: 'click', animationDuration: '0.5s', customTitle: '📚 Answer', blurEffect: false })); // Sensitive content warnings marked.use(markedExtendedSpoiler({ spoilerClass: 'content-warning', revealType: 'click', customTitle: '⚠️ Content Warning', showTitle: true, template: customWarningTemplate })); // Auto-reveal for timed content marked.use(markedExtendedSpoiler({ revealType: 'auto', revealDelay: 5000, // 5 seconds animationDuration: '1s', customTitle: '⏰ Timed Reveal' })); ``` ### Spoiler Types The extension supports two main spoiler types: #### 1. **Inline Spoilers** - Quick Reveals Short, inline content hidden with double pipes. ```markdown The password is ||Admin123||. In chemistry, H₂O is ||water||. The capital of France is ||Paris||. ``` **Best for:** - ✅ Short answers - ✅ Single words or phrases - ✅ Quick reveals - ✅ Inline text flow **Features:** - Minimal blur effect - Inline display - Hover or click reveal - Preserves text flow #### 2. **Block Spoilers** - Detailed Content Multi-line content with overlay and reveal effects. ```markdown ::::spoiler{title="Detailed Explanation"} This can contain: - Multiple paragraphs - Lists and formatting - Code blocks - Images and links ::::spoilerend ``` **Best for:** - ✅ Long explanations - ✅ Multiple paragraphs - ✅ Formatted content - ✅ Rich media **Features:** - Full overlay with title - Blur + grayscale effect - Click to reveal - Particle effects - Custom themes ### Available Themes (7 Total) The extension includes 7 pre-built themes for different contexts: | Theme | Color | Best For | Example Use Case | |-------------|--------------|-----------------------------------|-------------------------------| | **default** | Dark Gray | General spoilers | Movie plots, story reveals | | **dark** | Near Black | High contrast | Text-heavy content | | **light** | Light Gray | Bright backgrounds | Light-themed sites | | **danger** | Red | Major spoilers, warnings | Plot twists, sensitive content| | **info** | Blue | Information reveals | Tips, hints, explanations | | **warning** | Yellow | Caution content | Partial spoilers, notes | | **success** | Green | Positive reveals | Achievements, solutions | #### Theme Examples ```markdown ::::spoiler{title="Spoiler"} Standard spoiler overlay ::::spoilerend ::::spoiler{title="Major Spoiler" theme="danger"} Critical plot information ::::spoilerend ::::spoiler{title="Additional Info" theme="info"} Helpful supplementary information ::::spoilerend ::::spoiler{title="Partial Spoiler" theme="warning"} Minor plot detail ::::spoilerend ::::spoiler{title="Solution" theme="success"} Complete answer or solution ::::spoilerend ``` ### Best Practices #### 1. **Use Appropriate Spoiler Types** ```markdown The winner is ||Team Blue||. ::::spoiler{title="Full Strategy"} Detailed multi-paragraph explanation... ::::spoilerend ||This is a very long spoiler with multiple sentences that should really be a block spoiler instead but someone decided to make it inline anyway which makes it hard to read|| ::::spoiler Blue ::::spoilerend ``` #### 2. **Choose Appropriate Themes** ```markdown ::::spoiler{title="Ending Spoiler" theme="danger"} Major plot twist revealed ::::spoilerend ::::spoiler{title="Pro Tip" theme="info"} Useful gameplay advice ::::spoilerend ::::spoiler{title="Tragic Death" theme="success"} Character dies... ::::spoilerend ``` #### 3. **Provide Clear Titles** ```markdown ::::spoiler{title="Act 3 Spoiler"} ::::spoiler{title="Quiz Answer"} ::::spoiler{title="Achievement Guide"} ::::spoiler{title="Click Here"} ::::spoiler{title="Info"} ::::spoiler{title="Spoiler"} ``` #### 4. **Use Subtitles for Context** ```markdown ::::spoiler{title="Boss Strategy" subtitle="Click to reveal winning tactics"} ::::spoilerend ::::spoiler{title="⚠️ Content Warning" subtitle="Contains discussion of sensitive topics"} ::::spoilerend ``` #### 5. **Consider User Experience** ```markdown **Warning: Major spoilers ahead!** ::::spoiler{title="Ending Reveal"} The complete ending explained... ::::spoilerend ::::spoiler Random spoiler with no warning ::::spoilerend ``` ### Use Cases #### 1. **Movie/TV Show Discussion** ```markdown # Breaking Bad Series Finale Discussion ## Initial Reactions The finale was absolutely brilliant! ||Bryan Cranston's performance was Emmy-worthy||. ## Plot Resolution ::::spoiler{title="🎬 Ending Spoiler" theme="danger" subtitle="Major finale spoilers"} Walter White dies at the end, but not before accomplishing his goals: 1. **Saving Jesse**: He frees Jesse from captivity 2. **Providing for family**: The money reaches his family through Gretchen and Elliott 3. **Taking down enemies**: Eliminates the neo-Nazi gang 4. **Final moment**: Dies in the meth lab, surrounded by his "work" The ending is bittersweet - Walter achieves his goals but loses everything that mattered. **Iconic final scenes:** - The machine gun in the trunk - "I did it for me. I liked it. I was good at it." - Jesse's scream of freedom - Walter's final breath in the lab ::::spoilerend ## Character Arcs ### Jesse Pinkman Jesse's journey from ||small-time dealer to traumatized survivor|| represents the show's tragic core. ### Skyler White ::::spoiler{title="Skyler's Fate" theme="info"} Skyler survives but is left to deal with the aftermath of Walt's actions. She cooperates with authorities and attempts to rebuild her life with her children. The final scene between Walt and Skyler is one of the show's most powerful moments. ::::spoilerend ## Easter Eggs Did you notice ||the Stevia packet in the ricin scene||? Brilliant callback! ``` #### 2. **Gaming Walkthrough** ```markdown # The Legend of Zelda: Tears of the Kingdom - Walkthrough ## Main Quest: Regional Phenomena ### Rito Village - Wind Temple **Recommended level**: 20+ **Preparation needed**: ||Cold resistance gear or elixirs|| ::::spoiler{title="🎮 Boss Strategy" theme="success" subtitle="Click for winning tactics"} ## Colgera Battle Strategy **Phase 1: Weak Points** - Target the three ice shields first - Use bow and arrows while gliding - Aim for the glowing cores **Phase 2: Rapid Fire** - Boss becomes more aggressive - Use updrafts to gain height - Multi-shot bows are highly effective **Recommended Items:** - 3-shot bow or better - 50+ arrows - Cold resistance food - Healing items (x5) **Pro Tip**: Save your stamina for critical moments. The battle is more about positioning than button mashing. ::::spoilerend ### Secret Shrine Locations There's a hidden shrine ||behind the waterfall in Zora's Domain||. ::::spoiler{title="🗺️ All Shrine Locations" theme="info"} ## Hebra Region Hidden Shrines 1. **Tabantha Shrine**: ||Coordinates: -2503, -1831|| - Behind the ice wall - Requires fire arrows 2. **Rito Shrine**: ||Coordinates: -3602, 1832|| - Under the snow pile - Use hot spring nearby 3. **Summit Shrine**: ||Coordinates: -3242, 1703|| - On mountain peak - Requires climbing gear **Completion reward**: Ancient Armor Set ::::spoilerend ## Side Quest: The Great Fairy To unlock the fairy fountain, you need to ||collect 1000 rupees and complete the musician's quest||. ``` #### 3. **Educational Quiz** ```markdown # Computer Science Final Exam Study Guide ## Algorithms & Data Structures ### Question 1: Big O Notation What is the time complexity of binary search? ::::spoiler{title="📚 Answer" theme="success" subtitle="Click to reveal solution"} **Answer**: O(log n) **Explanation**: Binary search halves the search space with each iteration, leading to logarithmic time complexity. **Example**: - Array of 16 elements: Max 4 comparisons (16→8→4→2→1) - Array of 1024 elements: Max 10 comparisons **Why it's efficient**: Each comparison eliminates half of the remaining possibilities, making it much faster than linear search O(n) for large datasets. **Code Example**: \`\`\`python def binary_search(arr, target): left, right = 0, len(arr) - 1 while left <= right: mid = (left + right) // 2 if arr[mid] == target: return mid elif arr[mid] < target: left = mid + 1 else: right = mid - 1 return -1 \`\`\` ::::spoilerend ### Question 2: Sorting Algorithms Which sorting algorithm is most efficient for nearly sorted data? Quick answer: ||Insertion Sort|| ::::spoiler{title="Detailed Explanation" theme="info"} **Insertion Sort** performs best on nearly sorted data with O(n) time complexity in the best case. **Why it works well**: 1. Very few elements need to be moved 2. Inner loop terminates early when element is in correct position 3. Minimal overhead compared to other algorithms **Comparison**: | Algorithm | Best Case | Average | Worst Case | |----------------|-----------|---------|------------| | Insertion Sort | O(n) | O(n²) | O(n²) | | Quick Sort | O(n log n)| O(n log n)| O(n²) | | Merge Sort | O(n log n)| O(n log n)| O(n log n)| For nearly sorted data, Insertion Sort often outperforms O(n log n) algorithms due to its simplicity and early termination. ::::spoilerend ``` #### 4. **Recipe with Hidden Tips** ```markdown # Perfect Chocolate Chip Cookies ## Ingredients - 2¼ cups flour - 1 tsp baking soda - 1 tsp salt - 1 cup butter (softened) - ¾ cup sugar - ¾ cup brown sugar - 2 eggs - 2 tsp vanilla - 2 cups chocolate chips ## Secret Ingredient Add ||1 tsp of espresso powder|| to enhance the chocolate flavor without making it taste like coffee! ## Instructions 1. Preheat oven to 375°F 2. Mix dry ingredients 3. Cream butter and sugars 4. Add eggs and vanilla 5. Combine wet and dry 6. Fold in chocolate chips 7. Bake for 9-11 minutes ::::spoiler{title="🍪 Pro Baker Tips" theme="success" subtitle="Click for expert secrets"} ## Professional Secrets **Temperature Tricks**: - Use ||room temperature butter|| (not melted!) - ||Chill dough for 30 minutes|| before baking - Bake at ||375°F for 9 minutes exactly|| for chewy centers **Texture Secrets**: - Replace 2 tablespoons of flour with ||cornstarch|| for softer cookies - Use a mix of ||regular and mini chocolate chips|| for better distribution - ||Underbake slightly|| - cookies continue cooking on the pan **Flavor Enhancements**: - Add ||1 tsp vanilla extract + ½ tsp almond extract|| - Sprinkle with ||sea salt|| before baking - Use ||dark brown sugar|| for deeper molasses flavor **Perfect Shape**: - Use a ||cookie scoop|| for uniform size - ||Bang the pan|| halfway through baking to create those signature wrinkles - Let cool on pan for ||2 minutes|| before transferring **Storage**: - Store with a ||slice of bread|| in the container to keep soft - Freeze dough balls for ||fresh cookies anytime|| - Warm in microwave for ||10 seconds|| to revive day-old cookies ::::spoilerend ## Baker's Notes The key to perfect cookies is ||not overmixing the dough|| after adding flour! ``` ### Troubleshooting #### Spoilers Not Revealing **Problem**: Clicking spoilers doesn't reveal content. **Solutions**: 1. **Import CSS files:** ```javascript import '@fsegurai/marked-extended-spoiler/styles/spoiler.css'; ``` 2. **Check JavaScript errors:** ```javascript // Ensure no conflicts with other scripts console.log('Spoiler loaded'); ``` 3. **Verify syntax:** ```markdown ::::spoiler Content ::::spoilerend ::::spoiler Content ::::spoiler ``` #### Inline Spoilers Not Working **Problem**: Inline spoilers (`||text||`) don't render. **Solution**: ```markdown ||correct|| ✅ || incorrect || ❌ ``` #### Theme Not Applied **Problem**: Custom theme doesn't show. **Solutions**: 1. **Import theme CSS:** ```javascript import '@fsegurai/marked-extended-spoiler/styles/spoiler-theme.css'; ``` 2. **Check theme name:** ```markdown theme="danger" ✅ theme="info" ✅ theme="warning" ✅ theme="red" ❌ ``` #### Blur Effect Not Showing **Problem**: Content not blurred. **Solution**: ```css /* Ensure CSS loaded and not overridden */ .marked-extended-spoiler-block .marked-extended-spoiler-content { filter: blur(16px) grayscale(0.4) !important; } ``` ### Framework Integration #### React Integration ```tsx // SpoilerContent.tsx import { marked } from 'marked'; import markedExtendedSpoiler from '@fsegurai/marked-extended-spoiler'; import '@fsegurai/marked-extended-spoiler/styles/spoiler.css'; import '@fsegurai/marked-extended-spoiler/styles/spoiler-theme.css'; import { useEffect, useState } from 'react'; marked.use(markedExtendedSpoiler({ className: 'marked-extended-spoiler', prefixId: 'spoiler-' })); interface Props { content: string; } export function SpoilerContent({ content }: Props) { const [html, setHtml] = useState(''); useEffect(() => { const parsed = marked.parse(content); setHtml(parsed); }, [content]); return (