sinedied / backslide Goto Github PK
View Code? Open in Web Editor NEW:sweat_drops: CLI tool for making HTML presentations with Remark.js using Markdown
Home Page: https://sinedied.github.io/backslide
License: MIT License
:sweat_drops: CLI tool for making HTML presentations with Remark.js using Markdown
Home Page: https://sinedied.github.io/backslide
License: MIT License
Thanks for the great piece of software. This tool really tides up working with remark.
I'm having problems making Decktape 2.0.2 play with backslide 1.2.1. I've tried installing decktape both globally and locally to no avail. Running bs serve
works fine, but bs pdf
does not.
Any ideas on what I am doing wrong?
$ bs
backslide 1.2.1
...
$ bs pdf
An error occurred during pdf conversion: Decktape not found
$ tail node_modules/decktape/package.json
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/astefanutti/decktape.git"
},
"scripts": {
"start": "node decktape.js"
},
"version": "2.0.2"
}
hi again,
i'm back with something related to #37 and #41. no idea why it stopped working now again - it did work for quite a while:
➜ intro git:(gh-pages) ✗ bs e
0% exporting file 1/1mime.getType(...) is not a function
mime.getType(...) is not a function
mime.getType(...) is not a function
mime.getType(...) is not a function
mime.getType(...) is not a function
mime.getType(...) is not a function
100% exporting file 1/1
╭─────────────────────────────────────╮
│ │
│ Update available 2.3.1 → 2.3.2 │
│ Run npm i backslide to update │
│ │
╰─────────────────────────────────────╯
➜ intro git:(gh-pages) ✗ npm i backslide
npm WARN saveError ENOENT: no such file or directory, open '/Users/florian.oswald/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/Users/florian.oswald/package.json'
npm WARN florian.oswald No description
npm WARN florian.oswald No repository field.
npm WARN florian.oswald No README data
npm WARN florian.oswald No license field.
+ [email protected]
updated 1 package and audited 15293 packages in 4.838s
found 3 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
➜ intro git:(gh-pages) ✗ bs e
0% exporting file 1/1mime.getType(...) is not a function
mime.getType(...) is not a function
mime.getType(...) is not a function
mime.getType(...) is not a function
mime.getType(...) is not a function
mime.getType(...) is not a function
100% exporting file 1/1
the resulting html is missing the included pictures.
Dummy issue to store readme assets 😉
At the moment one entire presentation must be defined in a unique .md
file.
Could we imagine a feature to split the content of a presentation in multiple .md
files that would get automatically merged when doing serve
or export
?
thanks again for backslide, i'm really loving it so far
Great package! Makes life a lot easier!
I'm wondering if there's any way I can integrate the MathJax into the presentation?
thanks,
I would like to add a metadata item like this and have it automatically applied in the style.scss file.
Is this possible now and if not, something you would consider adding to backslide? I am currently missing the exact interplay between sass, bs and remark and have no idea how this could be realized.
---
title-image: assets/title.jpg
---
Hi,
New user of Remark.js and Backslide. Thanks for the wonderful tool that eased my way into Remark.js.
Instead of custom CSS, I'm looking at some custom macros, such as gnab/remark#72 (comment)
So how to use macro in backslide? Thanks.
Regards
Jim
MacOS Mojave, 10.14.2
When one document contains code blocks in html which contain <script>
tags, the presentation cannot be visualized.
The following presentation.md
# Example code:
```html
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
```
Results in a presentation.html
after bs export --no-inline
, which contains:
<script>function create() {
return remark.create({
source: "# Example code:\n\n```html\n<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n```\n\n",
ratio: '16:9',
highlightLines: true,
countIncrementalSlides: false,
highlightStyle: 'github'
});
}
</script>
It looks correct, but the browser (Chrome) complains about presentation.html:27 Uncaught SyntaxError: Invalid or unexpected token
(line 27 is the one containing source: "..."
). I noticed also that all editors I tried on this file (vim, VS Code), also produced bad syntax highlighting on that line and a warning about "unterminated string literal", but I'm unable to see what is wrong.
Apparently, the browser considers the </script>
inside the source
attribute as the closing tag for <script>function create()...
As a result, create()
is not properly defined and the presentation looks like this:
A presentation showing the example code.
As a workaround I can change <script></script>
in the example by something which looks similar, for example <scipt></scipt>
, or, being mischievous <sсript></sсript>
in which I replaced ASCII c
by cyrillic small letter es с
(U+0411) which looks identical.
This makes the problem vanish. The resulting presentation.html
contains now (after bs export --no-inline
):
<script>
function create() {
return remark.create({
source: "# Example code:\n\n```html\n<sсript srс=\"https://code.jquery.com/jquery-3.3.1.min.js\"></sсript>\n```\n\n",
ratio: '16:9',
highlightLines: true,
countIncrementalSlides: false,
highlightStyle: 'github'
});
}
</script>
Which even if it looks indentical to the first case, (but with the c
replaced by cyrillic) it does not produce any error in the browser nor the editors tried. The resulting page now renders fine:
When the stylesheet contains something like:
.acmecorp {
display: flex;
flex-direction: row;
justify-content: center;
p {
text-align: left;
padding-left: 3em;
background-image: url(assets/acmelogo.png);
background-size: 2em 2em;
background-repeat: no-repeat;
background-position: top 0.3em left 0.3em;
}
}
things look great when serving, but not-so-great when exporting to HTML or PDF. That's because the regular expression for CSS image URLs only matches url(file://...)
references, not relative references:
const CssImagesRegExp = /(url\()((file:\/\/)[^)]+)(\))/gm;
Can this be updated to also pick up paths that do not start with a scheme or slash? Anything that doesn't start with [a-z]+:
should be seen as a relative path, but perhaps limiting this to http:
, https:
and data:
makes for an easier negative-lookbehind pattern to write.
Any example about how to use it?
hi there,
i was wondering how (if) one could use emojis in a remark.js presentation built from markdown. Ideally 🐶 would just render as a dog. any chance? thanks
https://github.com/remy/inliner now supports optional inlining of video. It would be nice to expose a similar option for backslide to inline video as well.
When referencing an image, i.e. not inlining it, with ![Alt text][img-id]
and then [img-id]: /img/url
(see reference), desired image is not always well inserted in output medium -- depending on medium/backslide
command:
Medium via command | Inserted or not |
---|---|
bs serve (browser) |
ok, :-) |
bs export (dist/HTML) |
ko, :-( |
bs pdf (pdf/PDF) |
ko, :-( |
See #64 for initial prospection and a demonstrating repository:
https://github.com/vincent-ferotin/backslide-imageinpdf
I get this after run npm install -g backslide
npm ERR! [email protected] install: `node-pre-gyp install --fallback-to-build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node-pre-gyp install --fallback-to-build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the hummus package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-pre-gyp install --fallback-to-build
and the root cause
gyp ERR! stack Error: Can't find Python executable "C:\Users\zhang\Anaconda3\python.EXE", you can set the PYTHON env variable.
gyp ERR! stack at Object.failNoPython (C:\Users\zhang\AppData\Roaming\npm\node_modules\backslide\node_modules\node-gyp\lib\configure.js:483:19)
But I do have C:\Users\zhang\Anaconda3\python.exe
and have my env variables set correctly (because I can enter the Python REPL by typing python
in the CMD).
Could you please help me have a look?
My slides contain both images and mathjax formulars.
I tried to export html file.
When use --no-inline options, the formula displays normally, however, the figures location will be a fullpath instead of a relative path(in this case if I move html file to a host it will not work).
When use bs e
to export, the figure is converted to string data and can be displayed correctly. However the formula will not display correctly.
Is there anyway to solve this problem?
Thanks.
OS: Windows 10
Backslide@feature/refactor
When exporting a presentation that has html with attributes in a code block, the resulting HTML has both escaped and non-escaped quotes.
<html lang="en">
Results in
<html lang="\"en\"">
Because of the un-escaped "
, the resulting HTML is not correct.
HTML attributes in code blocks have only 2 escaped quotes
<html lang=\"en\">
HTML attributes in code blocks have 2 escaped quotes and 2 un-escaped quotes.
Hi Team,
I accidently have run "bs init" a second time. I've lost the source code of my presentation, because the existing "presentation md" was overwritten. Definitely not cool.
Expected behavious: Write only the files that are missing (if any) - NEVER overwrite existing files.
Looking forward to hearing from you,
Sebastian
My template includes files such as .gitignore, a README and the .git folder. It'd be nice if I could list these in something like a .bsignore file so that init wouldn't copy them every time I create a new presentation
When putting text for an inline image (![Alt text](/img/url)
) between backtick quotes (`
), for showing some MarkDown code (see reference), does not prevent image URL replacement by its base64 data counterpart
-- at least for HTML and PDF exports (works well in browser via bs serve
).
Medium via command | Inserted or not |
---|---|
bs serve (in browser) |
ok, :-) |
bs export (dist/HTML) |
ko, :-( |
bs pdf (pdf/PDF) |
ko, :-( |
See #64 for initial prospection and a demonstrating repository:
https://github.com/vincent-ferotin/backslide-imageinpdf
If I try to use a google font like this, the inlining works well in the exported html file:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
However, if I download the font on my computer and use a local URL in @font-face
, the inlining does not work anymore:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(fonts/opensans-latin-400.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Other than that, loving backslide to far, thanks for your work!
about an hour ago!! 😭
Hi @sinedied,
Sorry to bother you, as I'm not sure this issue is related to backslide
, remark
or decktape
...
I failed to properly insert an image when slideshow is rendered as a PDF document, whereas in the browser image is well displayed.
I build a minimal example in https://github.com/vincent-ferotin/backslide-imageinpdf repository, demonstrating the issue.
Material of this repository was built on a Ubuntu
19.04, with yarn
as package manager, [email protected]
, [email protected]
and [email protected]
.
I found no relevant material related to broken images with decktape
on remark
slideshows, but the few slideshows examples I found did not contain images.
My first and naïve intuition would be that at https://github.com/sinedied/backslide/blob/master/backslide.js#L113 no other additional content but the Markdown presentation file, such as images on filesystem, is also passed to Node to be resolved -- but I'm not enough comfortable in JS to assert that.
as titled.
I tried to use some remarkjs plugins (such as remark-toc with backslide), but it is not clear how plugins may be called, because the remark.js inside backslide doesn't seem to provide a use()
function.
If you have some tips or indication on how to proceed, do not hesitate to share.
Thanks for your work.
The installation process is very tedious, because of node-gyp
. I have make a "dockerized" way to use this, the repo is https://github.com/tao12345666333/backslide
If you want to create a new presentation in the $HOME/backslide
directory, you can run init
by using the backslide Docker image directly:
sudo docker run --rm -v $HOME/backslide:/src taobeier/backslide init
This command will create a new presentation along with a template directory in the current directory. The template directory is needed for backslide to transform your Markdown files into HTML presentations.
Then edit the file presentation.md
to get started.
You can create as many markdown presentations as you want in the directory, they will all be based on the same template.
If you want to start a new presentation using your own custom template, you can use sudo docker run -v $HOME/backslide:/src -v <your_template_dir>:/template taobeier/backslide init --template /template
. You can also set the environment variable BACKSLIDE_TEMPLATE_DIR
to change the default template used by bs init
, just pass -e BACKSLIDE_TEMPLATE_DIR
to docker run.
We can use one line command to use it everywhere.
Can we add one link in README to provide this method?
I will continue to optimize it.
Thanks.
I'm using backslide to manage slides used in training, and the training can be divided over multiple sessions, and even across multiple days.
I split up the sessions into a separate .md
file each, and have a top-level index.md
which links to the sessions so I can just fire up bs serve
and navigate to the current session via the slides.
However, I do end up with a large pile of day1_session1.md
, day1_session2.md
, day2_workshop1.md
, etc. I'd prefer to use subdirectories for these, but backslide only supports .md
files in the current directory.
Would supporting subdirectories be possible? I'm fine with having to specify a pattern on the command line here, like bs serve . day*
(serving the current directory, as well as any directory that starts with day
), to prevent having to watch a deep hierarchy of irrelevant directories with assets and PDFs and rendered versions.
Hello
Let's have a presentation with this slide:
# The Code
```cpp
use_lambda([&]() { return 42; });
```
(that's a syntax for lambda in C++)
If I do bs serve
, everything is fine. But if I do bs export
and then open the generated html, the code gets changed to this:
use_lambda([&](file:///home/vorner/pres/) { return 42; });
(and everything starting with the tripple slash turns into a gray comment, but that would be correct if such text actually was part of C++ code).
I think something is confused about that [&]()
sequence, which is a bit link-like. If I put a space before the parentheses ([&] ()
), everything is fine.
I'm using backslide 2.3.7, on Linux.
macOS Mojave 10.14.5
backslide 2.3.4
decktape 2.9.3
Node v10.16.0
I inherited a project that uses a few custom scripts that essentially run bs pdf
and bs s
. I'm able to run the script that exports my .md
to PDFs but there are a 2 .md
files that when I run script doesn't work.
After adding --verbose
to the script that runs the bs pdf
command I get the following error below.
What's strange is the rest of my .md
files pull from the same source files to build the PDFs as the ones that are giving me issues, and when I run the script that calls bs s
it's able to start the server and show the HTML files without any issue.
100% exporting file 1/1
0% converting pdf 1/1
Loading page file:///private/var/folders/c1/hns208rs1wqd_prb__v_0mgh0000gn/T/tmp.lZG7ajWH/.tmp/pdf/[name-of-file].html ...
Page error: ReferenceError: create is not defined
at onload (file:///private/var/folders/c1/hns208rs1wqd_prb__v_0mgh0000gn/T/tmp.lZG7ajWH/.tmp/pdf/[name-of-file].html:14:37)
Loading page finished with status: 0
No supported DeckTape plugin detected, falling back to generic plugin
Generic plugin activated
Printing slide #1 ( 1/ ?) ...
Printed 1 slides
100% converting pdf 1/1
According to hummus#394, Hummus does not install under node > v12.
With node v13 on Arch linux I've a similar error when trying to install backslide 2.3.7 :
18119 verbose stack Error: [email protected] install: `node-pre-gyp install --fallback-to-build $EXTRA_NODE_PRE_GYP_FLAGS`
18119 verbose stack Exit status 118119 verbose stack at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
18119 verbose stack at EventEmitter.emit (events.js:210:5)
18119 verbose stack at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
18119 verbose stack at ChildProcess.emit (events.js:210:5)
18119 verbose stack at maybeClose (internal/child_process.js:1023:16)18119 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:281:5)18120 verbose pkgid [email protected]
Any insight on how to build backslide with a recent nodejs ?
Thanks a lot for backslide.
I could not get backslide work on my macbook(MacOS 10.13.1 (17B48)). I was following your instruction on README.md but got following errors:
ZMBP:slides czhiling$ bs init
fs.js:904
return binding.readdir(pathModule._makeLong(path), options.encoding);
^
Error: ENOENT: no such file or directory, scandir '/usr/local/lib/node_modules/backslide/node_modules/node-sass/vendor'
at Object.fs.readdirSync (fs.js:904:18)
at Object.getInstalledBinaries (/usr/local/lib/node_modules/backslide/node_modules/node-sass/lib/extensions.js:128:13)
at foundBinariesList (/usr/local/lib/node_modules/backslide/node_modules/node-sass/lib/errors.js:20:15)
at foundBinaries (/usr/local/lib/node_modules/backslide/node_modules/node-sass/lib/errors.js:15:5)
at Object.module.exports.missingBinary (/usr/local/lib/node_modules/backslide/node_modules/node-sass/lib/errors.js:45:5)
at module.exports (/usr/local/lib/node_modules/backslide/node_modules/node-sass/lib/binding.js:15:30)
at Object.<anonymous> (/usr/local/lib/node_modules/backslide/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
Any suggestion to solve it?
Zhiling
I'm using font awesome. bs serve
works like a charm (thank for this nice tool), but when exporting, the font css in the final html lokks like:
@font-face{font-family:'Font Awesome 5 Brands';font-style:normal;font-weight:normal;src:url('data:application/vnd.ms-fontobject;base64,');src:url('data:application/vnd.ms-fontobject;base64,')
The font is empty.
I receive the following installation errors from npm while installing backslide on my windows 10 maschine:
npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha1-tKxAZIEH/c3PriQvQovqihTU8b8= integrity checksum failed when using sha1: wanted sha1-tKxAZIEH
/c3PriQvQovqihTU8b8= but got sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==. (3555 bytes)
npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
npm WARN notice [SECURITY] debug has the following vulnerability: 1 low. Go here for more details: https://nodesecurity.io/advisories?search=debug&version=2.6.8 - Run npm i npm@latest -g
to upgrade y
our npm version, and then npm audit
to get more info.
C:\Users\alexa\AppData\Roaming\npm\bs -> C:\Users\alexa\AppData\Roaming\npm\node_modules\backslide\bin\bs
[email protected] install C:\Users\alexa\AppData\Roaming\npm\node_modules\backslide\node_modules\decktape\node_modules\hummus
node-pre-gyp install --fallback-to-build
node-pre-gyp WARN Tried to download(404): https://hummus.s3-us-west-2.amazonaws.com/hummus/v1.0.87/node-v57-win32-x64.tar.gz
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v57 ABI, unknown) (falling back to source compile with node-gyp)
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at PythonFinder.failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack at PythonFinder. (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack at FSReqWrap.oncomplete (fs.js:152:21)
gyp ERR! System Windows_NT 10.0.17134
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\Users\al
exa\AppData\Roaming\npm\node_modules\backslide\node_modules\decktape\node_modules\hummus\binding\hummus.node" "--module_name=hummus" "--module_path=C:\Users\alexa\AppData\Roaming\npm\n
ode_modules\backslide\node_modules\decktape\node_modules\hummus\binding" "--napi_version=3" "--node_abi_napi=napi"
gyp ERR! cwd C:\Users\alexa\AppData\Roaming\npm\node_modules\backslide\node_modules\decktape\node_modules\hummus
gyp ERR! node -v v8.11.2
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=
C:\Users\alexa\AppData\Roaming\npm\node_modules\backslide\node_modules\decktape\node_modules\hummus\binding\hummus.node --module_name=hummus --module_path=C:\Users\alexa\AppData\Roaming\npm\node_module
s\backslide\node_modules\decktape\node_modules\hummus\binding --napi_version=3 --node_abi_napi=napi' (1)
node-pre-gyp ERR! stack at ChildProcess. (C:\Users\alexa\AppData\Roaming\npm\node_modules\backslide\node_modules\decktape\node_modules\hummus\node_modules\node-pre-gyp\lib\util\compile.j
s:83:29)
node-pre-gyp ERR! stack at emitTwo (events.js:126:13)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:214:7)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:925:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
node-pre-gyp ERR! System Windows_NT 10.0.17134
node-pre-gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\alexa\AppData\Roaming\npm\node_modules\backslide\node_modules\decktape\node_modules\hummus\node_modules\node-pre-g
yp\bin\node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd C:\Users\alexa\AppData\Roaming\npm\node_modules\backslide\node_modules\decktape\node_modules\hummus
node-pre-gyp ERR! node -v v8.11.2
node-pre-gyp ERR! node-pre-gyp -v v0.10.0
node-pre-gyp ERR! not ok
Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\alexa\AppData\Roaming
npm\node_modules\backslide\node_modules\decktape\node_modules\hummus\binding\hummus.node --module_name=hummus --module_path=C:\Users\alexa\AppData\Roaming\npm\node_modules\backslide\node_modules\deckta
pe\node_modules\hummus\binding --napi_version=3 --node_abi_napi=napi' (1)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\backslide\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node-pre-gyp install --fallback-to-build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\alexa\AppData\Roaming\npm-cache_logs\2018-07-04T16_10_11_222Z-debug.log
I installed Backslide using npm, and when I tried to initialize in a new folder I am getting following error.
c:\bs\test>bs init
C:\Program Files\nodejs\node_modules\backslide\backslide.js:374
_exit(error, code = 1) {
^
SyntaxError: Unexpected token =
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:413:25)
at Object.Module._extensions..js (module.js:452:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (C:\Program Files\nodejs\node_modules\backslide\bin\bs
:2:1)
at Module._compile (module.js:434:26)
at Object.Module._extensions..js (module.js:452:10)
Environment:
OS: Windows 7 64 Bit
Node: v4.0.0
npm: v3.8.2
hi
i'm having trouble including images in exported presentations. if i do bs serve
, i can see the image, if i do bs e
i cannot. in the resulting html export, it says <img src="undefined">
here is my source code
```
title: My Presentation
class: animation-fade
layout: true
<!-- This slide will serve as the base layout for all your slides -->
.bottom-bar[
{{title}}
]
---
class: impact
# {{title}}
## With a good subtitle :-)
---
# images
![](tree.jpg)
---
# The basics
## Getting started
Use [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) to write your slides. Don't be afraid, it's really easy!
--
## Making points
Look how you can make *some* points:
--
- Create slides with your **favorite text editor**
--
- Focus on your **content**, not the tool
--
- You can finally be **productive**!
---
# There's more
## Syntax highlighting
You can also add `code` to your slides:
```html
<div class="impact">Some HTML code</div>
```
## CSS classes
You can use .alt[shortcut] syntax to apply .big[some style!]
...or just <span class="alt">HTML</span> if you prefer.
---
# And more...
## 12-column grid layout
Use to the included **grid layout** classes to split content easily:
.col-6[
### Left column
- I'm on the left
- It's neat!
]
.col-6[
### Right column
- I'm on the right
- I love it!
]
## Learn the tricks
See the [wiki](https://github.com/gnab/remark/wiki) to learn more of what you can do with .alt[Remark.js]
```
Windows 10
Backslide@feature/refactor
When using export, script references in a code block are expanded:
```html
<script src="index.js"></script>
```
Results in this:
<script src=\"file://C:\\Users\\John\\Documents\\presentation\\slides/index.js\"><\/script>
HTML inside code blocks is not changed
File reference inside a code block was changed to use an absolute path
Related Issue: #29
If mime
is the node package the backslide relies on for that method call, it seems like changing that call to mime.getType()
fixes the issue for me.
This is not an issue, but a question.
I noticed the index.html
in the templates
folder contains some expressions in {{ }}
or even in {{{ }}}
.
In addition some slides in the default presentation also make use of expressions such as {{titlte}
.
I was unable to find documentation about this syntax. In particular these are my questions:
backslide
or of remarkjs
, or even perhaps of some other template library used behind the scenes?Thank you in advance
Does this not support latex?
I followed the steps in the tutorial presentation.
It fails on bs init
as I don't have bower installed:
$ bs init
zsh: command not found: bower
Either add 'bower' as dependency and use the local version or add it as a prerequisite to the tool.
What do you think?
Given the following slide:
# Title
???
Some notes
--
- Inc 1
--
- Inc 2
The PDF export page is empty when generating handout slides (using bs pdf --handouts
)
Unfortunately this is the only way I can show all the notes throughout the whole slide.
macOS 10.12.6 (Sierra)
node v6.10.3
backslide v2.3.0
It seems that when exporting slides to HTML, the relative paths to images, any local JS files, etc. are broken. For example, if the /path/to/my_slides/template/index.html
file looks like,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
{{{style}}}
<script src="remark.min.js"></script>
<!-- Rest of file here -->
and I export my slides to a new directory,
$ bs e -l -r -o /path/to/my_output_dir
the file /path/to/my_output_dir/presentation.html
looks like,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Title</title>
<style>
<!-- Styling stuff here -->
</style>
<script src="file:///path/to/my_slides/template/remark.min.js"></script>
<!-- Rest of file here -->
The path to the Remark JS source is converted to an absolute path and this path is to the original location of the file, not the path to the exported source. This happens with image paths as well when including images with url("relative/path/to/my_image.png")
.
Any idea what is happening here? I've exported slides with backslide previously (with v1.2.1 I believe) and did not run into this issue. Thanks!
Observation:
The export of slides with some Markdown code blocks didn't produce a valid HTML file and the PDF export resulted in some incomplete plain text file, not even a PDF.
Problem:
The slides contain several Markdown code blocks where one contained several script
tags. After removing these tags, the export to HTML and PDF worked properly.
Further investigation revealed that the problem can be exploited to do cross-site scripting.
What makes the issue worse, the bs serve
development server is not affected, hence the bug is not triggered during the creation of slides but might cause (security) issues later when creating static HTML files. Maybe there is some automated process that creates and deploys slides on the fly.
Example:
title: Script tag test
name: inverse
layout: true
class: center, middle, inverse
---
# Script tag test
---
## Some code
```xml
<p>lorem ipsum</p>
<script type="text/javascript">
// ...
</script>
<script>
// ...
</script><script>alert(1);</script>
<p>dolor sit amet</p>
\```
---
## The end
(To make this work, remove the backslash that escapes the triple backtick, I had to enter it that way to allow Markdown code block in a Markdown code block in this GH issue)
Expected result:
The slides are exported properly, resulting in a valid HTML with escaped script
tags and a PDF with the complete slides. XSS must not be possible.
Actual result:
The slides work while being served using bs serve
. When exported using bs pdf
, the PDF will be a plain text file containing fragments of the slides and surrounding premark.js code. The HTML export (bs export
) results in an HTML file which will trigger an alert box when being opened in a browser.
When including HTML code snippets in your presentation, including a </script>
tag prevents the presentation from being exported cleanly.
You can see the effect in the starter presentation.-
## Learn the tricks
See the [wiki](https://github.com/gnab/remark/wiki) to learn more of what you can do with .alt[Remark.js]
---
```html
<script></script>
```
This is what the output looks like from bs export
Attached is the generated HTML file.
The syntax highlighting makes it clear where the error is:
When trying to run bs pdf
in a backslide project folder whose name contains a whitespace, it does not work.
To reproduce:
$ mkdir "some test"
$ cd "some test"
$ bs init
$ bs pdf
100% exporting file 1/1
0% converting pdf 1/1
An error occurred during pdf conversion: Command failed: node <path-to-npm>/lib/node_modules/backslide/node_modules/decktape/decktape.js -p 1000 file:///tmp/other test/.tmp/pdf/presentation.html pdf/presentation.pdf
If I run manually the shown command, but using quotes around the path, it works well:
$ node <path-to-npm>/lib/node_modules/backslide/node_modules/decktape/decktape.js -p 1000 "file:///tmp/other test/.tmp/pdf/presentation.html" pdf/presentation.pdf
Loading page file:///tmp/other test/.tmp/pdf/presentation.html ...
Loading page finished with status: 0
Remark JS plugin activated
Printing slide #8 (8/8) ...
Printed 8 slides
And of course backslide works well in a folder with no whitespaces:
$ mkdir "test"
$ cd "test"
$ bs init
$ bs pdf
100% exporting file 1/1
100% converting pdf 1/1
From either the init process or another backslide command, it would be wonderful if we could set a default style for all presentations that are created from that point forward. Possibly even defining a theme so that the user could specify, bs init --theme my-theme-name
.
Thank you for this project, it was exactly what I was looking for.
There appears to be a problem inlining Images on Windows though: it just doesn't, as if the --no-inline flag is set. Work fine on OSX. Is this just my setup or replicable?
Using Win7/Node8.9.4, tried with both npm and github installations.
Hi, this tool is great.
How can I disable the slide numbers at bottom bar?
Thanks in advance!
SB
bs init copies a template and generates an example presentation.md file. The presentation.md file illustrates the default template well but not my custom template. It'd be nice if init would copy presentation.md from the template folder so we don't have to manually overwrite it.
As a workaround I'm using a bash script to copy the files instead.
Hello
I'm not sure this is the right place, or if I should try asking for this in some dependency.
I'm using the svgbob tool to draw diagrams. Currently, I have to put them to separate files, then run the tool to convert them and then include as images into the presentation. This works, but is suboptimal, because of the manual steps but also because having to open another file to look at what the image is adds extra work and context switch. It would be much nicer if this was somehow possible to do inline, eg:
# A slide with diagram
```bob
+-----------+
| A box |
+-----------+
```
Then some magic would happen and the presentation would contain the corresponding svg image.
I don't have an exact idea what the magic should be. I don't think hardcoding support for this specific tool makes much sense, but maybe some kind of configuration option of how to handle such block/plugin that it could call into would be nice.
Using 2.3.4 worked fine for me, but upgrading to 2.3.6 this day lead to an unusable backslide. Running backslide (bs serve
, or bs init
) now fails with following error: "/usr/bin/env: «node\r»: No such file or directory...".
A way to reproduce the bug is trying to run same commands for both versions, for 2.3.4 first:
$ mkdir project-2.3.4 && cd project2.3.4
project2.3.4$ yarn add [email protected]
...
project2.3.4$ ./node_modules/backslide/bin/bs init
Presentation initialized successfully
then for 2.3.6:
$ mkdir project-2.3.6 && cd project-2.3.6
project-2.3.6$ yarn add [email protected]
...
project-2.3.6$ ./node_modules/backslide/bin/bs init
/usr/bin/env: «node\r»: Aucun fichier ou dossier de ce type
It seems to me that the main difference responsible of this behaviour stands in bs
file, which at 2.3.4 for its first line ends with a LF, and which at 2.3.6 ends with a CR+LF. Restoring endline with just a LF restores 2.3.4 "saine" and expected behavior (on my Linux though).
I have no idea of why such a change occured, as it seems to not be stored in this git repository (file bin/bs is unchanged since 3 year). Perhaps this is a new behavior introduced by yarn, which lastly bumped its version form 1.17 to 1.19 ?-/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.