I’m new to HedgeDoc due to my new job. I need to make an important presentation and am not familiar with neither Markdown nor HTML. I need to do it in HedgeDoc due to our internal policies.
There is a slide and presentation mode. Unfortunately, the slide mode does not match the presentation mode (e.g. margins are much wider in the presentation mode than opposed to in the slide mode therefore the text is squashed in the centre with uncontrollable line breaks, embedded images are extremly small in presentation mode but fill out the entire slide in slide mode (as I want them to), there are black borders around images very visible against white background in presentation mode, worst case text is simply cut off etc).
In order to show slide after slide I need to do it in presentation mode. Slide mode is no option.
So - would anyone be willing to share their markdown for a decent presentation? Or are there templates I can use? Can I somehow avoid responsiveness and make the contents static similar to a PDF? Is it possible to simply export the slides in slide mode as PDF?
The current status of presentations and their very unhelpful preview is a pain point we are aware and will change with HedgeDoc 2.0, but this won’t help you until it’s finished.
Presentations I do in HedgeDoc I mostly do by working with two windows one open to the editor and the other looking at what you called presentation mode. It’s a bit cumbersome at times, but at least you get a good impression on what your presentation will look like.
If you’re not too familiar with Markdown already, maybe it’s worthy to look at /features on your instance to get to know it better. I suggest copying the contents in a new pad to try to play around with it. There is also /slide-example for more specific presentation examples (or /p/slide-example to look at the presentation version).
Images can be scaled in HedgeDoc via  see also /features?both#Images. And you can also use plain HTML in markdown and HedgeDoc. Sometimes that helps to accomplish some more complicated tasks for presentations.
Maybe some of your colleagues have some presentations you could base your presentation on or at least they have solved some of the problems you encounter.
About exporting presentations, I know people do that, but I’m not too sure how exactly they do that, so I’m afraid I can’t help there.
Thanks a lot for you advice and your reply I asked a developer in our team to help me out. We created a quick and dirty global style sheet I can now easily modify. Maybe this could be useful for others too? Or perhaps something similar can be done with regards to the documentation of HedgeDoc?
To create slides use:
type: slide
slideOptions:
transition: slide
theme: white
Style sheet (global)
/* Width of text in slides */
.slides {
width: 1200px !important;
}
/* line space bullet list */
.reveal .slides section, .reveal .slides section > section {
line-height: 1.5;
}
/* headers */
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
color: rgba(33, 10, 93, 1);
margin-bottom: 1em;
}
/* text */
.reveal {
color: rgba(33, 10, 93, 1);
font-size: 32px;
}
/* logo as background */
.container {
background: no-repeat url(https://www.xxx.png) top 20px right 20px;
background-size: 10% !important;
}
code {color: #fff573}
.reveal table th { font-size: .5em}
.reveal table td { font-size: .5em}
.container {
background-size: cover;
overflow-y: hidden;
}
.footer {
display: none;
}
Hi @Anna I think sharing templates and approaches to make slides work for diffent usecases is a great idea. the one you shared above might be best to put into Code with
I tried a remix of the two and adapted to my preferences (e.g. Logo on the top left):
---
title: Example Pitch
type: slide
slideOptions:
transition: slide
theme: simple
fragments: true
touch: true
slideNumber: false
progress: true
autoSlide: 30000
defaultTiming: 30
center: true
loop: true
---
<style>
/* Width of text in slides */
.slides { width: 1200px !important; }
/* line space bullet list */
.reveal .slides section, .reveal .slides section > section { line-height: 1.5; }
/* headers */
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { color: rgba(0, 0, 0, 1); margin-bottom: 1em; font-weight: bold; font-size: 48pt}
/* text */
.reveal { color: rgba(0, 0, 0, 1); font-size: 24pt; font-weight: normal;}
/* logo as background */
.container { background: no-repeat url(https://...logo.png) top 20px left 20px; background-size: 10% !important; } code {color: #000000}
.reveal table th { font-size: .5em}
.reveal table td { font-size: .5em}
/*.container { background-size: cover; overflow-y: hidden; }
.footer { display: none; }*/
/* font Inter */
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
/* CSS for font Inter */
.reveal {
font-family: Inter, sans-serif;
font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
.reveal { font-family: InterVariable, sans-serif; }
}
</style>
<!-- First Slide goes here: -->
<!-- .slide: data-background="https://...background-Image1.png" data-background-opacity="0.5" data-background-color="#000" -->
## Title Slide
Text
Note: Title Slide
---
<!-- Next slide goes here -->
Things I could not figure out so far:
How to make the Logo appear on top (or even choose the color/version per slide? similar to the font/text color switching with light/dark background)
AND especially how to make the logo appear in the print view!
How to remove the borders around embedded images!? (the img approach above did not work for me though simple way with the resizing mentioned by @DerMolly did, but the borders and background are back)
I hope this helps and feel free to post your ideas/templates too (I’m also not 100% sure I fully understood the CSS, as I’m not a professional coder)
I asked a developer in our team to help me out. We created a quick and dirty global style sheet I can now easily modify. Maybe this could be useful for others too? Or perhaps something similar can be done with regards to the documentation of HedgeDoc?