sphinx-revealjs¶
sphinx-revealjs
is Sphinx extension
to generate Reveal.js presentation documents
from standard reStructuredText.
Basic Features¶
Nested sections
Speaker note
Syntax highlight for Reveal.js (not used pygments)
Customize slides and sections by conf.py or source reST
Concept and motivation¶
Goal of this library is to provide presentation platform for self-branding of engineer using Sphinx. Using static site hosting service, you can show own presentations to anyone.
Core motivation is that I want to play presentation by this library.
Contents¶
Setup¶
Requirements¶
sphinx-revealjs
requires Python 3.6+ (recommended 3.7+) and Sphinx.
Current development environment¶
Python:
3.10.x
Sphinx:
5.3.0
Installation¶
You can install sphinx-revealjs
from PyPI.
$ pip install sphinx-revealjs
sphinx-revealjs
specify Sphinx
and docutils
expressly as dependencies.
You get Sphinx
by this command only.
Configuration¶
sphinx-revealjs
does not provide revealjs
builder instead of html
builder.
To use builder, edit your conf.py
.
extensions = [
"sphinx_revealjs",
]
if you want to configure more, edit conf.py with seeing Configurations.
Build¶
Run make
command to build presentations.
Files are generated to revealjs folder.
$ make revealjs
You can generate all pages as index.html
to use dirrevealjs
.
make dirrevealjs
Upgrading guide¶
Upgrading from 0.x to 1.x¶
From version 1.x, this bundle Reveal.js 4.x, and implement for it. Due it, documentations for old version does not work to build correctly.
You have to lock version, or migrate source for next version.
Configurations¶
revealjs_script_plugins¶
Reveal.js 4.x has big changes for usage of plugins from 3.x.
sphinx-revealjs
is also adjust for this changes,
and need update revealjs_script_plugins
.
revealjs_script_plugins = [
{
+ "name": "RevealNotes",
+ "src": "revealjs4/plugin/notes/notes.js",
- "src": "revealjs/plugin/notes/notes.js",
},
{
+ "name": "RevealHighlight",
+ "src": "revealjs4/plugin/highlight/highlight.js",
- "src": "revealjs/plugin/highlight/highlight.js",
- "options": """
- {async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
- """
},
]
Changed structure from src and options to src and name.
- For 4.x, to use plugin for core,add class name of it not source path,and need to preload source by
script
tag. - Class name is defined in plugin source.You need find from source or ref documents (official plugin only)
In adding, does not accept options for plugins.
MORE: See Using Plugins from Reveal.js document
revealjs_css_files¶
If you use highlight plugin and specify bundled stylesheet file, change path of stylesheet. Style files is migrated to highlight plugin folder.
Before:
revealjs/lib/css/zenburn.css
After:
revealjs4/plugin/highlight
Upgrading from 1.x to 2.x¶
From 2.x, some features are removed because splitted other extensions or duplicated behaviors. If you want to use new version by documentation using 1.x, you should upgrade project files.
Fonts¶
sphinx-revealjs
does not support font configuration features to provide features as “Presentation tools”.
If you want to use Google Fonts¶
You can add CSS URL into revealjs_css_files
directly.
revealjs_css_files = [
"https://fonts.googleapis.com/css2?family=Noto+Sans+JP",
"css/custom.css",
]
Example of css/custom.css
.
.reveal *, .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
font-family: 'Noto Sans JP', sans-serif;
}
Use googlefonts-markup¶
If you want to write only font-family, use googlefonts-markup.
from googlefonts_markup import Font
revealjs_css_files = [
Font(family_name="Noto Sans JP").css_url(),
"css/custom.css",
]
Change using Google Fonts per presentations¶
You need to create custom theme per presentations.
# Define default theme
revealjs_style_theme = "black"
=====
Title
=====
.. Set `revealjs-slide/theme` to override theme
.. revealjs-slide::
:theme: "css/theme-for-this-presentation.css"
Speaker Views¶
New configration revealjs_notes_from_comments
are defined.
But, because default values is False
, your presentation not write speaker-note when you upgrade sphinx-revealjs
Replace reveajs-notes(recommended)¶
You can replace revealjs-notes
from comment-block.
And you can use comment-block as COMMENT(does not write as content from source).
Before:
.. This is 1.x style speaker-view content
After:
.. revealjs-notes::
This is 1.x style speaker-view content
Configuration for compatible behaviors¶
You can set True
revealjs_notes_from_comments
to use behaviors of ver 1.x.
revealjs_notes_from_comments = Ture
Configurations¶
html_js_files/revealjs_js_files¶
sphinx-revealjs
does not ref html_js_files
as list of additional JavaScript files.
It refer only revealjs_js_files
.
You must do one of these.
Copy needy values of
html_js_files
torevealjs_js_files
Sync
html_js_files
torevealjs_js_files
(ex:revealjs_js_files = html_js_files
)
revealjs_use_index¶
sphinx-revealjs
does not generate genindex.html
(list of in vals) on default.
If you want genindex.html
for Reveal.js builder, you muse set True
.
Directives¶
sphinx-revealjs
defines kebab-cased directives only, and removed snake-cesed directives.
You must replace cases to run by 2.x.
Before |
After |
---|---|
|
|
|
|
|
|
|
|
Configurations¶
sphinx-revealjs
can build multiple presentations.
You can configure in conf.py
for all presentations.
Basic configurations¶
- revealjs_static_path¶
- Type
list
- Default
[]
(empty)- Example
["_static"]
List of static files directory ( same as
html_static_path
)
- revealjs_js_files¶
- Type
list
- Default
[]
(empty)- Example
["custom.js"]
List of using custom css (same as
html_js_files
).When you want to use JS that does not related revealjs, can use this.
- revealjs_css_files¶
- Type
list
- Default
[]
(empty)- Example
["custom.css"]
List of using custom css (same as
html_css_files
).If you want to customize presentation by CSS, write external css and use it.
- revealjs_use_index¶
- Type
bool
- Default
False
Flag that does builder generate
genindex.html
(same ashtml_use_index
).
Style Configurations¶
- revealjs_style_theme¶
- Type
str
- Default
black
- Example
moon
,custom.css
Theme name of stylesheet for Reveal.js.
- If value does not have suffix
.css
,use bundled Reveal.js theme(includedrevealjs/css/theme
).
Presentation Configurations¶
- revealjs_use_section_ids¶
- Type
boolean
- Default
False
If this is set
True
, injectid
attribute intosection
element (parent of headerings). This means that change format of internal links (default is numbering style).
- revealjs_script_files¶
- Type
List[str]
- Default
[]
- Example
["presentation.js"]
List of sources that render as
script
tags.There is bundled Reveal.js script at
revealjs/js/reveal.js
.Example:
<div> <!-- Presentation body --> </div> <!-- here!! --> <script src="_static/revealjs/js/revealjs.js"></script> <script src="_static/presentation.js"></script>
- revealjs_script_conf¶
- Type
str or dict
- Default
None
Configuration of Reveal.js presentation. This value is used as options of
Reveal.initialize
in output files.If value is string type, handle as raw javascript code.
If value is dict object, convert to json string at internal.
Example 1: case of str
revealjs_script_conf = """ { controls: false, transition: 'zoom', } """
<div> <!-- Presentation body --> </div> <script src="_static/revealjs/js/revealjs.js"></script> <!-- here!! --> <script> let revealjsConfig = {}; revealjsConfig = Object.assign(revealjsConfig, { controls: false, transition: 'zoom', }); revealjs.initialize(revealjsConfig); </script>
Example 2: case of dict
revealjs_script_conf = { "controls": False, "transition": "zoom", }
<div> <!-- Presentation body --> </div> <script src="_static/revealjs/js/revealjs.js"></script> <!-- here!! --> <script> let revealjsConfig = {}; revealjsConfig = Object.assign(revealjsConfig, JSON.parse('{"controls": false, "transition": "zoom"}')); revealjs.initialize(revealjsConfig); </script>
example 1 and 2 are behaving same.
- revealjs_script_plugins¶
- Type
List[Dict]
- Default
[]
List of plugin configurations. If this value is set, render
script
tag after source script tags.There are bundled Reveal.js plugins at
revealjs/plugin
.Example:
revealjs_script_plugins = [ { "src": "revealjs4/plugin/highlight/highlight.js", "name": "RevealHighlight", }, ]
<div> <!-- Presentation body --> </div> <script src="_static/revealjs/js/revealjs.js"></script> <script src="_static/revealjs/plugin/highlight/highlight.js"></script> <!-- here!! --> <script> let revealjsConfig = {}; revealjsConfig.plugins = [RevealHighlight,]; revealjs.initialize(revealjsConfig); </script>
- revealjs_notes_from_comments¶
- Type
boolean
- Default
False
If this is set True, builder writes notes section from comment block.
Font configurations¶
Note
These configurations will be dropped when version 2.x.
You can use raw CSS or googlefonts-markup instead of these.
- revealjs_google_fonts¶
- Type
dict
- Default
[]
- Example
[]
List of using fonts from Google Fonts. If this value is set, render
link
andstyle
tags into html.
- revealjs_generic_font¶
- Type
str
- Default
sans-serif
- Example
serif
,monospace
If you use
revealjs_google_fonts
, set last offont-family
style.
Directives¶
sphinx-revealjs
provides some directives to customize presence and behaviors.
For customize presentation¶
Sphinx can manage multiple documents,
so that sphinx-revealjs
can build multiple presentation slides.
If you want to configure one presentaion from some, use this directive into your source.
- .. revealjs-slide::¶
Write
revealjs-slide
directive on directly below of title header.Note
Directive based customize has options less than conf based because implementation restrict.
- :theme: (string)¶
Override
revealjs_style_theme
.
- :google_font: (string)¶
Override
revealjs_google_fonts
, but it can specify only one.
- :conf: (JSON-string or no-value)¶
Override
revealjs_script_conf
, but single line only.
Usage:
Presentation title ================== .. revealjs-slide:: :theme: moon Section ------- Content
For customize sections¶
If you want to change behavior of sections, use these directives.
- .. revealjs-section::¶
To change behavior per section, write directive per section.
- :data-XXX:¶
This directive can accept attribute as same as Reveal.js
section
tags. For more information, please see Reveal.js documentation.Note
This may be not completed all attributes for Reveal.js. If you find missing attribute, pleas post issues or pull-requests into GitHub.
Usage:
Write
revealjs-slide
directive on directly below of section title header.Title ===== Section ------- .. revealjs-section:: :data-background-color: #009900
- .. revealjs-break::¶
If you want to transition section with keeping title,
revealjs-break
can use.Usage:
Write
revealjs-break
to point of want to split section.Title ===== Section ------- Content 1 .. revealjs-break:: Content 2(next slide)
- :data-XXX:¶
It accepts attributes as same as
revealjs-section
.
- :notitle:¶
If it is set in directive, next section page does not display title.
For interactive contents¶
- .. revealjs-code-block::¶
This is extends of
code-block
direcrive for presentation.If you want to use custom attributes in code-block.
- :data-line-numbers: (string or no value)¶
Code highlighting pattern. See Reveal.js document
Example:
.. revealjs-code-block:: python :data-line-numbers: 1 def hello(): print("world")
- :data-ln-start-from: (integer)¶
Set number of first-line in code block. When this is assigned, display line numbers even if
data-line-numbers
is not set.
.. revealjs-code-block:: python :data-ln-start-from: 3 print(datetime.datetime.now()) Please see `Reveal.js document <https://revealjs.com/code/#line-number-offset-4.2.0>`_.
- .. revealjs-literalinclude::¶
This is extends of
literalinclude
direcrive for presentation.If you want to use custom attributes in literalinclude.
External attributes are same from
revealjs-code-block
.
- .. revealjs-fragments::¶
Note
There are cases not working regular.
Inject
fragment
attribute into objects. Referer to “Fragments” from Reveal.jsExample:
Write block as directive that you want to present as fragments.
.. revealjs-fragments:: * First * Second * Third
See demo
- .. revealjs-notes::¶
When you write this section, inner text are as content of Speaker View.
If you write some directives on same-level, Reveal.js uses first direcrive only.
Note
You must be careful for comment block when you set
revealjs_notes_from_comments
inconf.py
. Reveal.js recoginzes first<aside>
element as content of speaker-view, so you may not see directive content as notes.Example:
.. revealjs-notes:: This content output into <aside> element on <section>.
Using tips¶
Create custom theme¶
- Added
v2.1.0
sphinx-revealjs
includes SCSS sources of bundled themes.
You can write custom theme from theme template of reveal.js using libsass
.
Example 1: Using libsass¶
First, install libsass to compile SASS/SCSS on your environment.
pip install libsass
Write SCSS source for your theme.
// Use teamplate sources from Reveal.js
@import "template/mixins";
@import "template/settings";
// Write your settings
$base03: #002b36;
// ...
@import "template/theme";
// You can write custom style too.
.reveal {
h1, h2, h3 {
text-transform: none;
}
}
Compile source.
from pathlib import Path
import sass
from sphinx_revealjs.themes import get_theme_path
source = Path("_sass/custom.scss").read_text()
css = sass.compile(
string=source,
include_paths=[str(get_theme_path() / "static/revealjs4/css/theme")]
)
Path("_static/custom.css").write_text(css)
Use compiled CSS as your theme.
# conf.py
# If option has extension, find from static files.
revealjs_style_theme = "custom.css"
revealjs_static_path = ["_static"]
Example 2: sphinxcontrib-sass¶
You can use sphinxcontrib-sass to simplify.
pip install --find-links=https://github.com/attakei-lab/sphinxcontrib-sass/releases sphinxcontrib-sass
# conf.py
from sphinx_revealjs.themes import get_theme_path
extensions = [
# .. Your extensions
# Add
"sphinxcontrib.sass",
]
sass_src_dir = "_sass"
sass_out_dir = "_static"
sass_targets = {"custom.scss": "custom.css"}
sass_include_paths = [
get_theme_path("sphinx_revealjs") / "static" / "revealjs4" / "css" / "theme",
]
When document updated, it compile scss to css.
Contributing¶
Thank you for interested to sphinx-revealjs
.
Todo
Add USING, QUESTION and DOCUMENTATION
Conttribute code¶
Local development environment¶
This is spec for development by author( attakei
) on 2022/08/27.
Arch Linux
Python 3.10.x
Installed pre-commit globally
Setting up repo¶
After you clone forked Git repository, run commands to set up.
python tools/fetch_revealjs.py
pre-commit install
python -m venv venv
venv/bin/pip install -e '.[test]'
Changelog¶
ver 2.4.1¶
- date
2022-11-20
- base
Reveal.js 4.4.0
(None updates for features)
Extra¶
Fix badge of readme
ver 2.4.0¶
- date
2022-11-13
- base
Reveal.js 4.4.0
Added features¶
Add
data-ln-start-from
intorevealjs-code-block
andrevealjs-literalinclude
.
Changes¶
Demo documentation are changed from
demo/revealjs4
todemo
.
Deprecated¶
Output warning when using it by Python 3.6
Mark notice level deprecated
Change directory for contents of Reveal.js
Change supportings¶
Add Python 3.11 into supportings
Drop Python 3.6 from supportings
Develoment environment¶
Hooks of
pre-commit
are using as standard lintings. In GitHub Actions,lint
is runningpre-commit
.Use Flit as building library instead of Poetry.
ver 2.3.0¶
- date
2022-10-23
- base
Reveal.js 4.4.0 (updated)
Updated Features¶
Support data-background-gradient correctly (already defined, but not working at older Reveal.js)
ver 2.2.0¶
- date
2022-10-01
- base
Reveal.js 4.3.1
Added features¶
Add
revealjs-literalinclude
that is extends ofliteralinclude
fordata-line-numbers
. It is likelyrevealjs-code-block
.
ver 2.1.0¶
- date
2022-08-28
- base
Reveal.js 4.3.1
Added Features¶
Package includes SCSS sources of revealjs bundled-themes
Extra¶
Use pre-commit
ver 2.0.1¶
- date
2022-08-02
- base
Reveal.js 4.3.1
Fixes¶
Custom builders accept
app
andenv
(optional) in initialize function
ver 2.0.0¶
- date
2022-05-31
- base
Reveal.js 4.3.1
Added Features¶
Directive
revealjs-notes
writes speaker-view content into presentationConfig
reveajs_notes_from_comments
toggle if it creates speaker-view content from comment-blockBREAKING CHANGE: Default value is False. You must set
True
explicitly to use as same as ver 1.x
Config
reveajs_use_index
toggle if it createsgenindex.html
BREAKING CHANGE: Default value is False. You must set
True
explicitly to use as same as ver 1.x
Fixes¶
Register
data-XXX
attributes intorevealjs-section
andrevealjs-break
from https://revealjs.com/
Deleted feaures¶
Remove snake-cesed directives
Does not generate
search.html
Old versions¶
Version 1.x¶
ver 1.5.3¶
- date
2022-06-02
- base
Reveal.js 4.3.1
All nodes for
sphinx-revealjs
does not write anything when none revealjs builder works.
ver 1.5.2¶
- date
2022-04-29
- base
Reveal.js 4.3.1
Work
revealjs-break
directive indirrevealjs
builder (#109)Inherit behavior of any nodes from
html
builder todirrevealjs
builder (#108)
Mark as deprecated(logging.warning) to drop at version 2.x (updated from v1.5.0)
Snake-cased directive (
revealjs_slide
,revealjs_section
andrevealjs_break
)CSS Font configurations (
revealjs_google_fonts
andrevealjs_generic_font
)Passing values from
html_js_files
torevealjs_js_files
ver 1.5.1¶
- date
2022-04-21
- base
Reveal.js 4.3.1
Add
role="main"
intopage.html
for searching by Sphinx (#102)
Add documentation link into metadata (PyPI)
ver 1.5.0¶
- date
2022-04-11
- base
Reveal.js 4.3.1
Add
dirrevealjs
builder to generate all pages asindex.html
Mark as deprecated(logging.info) to drop at version 2.x
Snake-cased directive (
revealjs_slide
,revealjs_section
andrevealjs_break
)CSS Font configurations (
revealjs_google_fonts
andrevealjs_generic_font
)Passing values from
html_js_files
torevealjs_js_files
Full-support for Python 3.6.x
ver 1.4.3¶
- Date
2021-11-20
- Reveal.js
v4.2.0
(None updates for features)
Update classifiers of PyPI
Fix key of license
Add other keys
ver 1.4.2¶
- Date
2021-11-20
- Reveal.js
v4.2.0
(None updates for features)
Update test matrix of GitHub Actions to confirm that this supports python 3.10
Update classifiers of PyPI because test cases passed under Python 3.10 and Sphinx 4.x
ver 1.4.1¶
- Date
2021-11-16
- Reveal.js
v4.2.0 (updated)
Replace reveal.js to use right bundle version.
ver 1.4.0¶
- Date
2021-11-13
- Reveal.js
v4.2.0 (updated)
Add
revealjs_js_files
forconf.py
to set JS file. (#77)revealjs_script_conf
accepts dict types (#56)
Change test codes from nose to py.test
ver 1.3.1¶
- date
2021-07-17
- base
Reveal.js 4.1.3
revealjs-fragments
for paragraph contents (#71)
ver 1.3.0¶
- date
2021-07-11
- base
Reveal.js 4.1.3
Support some attributes of sections
Add directive
revealjs-code-block
to line highlighting for reveal.jsAdd kebab-case directives for currently snake-case directives
revealjs-slide <= revealjs_slie
revealjs-section <= revealjs_section
revealjs-break <= revealjs_break
revealjs-fragments <= revealjs_fragments
ver 1.2.0¶
- date
2021-06-06
- base
Reveal.js 4.1.1 (updated)
When builder writes contents from extensions, use same of html builder
ver 1.1.0¶
- date
2021-04-04
- base
Reveal.js 4.1.0
Add option to add
id
attribute per sections (#59, #61)Supporting label syntax of Sphinx.
Fix dependencies for development environment
Add
package.json
to notify updates reveal.js by dependabot
ver 1.0.1¶
- date
2021-01-30
- base
Reveal.js 4.1.0
Change order of link tags for css files (#40, #41)
Rename test case function names for duplicated (#42, #54)
ver 1.0.0¶
- date
2021-01-03
- base
Reveal.js 4.1.0
In this version, sphinx-revealjs
bundle Reveal.js version 4.x,
and does not supporting to work with Reveal.js 3.x.
If you want to migrate presentation source for this version, please see migration example.
Using Revealjs 4.x (use 4.1.0)
With supporting multiple presentation management in single documentation
Bundle and implements for Revealjs 3.x
Version 0.x¶
ver 0.12.1¶
- date
2020-12-12
ver 0.12.0¶
- date
2020-06-21
Config variables:
revealjs_js_files
revealjs_css_files
revealjs_static_path
revealjs_google_fonts
use Google Fonts API version 2Change css selector for google-fonts
Remove
zenburn.css
from default included css filesIgnore
html_js_files
,html_css_files
andhtml_static_path
ver 0.11.0¶
- date
2020-04-17
- Add new config variables
revealjs_style_theme
,revealjs_google_fonts
,``revealjs_generic_font``,revealjs_script_files
,revealjs_script_conf
andrevealjs_script_plugins
- Breaking: Change directive option,from
config
toconf
inRevealjsSlide
directive.
- Breaking: Remove config variables
revealjs_theme
andrevealjs_theme_options
.
Use black for formatting
ver 0.10.0¶
- data
2020-03-25
Change bundle Reveal.js (3.8.0 -> 3.9.1)
Add support version (3.8, author’s default)
In development, depend by
sphinxcontrib-gtagjs
. (use in demo)
Change license (MIT -> Apache-2.0)
Use poetry as build environment
ver 0.9.0¶
- date
2019-12-22
google-fonts default options is changed for not to render in template.
Adjusting templates based by sphinx basic theme. (short breaking)
Enable
metatags
,scripts
and more template values.
ver 0.6.0¶
- date
2019-07-31
Add new directive
revealjs_break
to split sections.Updated demo
Add docstrings any sources. (ignore tests)
Remove Pipenv.
Migrate metadata and options from
setup.py
intosetup.cfg
.Use bumpversion for versioning
ver 0.5.0¶
- date
2018-12-31
Revealjs initialize config accept from sphinx document config
Revealjs initialize config accept from
revealjs_slide
directive
ver 0.3.1¶
First public release on PyPI.
Versioning policy¶
- date
2022-11-06
Note
This is possibility to change without announces.
Base rules¶
sphinx-revealjs
releases based from Semantic Versioning 2.0.0.
Update major version with:
Drop or changed configuration variables
Have big changes of generated contents by new Reveal.js
Breaking changes for setup-level requirements
Update minor version with:
Update marks for deprecated (wraning level)
Add new features (include inner extensions)
Add supporing dependencies
Drop supporing dependencies (not change setup-level)
Change major version of Reveal.js, but it need not update as major version
Change minor version of Reveal.js
Change compononents by misc reasons
Update patch version with:
Mark deprecated notice
Fixed bugs
Change patch version of Reveal.js
Following dependencies¶
CPython¶
sphinx-revealjs
supports only “Living” versions for as of first of year.
“Living” means that it have not published last security-only releases. “Not living” means that it is finished to published security-only releases.
Wnen some version of CPython released “last security-only release”,
sphinx-revealjs
will release with marks deprecated notice-level at upcoming (patch version).When
sphinx-revealjs
releases new minor version after 2 month from version with marked deprecated notice, this will drop old versions from everywhere and depricated warning (minor versoin).If
sphinx-revealjs
must only use specify version, this will setpython_requires
and release new versoin (major or minor version).
Sphinx¶
(TBD)
Reveal.js¶
sphinx-revealjs
bundles stable version.
When Reveal.js is released as patch version,
sphinx-revealjs
bundles new version and releases as patch version at upcoming.When Reveal.js is released as patch version,
sphinx-revealjs
bundles new version and releases as minor version at upcoming. It is possibility to include adding options for new version.When Reveal.js is released as major version, I will check compatibility for configuration of extension.
If I have decise to need breaking change,
sphinx-revealjs
will release as major version.if it need not change or only add configuration,
sphinx-revealjs
will release as minor versoin.sphinx-revealjs
bundles new version and releases as patch version at upcoming.
Licenses¶
This library is licensed Apache License version 2.0.
About license of directly dependencies, please see each software projects or documentations.