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”
md-screenplayclass 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
Use the CSS class
md-screenplay to write a screenplay in Markdown.
A Note for Those who Used the Previous Snippet!
screenplayalso 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-screenplayand will not export optimally. Please try to exclusively use
md-screenplayfor 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|
|Horizontal Rule||Page Break (PDF Export)|
|Paragraphs||Auto-formatted; Action lines or Dialogue|
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
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
color-outline- Add to any note in the canvas to apply card colors as outlines instead of coloring the whole card background.
negativeclasses - Gives a card a green or red outline respectively.
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!
Compare the official PDF of Big Fish to an export from Obsidian (using the fountain codeblock).
Get the CSS snippet here!