Add an option to inject custom CSS files

[ankhers]

The current theme documentation says that I need to manually edit the generated HTML file in order to add my own CSS to the presentation. In order to have slipshow used with automated deployments, it would be great to have an option that would allow me to specify one or more CSS files that can be added to the final document.

I would be more than happy to implement this if this is something you would like to see.

[panglesd]

Thanks for offering your help, much appreciated!

Indeed, currently the only way to add a css file is to add html: <link rel="stylesheet" href="...">.
One problem of this is that you do not get a standalone file. Also, it's harder to switch files (eg if the file you want to include is a theme)

I think there are several things we can do to improve the situation:

1. Consider (image) links to css files as css inclusion: ![](path/to/file.css)
2. Have a CLI argument to include a css file --css <path/to/file.css>
3. Have a frontmatter where you can specify css files

I think that for your usecase, and with the current state of the tool, 2. is the better option. Would you agree to implement it? I can provide guidance if needed!

---

Some other comments:

• Since Rewrite it in OCaml #74, there is a significant difference between main and the last released version. If you write a theme, do it on top of main, just in case!
• I need to have two versions of the docs: one for main and one for each released version. Currently, it's based on main but is outdated 😅
• The project is evolving quite quickly these days... So I apologize in advance for any breaking change I will make! For instance, I'll redesign the class names to make them more obviously "slipshow specific".

[ankhers]

I think supporting both 2 and 3 would be the best way to do it.

With having the CLI option, it makes it really easy to include the same CSS file(s) for all presentations. This would be good for something like a theme.

Whereas supporting something in the frontmatter could also be beneficial for something that may not need to be included in every presentation, such as highlighting for a specific programming language, or even minor tweaks for a specific presentation.

If you are okay with this idea, I think I will start with the CLI option.

You also mentioned that this could break your idea of having a completely self contained presentation. This does not necessarily need to be the case. We could specify these CSS files, read them and append the content to the current styling that gets placed in the file itself. There are tradeoffs in doing this, especially for things like highlightjs languages. CDNs make it much easier to cache the content and may be faster at serving the assets than your configured web server. We could also support something like an --impure flag that could change the behaviour of certain other flags. In this case it would allow the presentation to call external css files, where the default would be to have everything bundled into a the single HTML file.

With that said, I am more than happy to follow your vision on this one. You created this wonderful project after all.

[panglesd]

If you are okay with this idea, I think I will start with the CLI option.

Yes, that would be perfect!

I had a look at the current state of the compiler's code. It would need a bit of clean up :) Sorry about that! Let me know if you need any assistance (there is a CONTRIBUTING.md file but currently it mostly contains information for future me (eg releases). I'll try to improve it, but if you have ideas/comments on how to improve it that would be great too!).

The entry point to the CLI code is in the src/compiler/bin/main.ml file.

Actually, there is already an option that is quite close to what you suggest: the --slip-css flag: it replaces slipshow's css by the provided file (using a link if needed, embedding the content otherwise). However, not having any of slipshow's css is bad, as the engine count on some style being set to work properly. Maybe it would be better to:

• Separate the CSS required for the engine (the "internal" css), from the theme (the theme css) in different files: currently they are internally separated, but end up both are in the same file, generated by concatenation of the theme and internal css.
• Always include the internal CSS.
• Have a way to override the theme CSS by providing an alternative one: --theme maybe
• Have a way to include additional CSS files --include-css-file.

If you work toward this, there is no need to do everything in one go! We can improve the situation little by little. And again, tell me how I can improve the contributing experience on this codebase!