Skip to content

starvingindie/Ficdown.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ficdown.js

Ficdown is a system for building interactive fiction using MarkDown syntax, and Ficdown.js is a Javascript library for presenting Ficdown stories interactively in a web browser. See Ficdown.com for more information.

Dependencies

Ficdown.js uses jQuery for DOM manipulation and PageDown to convert MarkDown into HTML.

Usage

You can obtain ficdown.js or ficdown.min.js from the latest version on the releases page. Assuming you've uploaded it to your web server along with a Ficdown story file named story.md, your HTML document would look something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Ficdown Story</title>
  </head>
  <body>
    <!-- This container will be used by Ficdown.js to present the story -->
    <div id="main"></div>

    <!-- include Ficdown.js dependencies from CDNs -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Sanitizer.min.js"></script>

    <!-- include locally hosted Ficdown.js -->
    <script src="ficdown.min.js"></script>

    <script>
      // retrieve the Ficdown source file story.md via ajax
      $.get('story.md', function(data){

        // after retrieving the file, parse it
        story = parseText(data);

        // after parsing the story, load it into the div with id='main'
        player = new Player(story, 'main');
        player.play();

      }, 'text');
    </script>
  </body>
</html>

You will probably want to do some styling to make the story look better. For an example stylesheet, see the example included in the Ficdown.js repository at /src/example/player.styl.

About

Ficdown parser and runner in Javascript

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CoffeeScript 78.6%
  • HTML 16.0%
  • CSS 5.4%