Quick and easy way to write a slides presentation

slides.md

Building Slides In Markdown

By Henry Blyth

Uses Markdown Preview by @revolunet, and the fantastic Gistdeck by @nzoschke and @seaofclouds.

Things you need

• Sublime Text 2 (ST2)
• Markdown Preview ST2 package, my custom fork

Want a nicer environment in which to write Markdown?

Install these Sublime extras. The package manager is an absolute must for ST2 regardless!

• ST2 Package Control package manager
• MarkdownEditing ST2 package (to make writing Markdown in Sublime more... sublime)
  • cmd + shift + p
  • Type "MarkdownEditing"
  • Select the package and hit Enter

What to do

Setup packages

• Install what you need from above apart from Markdown Preview
• Find your Package installation folder
  • OSX should be: ~/Library/Application\ Support/Sublime\ Text\ 2/Packages
• Clone my fork of Markdown Preview into ST2's package installation folder
  • git clone git://github.com/henrahmagix/sublimetext-markdown-preview.git MY_ST2_DIR/Markdown\ Preview
  • This installs the package much like Package Control would
  • cd to the directory and git checkout use-gistdeck-with-incuna-styles
  • I have pushed my update to include Javascript files to @revolunet, and it is now a feature. However, my custom fork is still needed since it includes gistdeck.js and a CSS template for you to use.

Setup Markdown Preview

• Open your user settings for Markdown Preview
  • Sublime Text 2 -> Preferences -> Package Settings -> Markdown Preview -> Settings – User
  • Or create a new file at ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/User/MarkdownPreview.sublime-settings
• Add locations, online or offline, to JS and CSS files

MarkdownPreview.sublime-settings

The settings file is JSON. The parser and css properties are strings, and the js property is an array of strings.

Both js and css are locations that become href values of <script> and <link> tags, respectively.

parser can be either default (uses a Python markdown renderer) or github (uses the GitHub service). Using GitHub allows the syntax-highlighting shown below. It also then uses the github.css file if you don't specify your own.

My settings file

Keep the js settings, except change the username henry in the second string to your own. (Unfortunately, using tilde ~/Library/... doesn't work, and you'll have to do change it for Windows or Linux.) Then set the css string to your own styles file. Use incuna.css as a template (however it has some cruft from being used on gists.github.com.)

{
    "parser": "github",
    "js": [
        "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js",
        "/Users/henry/Library/Application Support/Sublime Text 2/Packages/Markdown Preview/gistdeck.js"
    ],
    "css": "/Users/henry/Library/Application Support/Sublime Text 2/Packages/Markdown Preview/incuna.css"
}

Get writing!

• Write some Markdown and save the file with extension .md
• Hit alt + m to open in your default browser (switch it to Safari for the meantime if it's not already)
• Use left and right to navigate through the slides

Safari will allow cross-origin requests from the file:// protocol and should therefore show your custom styles and allow you to present. I then saved the page with all files included so I wouldn't have to rely on the internet or a particular browser setup. Worked a treat!

Questions?

Comment below if viewing on GitHub Gists, otherwise you can find contact details here on GitHub.