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

[Bluemoondragon07]

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!

Update! (10-12-2023)

• Added styling for the new Fountain Editor plugin, which formats screenplays live in Edit Mode.
  • Now that this plugin has been introduced, Formatting Helper can work with the Fountain Plugin if the Fountain Editor plugin is also enabled at the same time.
• Styling for more fountain elements, such as synopses and sections (only useable with the Fountain plugin)
• .fountain files viewed with the Fountain plugin now render correctly in reading mode. Editing still isn’t optimal, but we’re getting there!
• New Style Settings option to hide synopses (comments) and sections rendered by the Fountain plugin
• Tried to improve the experimental PDF view. Still not optimal either, but slightly better.

[ariehen]

Does this PRO version have a subscription?

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

[Olondre]

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!

[Bluemoondragon07]

Glad you like it!

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

[I-d-as]

@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.

[Bluemoondragon07]

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

[Chateau]

Absolutely phenomenal. Thank you so much.

[Chateau]

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

[hodgea]

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.

[hodgea]

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.

[Bluemoondragon07]

@hodgea, Have you tried switching to source mode?

[hodgea]

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.

[bonka]

Hi, first post in this forum!

I really appreciate this snippet. I’ve been using the fountain plugin, but found the additional vertical spacing to be less visually pleasing. This snippet fixes that, BUT now I’m left with a new issue, namely that I have a grey margin that is displayed on the right and bottom of the text. And to see those letters hammered against the wall without padding just hurts my eye.

I have tried the snippet this in two different Obsidian vaults, but this grey bar is consistent. As I do not see this in any of the supplied examples, do you have any advice as to how I can I get rid of it?

[Bluemoondragon07]

Those extra features are intended to show up only if they are enabled with Style Settings. Try installing the Style Settings Plugin, enable and disable the Page-like View setting, and reload Obsidian. I think that should fix it.

[bonka]

Hi, @Bluemoondragon07 I tried this already, but it somehow isn’t working for me, so I defaulted back to the extra vertical padding…

[Bluemoondragon07]

New Fountain Plugin!

Hey guys, there is a new Fountain Editor plugin plugin that is the perfect complement to the existing Fountain plugin and possibly this snippet.

Essentially, this plugin styles screenplay elements live in Edit Mode like a real fountain editor. This means we don’t need to use headings for different screenplay elements anymore!

Also, combined with the snippet’s formatting helper (if you update it on Github), we can preview and switch between elements much more quickly! This also means more indicators for different elements, such as synopses, sections, and lyrics.

The only con of the plugin is that it does not render in Reading View, only in Edit Mode. But–we can still use the original Fountain plugin to render in this view!

This Enables a Mega Workflow!

By this I mean, we can write screenplays in Obsidian more conveniently and faster than ever with the Fountain plugin, Fountain Editor plugin, Style Settings, and this snippet.

• We can use the Fountain plugin to render screenplays in fountain codeblocks (or .fountain files). This improves the workflow over md-screenplay css class because it just lets you write with no need to remember which headings are what.
• Now, with the Fountain Editor plugin enabled, using a fountain codeblock does not mean losing the benefit of a live preview. This snippet styles the plugin to display correctly inside code blocks in Edit Mode, therefore making it compatible with the Fountain plugin’s codeblocks. Fountain Editor could also be used by itself, but it only renders in Edit Mode, so we’d be losing the Reading View benefit of the other Fountain plugin.
• With Style Settings and this snippet, we can enable the Formatting Helper to speed up the process and make sure that we are formatting things correctly. Useful especially to new screenwriters.

[belacan]

Hello! Creator of the Fountain Editor plugin here.

It’s really wild to read how excited people are over something you’ve created.

I was going to start writing a Style Settings configuration but you’ve gone and done it already, you madlad.

If you’ll agree, I’d like to work with you to develop Style Settings into the plugin, by default, especially since the majority of screenwriters may not be so technical. We can discuss to shuffle some implementations around so that everything meshes together even better! Send me a message.

Fountain formatting in Preview mode may come later, but is super low priority since I’d basically be ripping off @darakah’s work. And I don’t use Preview myself. It could still happen some time in the future, but it seems this snippet makes it work enough for now.

To everyone else on this thread: come contribute on GitHub, or send me an email at dev@chuangcaleb.com, or @chuangcaleb on Discord! This is my first OSS project, any help is greatly appreciated!

[Cricket742]

Hi, I’ve just tried out this snippet in tandem with the Fountain Editor plug-in, but when I export the file I no longer keep the formatting. Is there a way around this? It’s not problem if there isn’t, I would just have to make a fountain file, copy my work into that file, and use VScode to turn it into a pdf every time I wanted to export.

[yen_le]

This issue is caused by css snippet that adds margin property to heading. You can try to change from margin to padding to see if the issue prevails.