Naive CM5 StreamParser implementation for the Fountain screenplay syntax. (currently abandoned)
Try it out in this live demo!
Use the CodeMirror Language Package Example tutorial as your main reference. The demo directory can be used for your reference as an example implementation.
First, run pnpm prepare
at root directory according to package.json's prepare
script. This runs cm-buildhelper src/fountain.ts
to transpile the Typecsript source code into a /dist
directory.
Then, from the demo directory, run pnpm rollup
according to /demo
's package.json's rollup
script to use rollup to bundle source code, which is like below:
import { syntaxHighlighting } from "@codemirror/language";
import { EditorView, minimalSetup } from "codemirror";
import { fountain, fountainHighlight } from "codemirror-lang-fountain";
let editor = new EditorView({
extensions: [minimalSetup, fountain(), syntaxHighlighting(fountainHighlight)],
parent: document.body,
lineWrapping: true,
});
Finally, import your bundled script in your target html like so!
<!DOCTYPE html>
<meta charset="utf8" />
<head>
<link rel="stylesheet" href="demo/styles.css" />
</head>
<h1>CodeMirror!</h1>
<script src="demo/editor.bundle.js"></script>
It currently attaches formatting tags for the following Fountain syntax tokens:
- Scene Headings
- Character
- Dialogue
- Parenthetical
- Centered Text
- Transition
- Synopsis
- Page Breaks
There's some rudimentary syntax highlighting rules too.
My original purpose was to have syntax highlighting for Fountain in Obsidian's editor. That is why I didn't yet handle markdown formatting, since the purpose was to extend CodeMirror's already-established markdown extension.
Oh, and centered text is kinda broken rn.
My original intent has now shifted strategy to use CodeMirror's Decoration API instead, as a native Obsidian plugin. You may find this project at chuangcaleb/obsidian-live-fountain.
I have therefore abandoned this project and archived it. Feel free to use/modify however you wish!