bespoke-markdown

Allows you to use (GitHub flavored) Markdown to author your bespoke.js presentation. There are 4 ways to use this plugin and they are described on the demo page.

Download

Download the production version or the development version, or use a package manager.

Usage

There are 3 steps to using this plugin.

1. Including and initializing the plugin
2. Including a stylesheet for code highlighting
3. Authoring the presentation using Markdown

1. Including and initializing the plugin

This plugin is shipped in a UMD format, meaning that it is available as a CommonJS/AMD module or browser global.

For example, when using CommonJS modules:

var bespoke = require('bespoke'),
    markdown = require('bespoke-markdown');
 
bespoke.from('#presentation', [
  markdown()
]);

If using browser globals:

bespoke.from('#presentation', [
  bespoke.plugins.markdown()
]);

2. Stylesheet for code highlighting

If you want code highlighting, you also need to include a stylesheet from highlight.js. One option to include it is via the dependencies of this plugin, as highlight.js is a dependency of bespoke-markdown.

In that case, you can include it by:

<link rel="stylesheet" type="text/css" href="node_modules/bespoke-markdown/node_modules/highlight.js/styles/THEME_NAME.css" />

You can choose any theme from highlight.js and put it instead of THEME_NAME. Some themes are:

• default.css
• monokai_sublime.css
• sublime.css
• github.css

3. Authoring presentation using Markdown

Just by including the plugin code and initializing bespoke with it will allow writing the content of the slides in Markdown. You can use a markup similar to the following:

<article>
  <section>
# Title
This is **markdown content**.
  </section>
</article>

You can also write Markdown content in external files. You can do it for the whole presentation or for specific slides. To mark a slide to be rendered using Markdown, you need to add the data-markdown="path-to-file.md" attribute to the presentation HTML element, like so:

<article data-markdown="presentation.md"></article>

Or, you can add it to specific slides only:

<article>
  <section data-markdown="slide-1.md"></section>
  <section>
    <p>A slide authored in HTML</p>
  </section>
  <section data-markdown="slide-3.md"></section>
</article>

You can split the .md file in multiple slides by using "---" to separate them. For instance, presentation.md:

This is the first slide
---
Second slide
---
And third!

Additionally, you can mix slides authored in HTML and in Markdown. To mark a slide to have its contents rendered as Markdown, we also use the data-markdown attribute, but without a value (or with an empty value, i.e., data-markdown=""). Check the example:

<article>
  <section data-markdown>
    # Title 1
    This is a slide authored in Markdown.
  </section>
  <section data-markdown="">
    # Title 2
    This is also a slide authored in Markdown.
  </section>
  <section>
    <h1>Title 3</h1>
    <p>This is a slide authored in HTML.</p>
  </section>
</article>

Package managers

npm

$ npm install bespoke-markdown

Bower

$ bower install bespoke-markdown

Credits

This plugin was built with generator-bespokeplugin.

License

MIT License