Movie Script Format

This feature allows you to format dialogue sections in your blog posts to look like movie scripts, with character names, dialogue, stage directions, and scene headings.

Usage

Method 1: Simple HTML with Capture Block (Recommended)

<div class="script-container">
  
<div class="script-scene">SCENE 1 - INT. LIVING ROOM - DAY</div>

<div class="script-direction">Jenny opens a package containing a new health monitor device.</div>

<div class="script-character">JENNY</div>
<div class="script-dialogue">Yay it's here!</div>

<div class="script-character">FELIX, the AI assistant</div>
<div class="script-dialogue">I see there's a new model 88 heart rate/blood pressure monitor nearby. Would you like me to set it up?</div>

<div class="script-character">JENNY</div>
<div class="script-dialogue">yes.</div>

</div> 

Method 2: Advanced Include with Parameters

<div class="script-container light-theme">
  
    <div class="script-scene">SCENE 1 - INT. LIVING ROOM - DAY</div>
  
  
  
    <div class="script-direction">Jenny opens a package containing a new health monitor device.</div>
  
  
  
    
    
      
      
    
      
      
        
          
          
          
          
          
            <div class="script-character">JENNY</div>
            <div class="script-dialogue">Yay it's here!</div>
          
        
      
    
      
      
        
          
          
          
          
          
            <div class="script-character">FELIX</div>
            <div class="script-dialogue">I see there's a new model 88 heart rate/blood pressure monitor nearby.</div>
          
        
      
    
      
      
        
          
          
          
          
          
            <div class="script-character">JENNY</div>
            <div class="script-dialogue">yes.</div>
          
        
      
    
      
      
        
          <div class="script-dialogue">   </div>
        
      
    
  
  
  
</div> 

Available CSS Classes

.script-container

The main container for the script. Automatically includes:

• Monospace font (Courier New)
• Light gray background with border
• Padding and margins
• Dark mode support

.script-scene

Scene headings (e.g., “SCENE 1 - INT. LIVING ROOM - DAY”)

• Bold, uppercase text
• Smaller font size
• Bottom border
• Letter spacing

.script-character

Character names

• Bold, uppercase text
• Blue color (dark blue in light mode, light blue in dark mode)
• Letter spacing
• Smaller font size

.script-dialogue

Character dialogue

• Normal font style
• Indented from character name
• Standard text color

.script-direction

Stage directions

• Italic text
• Gray color
• Left border accent
• Used for describing actions, settings, etc.

.script-parenthetical

Character actions or emotions in parentheses

• Italic text
• Indented further than dialogue
• Smaller font size
• Used for “(sighs)”, “(excited)”, etc.

Theme Options

You can specify a theme for the script container:

• theme="light" - Forces light theme
• theme="dark" - Forces dark theme
• theme="auto" - Automatically adapts to user’s preference (default)

Examples

Basic Dialogue

<div class="script-container">
  
<div class="script-character">ALICE</div>
<div class="script-dialogue">Hello, how are you today?</div>

<div class="script-character">BOB</div>
<div class="script-dialogue">I'm doing well, thank you!</div>

</div> 

With Scene and Directions

<div class="script-container">
  
<div class="script-scene">SCENE 3 - EXT. PARK - SUNSET</div>

<div class="script-direction">Alice and Bob walk through a beautiful park as the sun sets.</div>

<div class="script-character">ALICE</div>
<div class="script-parenthetical">(looking at the sunset)</div>
<div class="script-dialogue">It's so beautiful here.</div>

<div class="script-character">BOB</div>
<div class="script-dialogue">Yes, it really is.</div>

</div> 

Complex Scene with Multiple Elements

<div class="script-container">
  
<div class="script-scene">SCENE 4 - INT. OFFICE - NIGHT</div>

<div class="script-direction">A tense meeting in a dimly lit office. Papers are scattered across the table.</div>

<div class="script-character">MANAGER</div>
<div class="script-parenthetical">(slamming fist on table)</div>
<div class="script-dialogue">This is unacceptable!</div>

<div class="script-character">EMPLOYEE</div>
<div class="script-parenthetical">(nervously)</div>
<div class="script-dialogue">I understand your concern, sir.</div>

<div class="script-direction">The manager takes a deep breath and sits back down.</div>

<div class="script-character">MANAGER</div>
<div class="script-dialogue">Let's find a solution together.</div>

</div> 

Responsive Design

The script format automatically adapts to different screen sizes:

• On mobile devices, padding and margins are reduced
• Font sizes are slightly smaller on mobile
• Indentation is reduced for better mobile readability

Dark Mode Support

The script format automatically supports dark mode:

• Background colors adapt to light/dark themes
• Text colors adjust for optimal contrast
• Borders and accents change appropriately

Tips for Best Results

1. Use consistent character names - Keep character names in the same format throughout
2. Keep dialogue concise - Long dialogue lines can be hard to read
3. Use parentheticals sparingly - They’re most effective when used to convey emotion or action
4. Scene headings are optional - Only use them when they add value to the story
5. Stage directions should be descriptive - Help readers visualize the scene

Customization

You can customize the appearance by modifying the CSS classes in _sass/my-style.scss. The script styling is located at the end of the file and includes:

• Color schemes for light and dark modes
• Typography settings
• Spacing and layout
• Responsive breakpoints