Git Product home page Git Product logo

python-darkslide's Introduction

Overview

docs Documentation Status
tests
package

Lightweight markup language (Markdown, ReST, or Textile) slideshow generator. Forked from landslide.

Demo: http://ionelmc.github.io/python-darkslide/

# Darkslide

---

# Overview

Generate HTML5 slideshows from markdown, ReST, or textile.

![python](http://i.imgur.com/bc2xk.png)

Darkslide is primarily written in Python, but it's themes use:

- HTML5
- Javascript
- CSS

---

# Code Sample

Darkslide supports code snippets

    !python
    def log(self, message, level='notice'):
        if self.logger and not callable(self.logger):
            raise ValueError(u"Invalid logger set, must be a callable")

        if self.verbose and self.logger:
            self.logger(message, level)

Requirements

python and the following modules:

  • jinja2
  • pygments for code blocks syntax coloration

Markup Conversion

Optional

  • watchdog for watching/auto-regeneration with the -w flag

Installation

Install the latest stable version of Darkslide with a python package manager like pip:

$ pip install darkslide

If you want to stay on the edge:

$ git clone https://github.com/ionelmc/python-darkslide.git
$ cd python-darkslide
$ python setup.py build
$ sudo python setup.py install

Formatting

Markdown

  • Your Markdown source files must be suffixed by .md, .markdn, .mdwn, .mdown or .markdown
  • To create a title slide, render a single h1 element (eg. # My Title)
  • Separate your slides with a horizontal rule (--- in markdown) except at the end of md files
  • Your other slides should have a heading that renders to an h1 element
  • To highlight blocks of code, put !lang where lang is the pygment supported language identifier as the first indented line

ReStructuredText

  • Your ReST source files must be suffixed by .rst or .rest (``.txt`` is not supported)
  • Use headings for slide titles
  • Separate your slides using an horizontal rule (---- in RST) except at the end of RST files

Textile

  • Separate your slides using ---, just like in markdown

Rendering

  • Run darkslide slides.md or darkslide slides.rst
  • Enjoy your newly generated presentation.html

Viewing

  • Press h to toggle display of help
  • Press left arrow and right arrow to navigate
  • Press t to toggle a table of contents for your presentation. Slide titles are links
  • Press ESC to display the presentation overview (Exposé)
  • Press n to toggle slide number visibility
  • Press b to toggle screen blanking
  • Press c to toggle double slide display (current and next slides)
  • Press S to toggle display of link to the source file for each slide
  • Press '2' to toggle notes in your slides (specify with the .notes macro)
  • Browser zooming is not supported

Commandline Options

Usage:

darkslide [options] input.md ...
Options:
--version show program's version number and exit
-h, --help show this help message and exit
-b, --debug Will display any exception trace to stdout.
-d FILE, --destination=FILE
 The path to the to the destination html file. Default: presentation.html.
-e ENCODING, --encoding=ENCODING
 The encoding of your files. Default: utf8.
-i, --embed Embed stylesheet and javascript contents, base64-encoded images and objects in presentation to make a standalone document.
-l LINENOS, --linenos=LINENOS
 How to output linenos in source code. Three options available: no (no line numbers); inline (inside <pre> tag); table (lines numbers in another cell, copy-paste friendly).
-m LEVEL, --max-toc-level=LEVEL
 Limits the TOC level generation to a specific level.
-M, --mod=MOD Comma-separated list of theme modifiers by name. Available: wide16x9, showpagenums.
-o, --direct-output
 Prints the generated HTML code to stdout.
-P, --no-presenter-notes
 Don't include presenter notes in the output.
-q, --quiet Won't write anything to stdout (silent mode).
-r, --relative Make your presentation asset links relative to current working dir; This may be useful if you intend to publish your html presentation online.
-t THEME, --theme=THEME
 A theme name, or path to a darkslide theme directory
-v, --verbose Write informational messages to stdout (enabled by default).
-x EXTENSIONS, --extensions=EXTENSIONS
 Comma-separated list of extensions for Markdown.
-w, --watch Watch source directory for changes and regenerate slides.

Presentation Configuration

Darkslide allows to configure your presentation using a cfg configuration file, therefore easing the aggregation of source directories and the reuse of them across presentations. Darkslide configuration files use the cfg syntax. If you know ini files, you get the picture. Below is a sample configuration file:

[darkslide]
; the old [landslide] is still supported
theme  = /path/to/my/beautiful/theme
source = 0_my_first_slides.md
         a_directory
         another_directory
         now_a_slide.markdown
         another_one.rst
destination = myWonderfulPresentation.html
css =    my_first_stylesheet.css
         my_other_stylesheet.css
js =     jquery.js
         my_fancy_javascript.js
relative = True
linenos = inline

Don't forget to declare the [darkslide] section. All configuration files must end in the .cfg extension.

To generate the presentation as configured, just run:

$ cd /path/to/my/presentation/sources
$ darkslide config.cfg

Macros

You can use macros to enhance your presentation:

Notes

Add notes to your slides using the .notes: keyword, eg.:

# My Slide Title

.notes: These are my notes, hidden by default

My visible content goes here

You can toggle display of notes by pressing the 2 key.

Some other macros are also available by default: .fx: foo bar will add the foo and bar classes to the corresponding slide <div> element, easing styling of your presentation using CSS.

QR Codes

Add a QR Code to your presentation by using the .qr keyword:

.qr: https://github.com/ionelmc/python-darkslide

Footnote

Add footnote to the current and all the following presentations

.footnote: Slides available at https://blog.ionelmc.ro/presentations/

Presenter Notes

You can also add presenter notes to each slide by following the slide content with a heading entitled "Presenter Notes". Press the 'p' key to open the presenter view.

Registering Macros

Macros are used to transform the HTML contents of your slide.

You can register your own macros by creating darkslide.macro.Macro derived classes, implementing a process(content, source=None) method and returning a tuple containing the modified contents and some css classes you may be wanting to add to your slide <div> element. For example:

!python
import darkslide

class MyMacro(darkslide.Macro):
  def process(self, content, source=None):
    return content + '<p>plop</p>', ['plopped_slide']

g = darkslide.generator.Generator(source='toto.md')
g.register_macro(MyMacro)
print g.render()

This will render any slide as below:

!html
<div class="slide plopped_slide">
  <header><h2>foo</h2></header>
  <section>
    <p>my slide contents</p>
    <p>plop</p>
  </section>
</div>

Advanced Usage

Setting Custom Destination File

$ darkslide slides.md -d ~/MyPresentations/presentation.html

Working with Directories

$ darkslide slides/

Working with Direct Output

$ darkslide slides.md -o | tidy

Using an Alternate Darkslide Theme

$ darkslide slides.md -t mytheme
$ darkslide slides.md -t /path/to/theme/dir

Embedding Base-64-Encoded Images

$ darkslide slides.md -i

Enabling Markdown Extensions

See documentation on available Markdown extensions here:

$ darkslide slides.md -x abbr

Theming

A Darkslide theme is a directory following this simple structure:

mytheme/
|-- base.html
|-- css
|   |-- print.css
|   `-- screen.css
`-- js
    `-- slides.js

If a theme does not provide HTML and JS files, those from the default theme will be used. CSS is not optional.

Widescreen 16x9

You can create widescreen 16x9 slides using the --mod=wide16x9 option.

User stylesheets and Javascripts

If you don't want to bother making your own theme, you can include your own user css and js files to the generated presentation.

This feature is only available if you use a Darkslide configuration file, by setting the css and/or js flags:

[darkslide]
; the old [landslide] is still supported
theme  = /path/to/my/beautiful/theme
source = slides.mdown
css =    custom.css
js =     jquery.js
         powerpoint.js

These will link the custom.css stylesheet and both the jquery.js and powerpoint.js files within the <head> section of the presentation html file.

NOTE: Paths to the css and js files must be relative to the directory you're running the darkslide command from.

Publishing your Presentation Online

For online publishing use the --embed option to produce a standalone HTML file with no dependencies:

$ darkslide slides.md --embed

Theme Variables

The base.html must be a Jinja2 template file where you can harness the following template variables:

  • css: the stylesheet contents, available via two keys, print and screen, both having:
  • a path_url key storing the url to the asset file path
  • a contents key storing the asset contents
  • js: the javascript contents, having:
  • a path_url key storing the url to the asset file path
  • a contents key storing the asset contents
  • slides: the slides list, each one having these properties:
  • header: the slide title
  • content: the slide contents
  • number: the slide number
  • embed: is the current document a standalone one?
  • num_slides: the number of slides in current presentation
  • toc: the Table of Contents, listing sections of the document. Each section has these properties available:
  • title: the section title
  • number: the slide number of the section
  • sub: subsections, if any

Styles Scope

  • To change HTML5 presentation styles, tweak the css/screen.css stylesheet bundled with the theme you are using
  • For printing, modify the css/print.css

python-darkslide's People

Contributors

aaugustin avatar adamzap avatar akrabat avatar bestfriendchris avatar blocke avatar bradcupit avatar brandonblack avatar charleso avatar codito avatar copelco avatar dkg avatar doug avatar durden avatar epmoyer avatar fozziethebeat avatar harobed avatar ionelmc avatar jflalande avatar leblanc-simon avatar maruel avatar mtrythall avatar n1k0 avatar olivierverdier avatar philpennock avatar reardencode avatar roktas avatar sdouche avatar shreyankg avatar superwhoopy avatar tjormola 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

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

python-darkslide's Issues

Error: A pre-v6.0 template issue

I am using darkslide:

  • version: 6.0.0
  • py_version: python3.12
  • OS: debian12
    I have used the same simple theme since version 5.1 and never seen this error:
Error: A pre-v6.0 template file has been found at '/home/aschapelle/Projects/docker-shallow-dive/99_misc/.simple/base.html'. You need to rename it to template.html and use the new css_assets/js_assets variables instead.

I have changed the name to template.html, but then the error, changes to :

Error: 'css' is undefined

I am guessing that is has something to do with file structure.
any guidance how should I fix it ?

TOC contains empty entries

Hi,
I just tried python-darkslide and it seems that it contains a bug I have patched years ago in the landslide project but that I forgot to upstream.
When increasing the hierarchy of the document, entries with high level generate an empty entry in the TOC. The code involved is:

            if slide_vars['level'] and slide_vars['level'] <= TOC_MAX_LEVEL:
                self.add_toc_entry(slide_vars['title'], slide_vars['level'],
                                   slide_number)
            else:
                # Put something in the TOC even if it doesn't have a title or level
               self.add_toc_entry(u"-", 1, slide_number)

And the patch I did:
ptitmain@e9d4dbd

Is this patch ok ?
If yes, can darkslide include such a patch ?
Best regards.

Align images easily

While it should be easy to realize with (inline) HTML or custom.css I miss an easy to use way, to layout slides with an image. For example:

  • align image right, text flows on left
  • align image left, text flows on right
  • set image fullscreen background, text flows above

I guess the .fx: extension is the right way to go, as the landslide avalanche theme realizes background images.
IMHO this would add an basic layout skills to anybody who is not familar with the HTML/CSS hierachies.

wide mode with default theme

I think there is an issue with the wide mode.

The command:

darkslide --mod=wide16x9 -i -t default hello.rst

works fine: it produces slides in 16:9 ratio.

But, when removing the -i option (for embed css and images), the aspect ratio returns to 4:3:

darkslide --mod=wide16x9 -t default hello.rst

I just tested with a short rst file and with the default theme I copied from the python package.

support weasyprint for PDF export

weasyprint is a python-based F/LOSS HTML→PDF conversion utility, available in debian and other free software operating systems.

It'd be great if darkslide could use weasyprint to automate generation of PDF output, to avoid having to manually roundtrip through chrome as described in #20.

embedded javascript of asciinema not loaded after slide 5

Hello,

I am trying to embed terminals capture using asciinema. I use the raw html directive. It is working on the first slides, but after slide 5, the javascript seems not executed or seems to enter in conflict with the code that animate slides.

I produced a MWE:

Slide 1
-------

ok

.. raw:: html

  <center>
  <script id="asciicast-eOJZrTaTu9jOO6Xe4m2tvnZsw" src="https://asciinema.org/a/eOJZrTaTu9jOO6Xe4m2tvnZsw.js" async></script>
  </center>

----

Slide 2
-------

ok

.. raw:: html

  <center>
  <script id="asciicast-eOJZrTaTu9jOO6Xe4m2tvnZsw" src="https://asciinema.org/a/eOJZrTaTu9jOO6Xe4m2tvnZsw.js" async></script>
  </center>

----

Slide 3
-------

ok

.. raw:: html

  <center>
  <script id="asciicast-eOJZrTaTu9jOO6Xe4m2tvnZsw" src="https://asciinema.org/a/eOJZrTaTu9jOO6Xe4m2tvnZsw.js" async></script>
  </center>

----

Slide 4
-------

ok

.. raw:: html

  <center>
  <script id="asciicast-eOJZrTaTu9jOO6Xe4m2tvnZsw" src="https://asciinema.org/a/eOJZrTaTu9jOO6Xe4m2tvnZsw.js" async></script>
  </center>

----

Slide 5
-------

not ok (not loaded)

.. raw:: html

  <center>
  <script id="asciicast-eOJZrTaTu9jOO6Xe4m2tvnZsw" src="https://asciinema.org/a/eOJZrTaTu9jOO6Xe4m2tvnZsw.js" async></script>
  </center>

----

Slide 6
-------

not ok (not loaded)

.. raw:: html

  <center>
  <script id="asciicast-eOJZrTaTu9jOO6Xe4m2tvnZsw" src="https://asciinema.org/a/eOJZrTaTu9jOO6Xe4m2tvnZsw.js" async></script>
  </center>

----

Slide 7
-------

not ok (not loaded)

.. raw:: html

  <center>
  <script id="asciicast-eOJZrTaTu9jOO6Xe4m2tvnZsw" src="https://asciinema.org/a/eOJZrTaTu9jOO6Xe4m2tvnZsw.js" async></script>
  </center>

----

Slide 8
-------

not ok (not loaded)

.. raw:: html

  <center>
  <script id="asciicast-eOJZrTaTu9jOO6Xe4m2tvnZsw" src="https://asciinema.org/a/eOJZrTaTu9jOO6Xe4m2tvnZsw.js" async></script>
  </center>

When laoding the document at slide 1 in firefox or chrome, all is going fine until slide 5 that does not embed the terminal fragment. I see no obvious error in the javascript console.

Any idea about this issue ?

fsck error in git repo: error: object e0af252dfe5f01f0cfec132df8c3afd85c7ef403: zeroPaddedFilemode: contains zero-padded file modes

When trying to clone the repo using transfer.fsckobjects=true, i see the following error:

0 dkg@alice:~$ git clone --config transfer.fsckobjects=true https://github.com/ionelmc/python-darkslide
Cloning into 'python-darkslide'...
remote: Enumerating objects: 4949, done.
remote: Counting objects: 100% (54/54), done.
remote: Compressing objects: 100% (37/37), done.
error: object e0af252dfe5f01f0cfec132df8c3afd85c7ef403: zeroPaddedFilemode: contains zero-padded file modes
fatal: fsck error in packed object
fatal: index-pack failed
128 dkg@alice:~$ 

This is likely the same as seen in ohmyzsh/ohmyzsh#4963 (see much more discussion and details on that issue). Rewriting history is a painful operation, but i think it could be useful to do this (once) for future folks who do typically run integrity checks on their repositories. (i typically have this set by default myself)

`-x fenced_code` does not provide proper highlighting

Hi,

I want to write a presentation with code examples using fenced code blocks. That means instead of writing

!python
def foo():
pass

I want to use the (more common) fenced code blocks:

def bar():
    pass

According to the docs darkslide supports the extensions provided by the python markdown library, but running

$ darkslide -x fenced_code slides.md

Produces proper python styling for the first example but unstyled

<pre><code class="python">def bar():
    pass
</code></pre>

for the second.

Widescreen

Is there an easy way to get slides in 16:9 aspect ratio instead of 4:3?

Footnotes not shown in printing or on html

Hi there.
I am using :

  • debian 11
  • darkslide 5.1
  • python 3.11

I have my custom theme that I have created, mostly based on theme white from the package on debian 11.
The main issue is that I do not get footnote on the html or on the print

add option to include page numbers

When presenting slides in a meeting for discussion, it's often useful to ensure that the slides have page numbers on them (it's also useful to have a count of the total number of slides)

This is useful for people watching the presentation (they know about how much more is left, they can say "go back to slide 3").

and it's useful for people transcribing the meeting or "scribing" in a text chat discussion (for example "now on slide 3")

It'd be great to add an option to inject page numbers (and optionally, the overall page count) in the generated slides.

[Enhancement] Have a "Title Slide" class

Hello dear devs: first of all and as always, thank you for your great work and dedication!

Here goes:

Idea

Currently, a slide is considered as a title slide only if its content is made of just a level 1 title and no content.

I think it would be more flexible if, in addition to this default behavior, the user was able to tell for any slide that he wants it to be "Title Slide" (thus enabling specific styling). After all, the content of that slide could be more than just the title: there could be a subtitle, an author list, etc.

Implementation Suggestion

Title slides are currently identified in the CSS file using the psuedo-class :only-child, e.g.:

section, .slide header:only-child h1 {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 100px;
    display: block;
    overflow: hidden;
}

I suggest to remove this "hack" and create two classes slide_title and slide_with_content. By default, a slide with no content would be generated with the class slide_title, and other slides would be of class slide_with_content. The user could force a slide to be of class slide_title, e.g. with the .fx macro, or with a dedicated .titleslide macro (to be created).

This would enable CSS magicians to easily define different styles for title and non-title slides.

I am willing to do the implementation, I just need to know first if someone is interested...or if i can go fork myself :-).

Thanks again!

Code listings with include: directive are not colorized

Hello
This is an old bug already present in landslide. Included a code with the include directive generates a block of code with full name of css classes instead a short names when using the code-block directive. Thus:

  • code-block => short names => colors ok
  • include => long name => colors not ok

For example:

Test
====

.. include:: test.js
   :code: javascript

.. code-block:: javascript

   const http = require('http');

Generates:

<section><pre class="code javascript literal-block">
<span class="keyword reserved">const</span> <span class="name other">http</span> <span class="operator">=</span> <span class="name other">require</span><span class="punctuation">(</span><span class="literal string single">'http'</span><span class="punctuation">);</span>
</pre>
<pre><span></span><span class="kr">const</span> <span class="nx">http</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;http&#39;</span><span class="p">);</span>
</pre></section>

The "kr" class is present in the default pygment CSS but not "keyword reserved".

A workaround is to duplicate the CSS pygment and replace each short name by a long one (or to find somewhere the default CSS in long names but I cannot find it online).

A fix would be to ask pygment to generate short names for the include directive. But maybe this is done somewhere in the docutils framework and is cannot be controlled from darkslide. I found this bug that seems to explain how to push parameters to the Html formatter object but I cannot find how to do this in the code of darkslide.

reStructuredText `.. container::` directive is not working

I thought I could use the container directive for some customisation of the layout, but for some reason it has no effect.
I am not sure if this is a bug or if I am just missing something.

I am using the latest version of darkslide (installed through pip).

Minimal Example

Test
====

.. container:: foo

   Some content.

   In a container.

This line is not in the container anymore.

Expected Output

...
<section>
    <div class="foo">
        <p>Some content.</p>
        <p>In a container.</p>
    </div>
    <p>This line is not in the container anymore.</p>
</section>
...

Actual Output

...
<section>
    <p>Some content.</p>
    <p>In a container.</p>
    <p>This line is not in the container anymore.</p>
</section>
...

open source PDF export

Hi there, the current PDF engine is sadly an commercial product. Are there any plans to replace it with an open source component? What are the technical requirements?

First slide must start with an H1

To reproduce:

$ echo "# hi" > t.md
$ darkslide t.md
Adding 't.md' (markdown)
Generated file: presentation.html
$ echo "## hi" > t.md
$ darkslide t.md
Error: list index out of range
Adding 't.md' (markdown)

I was only using an h2 for formatting, so will fix formatting in h1.

footnotes broken

Hi there, I struggeled upon the footnote feature.

If I add it like the readme.md says

.footnote: Slides available at https://blog.ionelmc.ro/presentations/
it is just rendered as ordinary text, even if I enable the extension manually

If I add it like the extension says

Footnotes are awesome 1 ....

Environment

  • Python 2.7.12
  • Darkslide 4.0.1
  • markdown 2.6.9
  • default theme

Footnotes

  1. This is a footnote content.
    The final presentation is broken and doesn't display anything without the blank filled background.

Won't work with Markdown v3.x.x

Steps to reproduce:

$ pip install darkslide
$ darkslide index.md
Adding   'index.md' (markdown)
Error: markdown() takes exactly 1 argument (2 given)

Here is the output of pip freeze -l

pip freeze -l
darkslide==4.0.1
docutils==0.14
Jinja2==2.10
Markdown==3.0.1
MarkupSafe==1.0
Pygments==2.2.0
qrcode==6.0
six==1.11.0

If you install a previous version of Markdown instead (e.g. pip install Markdown==2.6.11, it solves the problem.
It comes apparently from this line: https://github.com/ionelmc/python-darkslide/blob/master/src/darkslide/parser.py#L61 ; it looks like the markdown function accepts kwargs, but no more implicit args. So I guess that a quick fix would be:

return markdown.markdown(text, extensions=self.md_extensions)

reference: https://python-markdown.github.io/reference/#extensions

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.