Javascrip parser and runner for Ficdown.

Go to file

Rudis Muiznieks 9869d8b7e3 updated readme docs		2015-07-26 14:38:27 -05:00
src	fixed references to story in player	2014-11-23 16:37:01 -06:00
.gitignore	updated empty list item regex (fixes #1 ); added internal scene id to player (fixes #2 )	2014-07-02 15:51:21 -05:00
Gruntfile.coffee	updated empty list item regex (fixes #1 ); added internal scene id to player (fixes #2 )	2014-07-02 15:51:21 -05:00
README.md	updated readme docs	2015-07-26 14:38:27 -05:00
package.json	set version to 0.9	2015-07-26 14:08:19 -05:00

README.md

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.