Strapdown.js - Instant and elegant Markdown documents

# Strapdown

Strapdown makes it embarrassingly simple to create elegant Markdown documents. **No server-side compilation required.** Use it to quickly document your projects, create tutorials, home pages, etc.

Strapdown is also available as a jQuery plugin to easily add it to your existing pages.

(For example, the page you are reading was generated by Strapdown).

**Simply copy the HTML template below and drop it on any static file server**

```html
<!DOCTYPE html>
<html>
<title>Hello Strapdown</title>

<xmp style="display:none;" toc>
# Markdown text goes in here

## Chapter 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.

## Chapter 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</xmp>

# Features

+ Search-engine friendly
+ Github-flavored Markdown (tables, syntax highlighting, etc)
+ Themeable
+ Automatic table of contents
+ Available as a jQuery plugin for more control

## Table of content

For bigger documents, having a table of contents can greatly help with navigation. Just add the attribute `toc` to the `xmp` tag, and watch the magic!

### Options

Here are the current options you can change from the html tag:

- **toc-top-link** - includes a link to navigate back to the top of the page in the table of content. By default, it's named "Back to top",but you can change that label by passing a value to the attribute.

## Self-hosting

For convenience the library is hosted at `ndossougbete.github.io`  (as in the source above), but if you prefer to host it yourself make sure to save all files contained in `/v/<version_number>`, as the library dynamically loads all necessary stylesheets, etc.

## jQuery plugin

- **$(element).strapdown(options)** - Runs Strapdown on the given element.

If **element** is `document` or `body`, Strapdown is going to look for a `xmp` or `textarea` tag in the document. Else, the provided element's content is going to be used. The element's content will be parsed as markdown.

**options** is an object used to configure the run. The following properties are used:

```
  {
    importCss: BOOLEAN,        /* if truthy, strapdown's css file will be imported (looking at the same path
                                * as the imported js.) (Default: false)*/

dest: STRING,              /* Selector of the tag whose content is to be remplaced by the parsed markdown.
                                * If there is no corresponding tag, the element used as source will be
                                * replaced.*/

navbar: {                  /* Set falsy to disable navbar generation (Defaults: false)*/

title: STRING            /* Used as brand name on the navbar. If absent, the content of the title tag
                                * will be used.*/
    },

toc: {                     /* Set falsy to disable toc generation (Defaults: false)*/

disabled: BOOLEAN        /* Set truthy to disable toc generation (Defaults: undefined) */

dest: STRING,            /* Selector of the tag whose content is to be replaced by the table of content.
                                * When the navbar is generated, a `.toc` element will be used by default.*/

topLink: STRING|BOOLEAN, /* If false, no link will be generated. If true, the label will be
                                * 'Back to top'. Else, the provided value will be used as label.*/

scrollspy: BOOLEAN       /* If true, a twbs scrollspy will be added on body, using toc.dest as target*/

scrollspyOffset: NUMBER, /* Number of pixels to offset the scrollspy. (passed to the twbs scrollspy
                                * options as the offset attribute.)*/
    },
  }
  ```

Some options can also be set directly on the **element** as HTML attributes. They will be overriden by the **options** object provided to the
  function. The supported attributes are:

- **toc** - enables the generation of the table of contents.

- **$(element).strapdown('toc', options)** - Creates a table of content for the given element. **element** and options are exactly the same as for the first method.

## Limitations

It's an unlikely scenario, but since Strapdown uses the `<xmp>` tag to wrap your Markdown (so that users don't have to escape special HTML characters), your text can't contain the string `</xmp>`.

There is currently no way to force the table of content to use user-specified ids. The ids used are currently obtained by replacing whitespace and special characters in the title by '-'. You still can put your own anchors and link to them:

```

## <a id="myAnchor"></a> My Title
```

# Downloads, sources and other demos

+ [Downloads (todo)](https://github.com/ndossougbe/strapdown/releases)
+ [Sources on GitHub](https://github.com/ndossougbe/strapdown)
+ Demos
  - [Syntax examples](demos/markdown_syntax.html). Look at the source to see the syntax used.
  - [Bigger example for the table of contents](demos/toc_demo.html)
  - [Usage as a jQuery plugin](demos/plugin_demo.html)

# Credits

All credit goes to the projects below that make up most of Strapdown.js:

+ [Strapdown](http://strapdownjs.com) - Original strapdown by [r2r](http://twitter.com/r2r)
+ [Marked](https://github.com/chjj/marked/) - Fast Markdown parser in JavaScript
+ [Google Code Prettify](http://code.google.com/p/google-code-prettify/) - Syntax highlighting in JavaScript
+ [jQuery](http://jquery.com) - Changes the way you write Javascript
+ [Twitter Bootstrap](http://getbootstrap.com/) - Beautiful, responsive CSS framework
+ [Bootswatch](http://bootswatch.com) - Additional Bootstrap themes