Giter VIP home page Giter VIP logo

slidedeck's Introduction

Slidedeck: HTML5 Slideshows in markdown

PyPI Version Downloads

Overview

This is a repackaging of the google io 2012 slidedeck, with some modifications, to be a little easier to use and more suitable for scientific presentations.

We've made a few changes:

  • You edit and author your entire presentation in markdown.
  • All the metadata about your project is set within the markdown file, including things like the title and author.
  • It's packaged as a python project.
    • You run slidedeck create to make a new deck. This will create a new directory with your project. In particular, there will be a fine in there called slides.md that contains the markdown source for your slides.
    • slidedeck render will render your deck from markdown to html5.
    • slidedeck watch will watch your project and rerender the slides whenever you change the content (useful for iterative development).
  • I made a few stylistic changes to the css, including changing the font size.
  • The slides can contain LaTeX, which is rendered via mathjax.
  • There are no google logos all over the place

Getting started

slidedeck can be installed with pip.

$ pip install slidedeck

Create a new project, complete with some template slides, the css, and the javascript.

$ slidedeck create my_slides

Look in there for the slides.md file, and edit it to your liking. When you want to see your work, compile the slides from markdown into HTML.

$ slidedeck render

You can also have the HTML auto-compiled from markdown, any time the files change on disk.

$ slidedeck watch

If you're curious about how any of these commands work, pass the -h flag to the command line executable,

$ slidedeck -h
$ slidedeck create -h

Tricks

slidedeck watch works nicely with the tincr extension for chrome, which will refresh your browser every time the html files its serving are changed on disk.

Adding molecules with JSmol

If you have internet access, you can add a molecule to your slides by using

<script type="text/javascript" src="http://chemapps.stolaf.edu/jmol/jmol.php?pdbid=1A9U&inline&script=cartoon only"></script>

more options are explained here.

For an offline version, you need a local copy of JSmol.min.js, and j2s (see the JSmol wiki).

Then add the following to the header of base.html

<script type="text/javascript" src="JSmol.min.js"></script>
<script type="text/javascript">
    var Info = {
        height: 500,
        width: 500,
        use: "HTML5"
    };
</script>

And insert

<script type="text/javascript">
  jmolApplet0 = Jmol.getApplet("jmolApplet0", Info);
  Jmol.script(jmolApplet0,"background white; load 1A9U.pdb; cartoon only;")
</script>

in the slide where you want the molecule to appear.

Examples

Below are some examples of slides using this deck.

https://rawgit.com/kyleabeauchamp/BPS2015/master/index.html

https://rawgit.com/kyleabeauchamp/DefenseSlides/master/index.html

http://rawgit.com/kyleabeauchamp/MSMBuilderTalk/master/index.html

License

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
  TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

0. You just DO WHAT THE FUCK YOU WANT TO.

slidedeck's People

Contributors

bastelflp avatar ihaque avatar kyleabeauchamp avatar rjw57 avatar rmcgibbo avatar sauloperez avatar sunpowered avatar wes-brooks avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

slidedeck's Issues

slidedeck installed from pip missing `data` directory

Operating system

Ubuntu Server 13.10

Installation method

sudo aptitude install python-pip
sudo pip install jinja2 markdown watchdog
sudo pip install slidedeck

Problem

Running slidedeck create lightning-talk-jison yields the following error:

Traceback (most recent call last):
  File "/usr/local/bin/slidedeck", line 75, in <module>
    main()
  File "/usr/local/bin/slidedeck", line 65, in main
    create.create_project(args.path)
  File "/usr/local/lib/python2.7/dist-packages/slidedeck/create.py", line 24, in create_project
    shutil.copytree(data_dir, directory, ignore=callback)
  File "/usr/lib/python2.7/shutil.py", line 171, in copytree
    names = os.listdir(src)
OSError: [Errno 2] No such file or directory: '/usr/local/lib/python2.7/dist-packages/slidedeck/data'

Workaround

Cloning the GitHub repo and running setup.py as instructed installed correctly, but as far as I can tell there's no way to uninstall using that script.

Should `watch` also `render`?

If you watch something, you could still be sitting on an obsolete version of slides, because the markdown doesn't actually change.

Does it make sense for watch to first render the latest version of the slides?

Matrices

Is it possible to display latex matrices? To me, it's not obvious if this is possible because of the way the $$ parsing occurs.

Problem: Tables not supported

Example Markup used:

---
title: Wishbone vs. Furcula Bus
subtitle: Intel-style vs. Motorola-style Bus

How Wishbone Byte Lanes Work

|Lane          |Byte 0|Byte 1|Byte 2|Byte 3|HWord 0|HWord 1|Word |
|:------------:|:----:|:----:|:----:|:----:|:-----:|:-----:|:---:|
|DAT\_IO[7:0]  |   X  |      |      |      |   X   |       |  X  |
|DAT\_IO[15:8] |      |   X  |      |      |   X   |       |  X  |
|DAT\_IO[23:16]|      |      |   X  |      |       |   X   |  X  |
|DAT\_IO[31:24]|      |      |      |   X  |       |   X   |  X  |

Results in a slide which is garbled (copied from actual rendered page in web browser):

Wishbone vs. Furcula Bus
Intel-style vs. Motorola-style Bus

How Wishbone Byte Lanes Work

|Lane |Byte 0|Byte 1|Byte 2|Byte 3|HWord 0|HWord 1|Word | |:------------:|:----:|:----:|:----:|:----:|:-----:|:-----:|:---:| |DAT_IO[7:0] | X | | | | X | | X | |DAT_IO[15:8] | | X | | | X | | X | |DAT_IO[23:16]| | | X | | | X | X | |DAT_IO[31:24]| | | | X | | X | X |

Because of this, I must now render tables as images, which is inconvenient and somewhat wasteful. Is there any other work-around to this?

Doesnt render scss to css

In the google slide deck, you have to use ruby's compose to render the scss files to css. I was hoping slidedeck watch would render the css as well, but it does not

Custom Screen Resolution

Is there an easy way to change the resolution of the canvas? IE can I make the slides bigger?

slidedeck command not found

Hi, I install slidedeck with above steps on Ubuntu 14, but slidedeck is not recognized as a command. Do I miss something? My python is 2.7.11+

Follow up to #34: AttributeError: 'ArgumentParser' object has no attribute 'process_slides'

Thanks for the quick response. I updated and ran "slidedeck render" with the result below:

Traceback (most recent call last):
File "C:\Python27\lib\runpy.py", line 162, in run_module_as_main
"main", fname, loader, pkg_name)
File "C:\Python27\lib\runpy.py", line 72, in run_code
exec code in run_globals
File "C:\Python27\Scripts\slidedeck.exe__main
.py", line 9, in <mo
File "C:\Python27\lib\site-packages\slidedeck\scripts\slidedeck.py",
in main
render.process_slides(args.markdown, args.output, args.template)
AttributeError: 'ArgumentParser' object has no attribute 'process_slides'

UnicodeDecodeError

Error precipitated by having "Perû" on slide instead of "Perú"

WIndows 7 64 bit.
Do not know document encoding. Which document? slides.md - just a simple text document. Let me know how to see the encoding.

This error does not occur on a Mac (using French).

Traceback (most recent call last):
File "C:\Python27\lib\runpy.py", line 162, in _run_module_as_main
   "__main__", fname, loader, pkg_name)
 File "C:\Python27\lib\runpy.py", line 72, in _run_code
   exec code in run_globals
 File "C:\Python27\Scripts\slidedeck.exe\__main__.py", line 9, in <module>
 File "C:\Python27\lib\site-packages\slidedeck\scripts\slidedeck.py", line 67, in main
   render.process_slides(args.markdown, args.output, args.template)
 File "C:\Python27\lib\site-packages\slidedeck\render.py", line 77, in process_slides
   md = codecs.open(markdown_fn, encoding='utf8').read()
 File "C:\Python27\lib\codecs.py", line 671, in read
   return self.reader.read(size)
 File "C:\Python27\lib\codecs.py", line 477, in read
   newchars, decodedbytes = self.decode(data, self.errors)
UnicodeDecodeError: 'utf8' codec can't decode byte 0xfa in position 1385: invalid start byte

Advertise this shit

Seriously, I think this is pretty much production ready. You should ping Eric Bidelman at some point.

TypeError: document.body is null

The slides don't seem to work for me. I created a project, rendered, and used firefox index.html.

Firefox seems to find an error at line 664 of slide-deck.js, so I wonder if that's it.

Improved horizontal spacing / Alignment Tools

Right now, I've been doing some horizontal spacing via

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

There might be more friendly ways to do this, but I'm not sure. I could use tables or tabs, for example, but I think that's frowned upon in the community.

Youtube IFrame

I was having difficulty getting embedded youtube iframes. I think this is probably the preferred way to handle most videos, so it would be good for these to work.

<iframe data-src="http://www.slashdot.com">
</iframe>

<iframe data-src="http://www.google.com">
</iframe>

<iframe width="640" height="385" src="http://www.youtube.com/embed/T0w7thr_d04?html5=1"></iframe>

https://developers.google.com/youtube/iframe_api_reference#Examples

The top iframe works, but the bottom two do not. For the google example, this is because Google has a "no-iframe" security feature. I've also tried setting the HTML5 tag. This makes the youtube page appear, but disappear after clicking play.

PS: I don't expect you to solve this issue--I'm just documenting my progress here so we have a paper trail for instructional purposes.

'slidedeck' is not recognized as an internal or external command, operable program or batch file.

Hi
I am running Windows 7 64 bit.

I have installed the package (successfully I thought) using pip, easy-install and by downloading the distribution from the Python package repositiory and then using setup.py.

I checked the PATH varialble, and there is a path to ..\Python27\Scripts. Checking the folder, I found a file called slidedeck (no extension) but which appears to be a Python script.

Renaming it to slidedeck.py and attempting to run it just results in Python errors (failure to import render for example).

Any advice to solve the problem would be appreciated.

Should title slide be "special"

So the title slide is kind of hard to customize, as its input format is different from the other types of slides. I wonder if it would make more sense for the title slide to just be a different class of slide without using "special" character inputs. Then it might be easier to customize.

Special characters in title

I've found two different issues.

With title "(How) Are Protein Forcefields Getting Better?" I end up with slidedeck render hanging.

With title "Are Protein Forcefields Getting Better?" I end up with an extra slide after the title showing only a single "?" character.

How do we make the layout not suck so much?

It's really hard to properly layout the slides when they have nontrivial content on them, like multiple images that you want to position with respect to one and other. Just adding raw html and a bunch of <div style="margin-top:100px"> tags is quite cumbersome. Perhaps more slide classes could help.

I don't like WYSIWYG content editors, but WYSIWYG layout customization, like moving the elements around within the slides with the mouse could be great if there was a good library that can handle this, and if there's some way to save the resulting layout back into the markdown.

Any input appreciated.

PDF Output

I agree that viewing in the browser is the way to go, but I wonder if there's some easy way to get PDFs out of this thing.

The reason I want a PDF is to share slides as a single file in a reproducible way.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.