Coder Social home page Coder Social logo

chuangcaleb / obsidian-fountain-editor Goto Github PK

View Code? Open in Web Editor NEW
32.0 3.0 2.0 1.23 MB

Obsidian plugin for formatting Fountain screenplay syntax in the editor

Home Page: https://obsidian.md/plugins?id=fountain-editor

License: MIT License

JavaScript 15.29% TypeScript 44.49% CSS 40.22%
editor fountain fountain-editor fountain-language markdown obsidian obsidian-md obsidian-plugin screenplay storyteller

obsidian-fountain-editor's Introduction

Fountain Editor - Obsidian Plugin

Obsidian plugin for Fountain (screenplay) syntax highlighting in the editor.

banner

๐Ÿ“บ Youtube Demo: Obsidian Fountain - Live Editor (Plugin Showcase)


๐Ÿ”จ Usage

๐Ÿ Quickstart

  1. ๐Ÿ“ฅ Click HERE to open the installation page in Obsidian.
    1. General installation instructions Link โ†’
    2. Manual installation Link โ†’
  2. ๐Ÿ“„ Create a new file and just add cssclasses: fountain to the frontmatter metadata Properties.
  3. ๐ŸŽจ You will get automatic syntax highlighting/styling according to the Fountain syntax rules!
---
cssclasses:
  - fountain
---
# Opening Hook

> THE STINK LINK <

FADE TO:

EXT. PUBLIC RESTROOM - DAY

A POLICE OFFICER steps into a dingy restroom. She winces.

POLICE OFFICER (V.O.)
I *smell* a rat...

= Use Fountain's Synopsis to escape into [[regular markdown]]! #so-cool

๐Ÿ’ฟ Manual Installation

  1. ๐Ÿ†• You may install directly with BRAT using the link of this repo (https://github.com/chuangcaleb/obsidian-fountain-editor).
  2. ๐Ÿ“ค You can also go to the repo's Latest Releases page and manually download the obsidian-fountain-editor-[version].zip file, then extract it into your .obsidian/plugin directory!

๐Ÿ“ข Notice

  1. ๐ŸŽ‰ We're past functional MVP v1.0.0! You may start using this plugin professionally and safely. Just keep in mind that there are still pending optimizations and incomplete features.
  2. ๐Ÿ›Ÿ That said, this plugin should only extend your view & should never modify any local files! Worst case scenario if something breaks, just force restart your Obsidian or manually remove this plugin from your community-plugins.json list.

๐ŸŽฏ Goals

๐Ÿ“

Make Obsidian a competitive option among Fountain writing editors.

๐Ÿ”— The main selling point is to be able to connect/link/annotate your helper notes directly with your screenplay, at the exact location where you referenced it, by allowing Markdown links/tags/extended syntax.
๐Ÿคž The 2nd selling point is to integrate the Fountain screenwriting workflow with all of Obsidian's ecosystem that fosters idea-exploration and knowledge-management (Plus, psssst, it's FREE).
๐Ÿงฉ In a similar vein, certain Obsidian plugins can add sorely missing features in your Fountain screenplay writing workflow. The chief missing jigsaw piece that bothers me is that Fountain requires all your content in a single file โ€” which can get tedious when you have 120+ pages. There's an Obsidian plugin solution for this, and likely one for any problem.
๐Ÿ”Ž Competition does not mean lack of cooperation! As explained in our design principle of scope, this plugin will try to not do double-work if possible, and will try to outsource/handover features to other Synergistic Tools!

โœจ Features

  • ๐ŸŽจ Get Fountain syntax highlighting in Editing View (Source mode or Live Preview)!
  • โœ… Specify which individual notes get Fountain styling with cssclasses: fountain in your frontmatter (opt-in basis, subject to change)
  • ๐Ÿ› Enjoy extended Obsidian syntax where possible โ€” bring your regular Obsidian markdown, tools, plugins, and workflow!
    • ๐Ÿงฐ Leverage Obsidian!Markdown: Use Links, Tags, Embedded Notes / Images / Audio, Graph...
    • ๐Ÿ›๏ธ Feel at home: Fountain's Section and Emphasis syntax don't add new styles โ€” which means they'll look like familiar Obsidian Headings and inline text styles!
    • ๐Ÿช“ Opt-out into regular Obsidian!Markdown syntax highlighting with Fountain's Synopsis token!
  • ๐Ÿค Combine with your favorite Obsidian community plugins like Longform!
  • ๐Ÿ”ง Fine-tune the styling using CSS variables with the format --fountain--*... see base.css for the exposed CSS variables!
  • ๐Ÿง‘โ€๐Ÿ’ป Hack in missing features โ€” with Obsidian's open-contribution development, there'll be no more "it would've been perfect, if only they had x feature"!

๐Ÿ“– See Design Guidelines to understand our implementation!


๐Ÿค Synergistic Tools

๐Ÿ“– Explore Synergistic Tools for details on how they work together with this plugin!


๐Ÿ’ Contributing

๐Ÿ‘€ Overview

๐Ÿ˜Ž Don't know how to code? You can contribute

  • ๐Ÿชฒ Report bugs on the Issue tab!
  • ๐Ÿ“ฃ Share (the link to) this plugin around on forums and channels and with your friends!
    • ๐ŸŒŸ Star this repo to receive updates & help raise awareness โ€” if this project has been worth one button click to you!
  • ๐Ÿ—ฃ๏ธ Engage with others in the Discussions tab!
  • โœ๐Ÿผ Create a screenplay project using this plugin!
    • ๐Ÿ“ธ Showcase your work of how you took advantage of mixing the best of Fountain + Obsidian. Then I can reuse your examples in promotions, and maybe get inspiration for new features too! hehe
  • ๐ŸŽจ You can find a link to the Figma design file for the icon here!

๐Ÿค“ Know how to code? You can contribute too

  • ๐Ÿ”€ Open a Pull Request! Focus on critical bugs and priority features first.
  • ๐Ÿชฒ Report a bug โ€” but with your specialized technical diagnosis!
  • ๐Ÿซฑ Send some advice! Not just a first-time Obsidian plugin dev, but my first public community project.

๐Ÿ’ See Contributing for proper technical details!

๐Ÿค™ Contact

The General - Discussions tab is a neat place you can just tag me in, because you also invite anyone from the community to join in the conversation! It's also better for keeping the context scoped within this project/repo.

If you want a more personal DM'ing (or just to send a private note of thanks!), you can reach me on Discord#chuangcaleb! You can also reach out by email to [email protected]!


๐Ÿ”ƒ Related Projects

  • Darakah/obsidian-fountain: Obsidian plugin to edit, write and render Fountain Writing Syntax for screenplays and scripts
    • Formats Fountain syntax, just like this plugin
    • But for preview mode only, and must be wrapped in a code block
    • 2.5 years+ old project
  • chuangcaleb/ffluent: CLI to bundle atomic Fountain screenplay files
    • My attempt to replicate longform but for Fountain files, as a CLI.
    • Uses a json/yaml file at each folder directory to configure a custom sequence! So you can have complex folder organization structures
    • Marked as abandoned since this project, but it may be of interest to you!
  • Highland 2
    • Made by the creator of Fountain.
    • Features its own text editor app, WYSIWYG, "Revision Mode" and analysis tools.
    • Since everything is wrapped in a nice bow, it's probably the best Fountain-writing app if you're not technical.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.