PRO Screenwriting Snippet - Write Screenplays in Markdown, Fountain Plugin Styling, Canvas Index Cards, and Well-Formatted Export

This is Version 2 of another Screenwriting CSS snippet I made a while ago. This snippet will allow you to write a well-formatted screenplay in markdown, using native markdown elements. It also includes styling for the Fountain plugin, formats PDF exports, and includes “index cards” classes for canvas that will enable you to flexibly plot your screenplay.

The main purpose of the styling is to format the screenplay according to professional standards as closely as possible, both while writing and on export (See comparison to Celtx and an official screenplay below).

Style Settings plugin is heavily recommended to use all features!

Here is a list of features:

  • Styling of the Fountain plugin by Darakah
    • Includes styling for PDF Export
  • CSS classes for Canvas “Index Cards”
    • index-cards class
    • color-outline class
    • positive class
    • negative class
  • New md-screenplay class for Markdown screenplays
    • Element Syntax Colors - color different screenplay elements while editing
    • Formatting Helper - Show text indicating the current screenplay element as you write.
  • Optimized PDF Export

Write Screenplays in Markdown

Use the CSS class md-screenplay to write a screenplay in Markdown.

A Note for Those who Used the Previous Snippet!
The class screenplay also has partial support, but it will cause issues if the fountain plugin, which also uses this class, is installed. It also has slightly fewer style adjustments than md-screenplay and will not export optimally. Please try to exclusively use md-screenplay for Markdown screenplays.

With this class, level 1 headings become scene headings, level 2 headings become characters names, horizontal rules become page breaks (on PDF export), etc.

In addition to viewing the syntax below, you can turn on Formatting Helper in Style Settings for help while writing.

Markdown Element Screenplay Element
H1 Scene Heading
H2 Character Name
H3 Parenthetical
H4 Transition
H5 Act
Mark (highlight) Underline
Horizontal Rule Page Break (PDF Export)
Paragraphs Auto-formatted; Action lines or Dialogue

Writing Screenplays with Fountain

The snippet styles the fountain screenplay to render more accurately to what a typical screenwriting software would show. The screenplay depicted is Columbia Pictures’ “Big Fish”.

The snippet also formats and fixes some appearance issues with the plugin’s .fountain editor.

Index Cards in Canvas

Turn your canvas into a board of index cards by adding the css class index-cards to any card.

There are also three additional classes that can be used with index-cards:

  • color-outline - Add to any note in the canvas to apply card colors as outlines instead of coloring the whole card background.
  • positive and negative classes - Gives a card a green or red outline respectively.

PDF Export

above: Markdown screenplay export from Obsidian

above: screenplay export from Celtx

PDF exports are styled to match standard formatting as closely as possible. Dialogue isn’t perfect, but action lines are nearly identical and margins are correct. Exporting a note with a fountain code block resulted in a 119-page PDF while an export from Celtx produced 120 pages. Pretty close!

Official Screenplay Comparison

Compare the official PDF of Big Fish to an export from Obsidian (using the fountain codeblock).

Big Fish (official) PDF | Big Fish exported from Obsidian (I recommend you view this in Chrome)

Get the Snippet

Get the CSS snippet here!

10 Likes

Does this PRO version have a subscription? :laughing:

Well done… again! Will give it a spin in a bit.

2 Likes

Absolutely incredible work once again @Bluemoondragon07.
As someone who does not use the fountain plugin, the md-screenplay snippet is a beautiful evolution of your first screenplay snippet.


I’ve found two small errors:

Style settings:

        id: strip-styling
        title: Strip Special Styling
        description: By default, scene headings, character names, and underlines are bolded, and parentheticals are italicized in screenplay notes. This is not standard for a screenplay. With this setting you can remove such formatting.
        type: class-select
        default: export-only
        options:
            -
                label: None
                value: none
            -
                label: Export Only
                value: strip-export
            -
                label: All
                value: strip-all

The default should be strip-export not export-only

&

Canvas Index-Cards:
The positive & negative css needs an !important for the border in my clean vault.


I’ve no excuse to NOT write now, this is frictionless. Thank you so much for all of your work!

Glad you like it!

And thank you for pointing me to the errors; I fixed them in Github.

2 Likes

@Bluemoondragon07 Thanks for this cool snippet!

I was wondering whether this would work for scripts that are a collection of embeds? Of course the embedded content would follow the required syntax.

As long as the embedded files have the correct CSS class or codeblock, they will appear in the right format :smiley:

2 Likes

Absolutely phenomenal. Thank you so much.

1 Like

Are you using embeds to compile various scenes in one document? How are you embedding each scene?

This is fantastic. Thank you so much for sharing!!!
Obsidian was so close to being an everything tool for me but the lack of a clean implementation for screenwriting was holding me back. Now, this is perfect.

1 Like

I’m facing a small problem with the pages of md-screenplay. When I click on the last few lines of a page, the cursor is placed at the end of the document instead of the spot I clicked. I have tried both the default and minimal themes, but the issue persists.
Screen Recording 2023-08-31 at 1.27.44 pm

@hodgea, Have you tried switching to source mode?

Same problem with source mode unfortunately! Not a big problem as it’s only with the last few lines of the script, but can be interfere with quick edits when writing.