- It’s a custom plugin that enables slide in Quartz 4.
- built using remark.
- demo slide
- Slides are divided based on Markdown headings (
# to ######, corresponding to<h1>–<h6>) or horizontal rules (---, corresponding to<hr>)
- Runtime Slide
- Toggle slide - Press
cmd / ctrl+s - Start slide - Click the slide icon button
- Toggle slide - Press
- Footnote Anchors
- Navigate to the correct slide when clicked
- Only works when
enableSPA: falseinquart.config.ts
- Automatic Index Generation
- Content Alignment Option
- URL Parameters Options
Parameter Type Default Description slide boolean falseIf start=trueis set, the slide starts automaticallyratio string 16:9Slide aspect ratio 16:9or4:3scroll boolean falseEnable mouse scroll navigation touch boolean trueEnable touch navigation click boolean falseEnable click-based navigation startOnChange boolean trueAuto-start timer on slide change resetable boolean trueAllow timer reset enabled boolean trueEnable slide timer includePresenterNotes boolean trueDisplay presenter notes in the slide view tags boolean trueDisplay tags on the cover slide index boolean trueDisplays the Table of Contents for the document on the second slide align string leftHorizontal alignment of slide content leftorcenter - Keyboard shortcuts
- All of these shortcuts can also be seen during a presentation by pressing
Hor? hor?: Toggle the help windowj: Jump to next slidek: Jump to previous slideb: Toggle blackout modem: Toggle mirrored mode.c: Create a clone presentation on a new windowp: Toggle PresenterModef: Toggle Fullscreent: Reset presentation timer<number> + <Return>: Jump to slide<number>
- All of these shortcuts can also be seen during a presentation by pressing
- Presenter Notes
- To add presenter notes to a slide, insert a line with three question marks (
???) between the slide content and the notes.- Everything before
???will appear on the slide. - Everything after
???will be shown only as presenter notes.
- Everything before
-
# Header Slide content ??? Presenter Notes
- To add presenter notes to a slide, insert a line with three question marks (
- You must complete all of the following steps for it to work.
Slide.tsx->quartz/components/Slide.tsxslide.inline.ts->quartz/components/scripts/slide.inline.tsslide.js->quartz/static/scripts/slide.jsslide.scss->quartz/components/styles/slide.scssslide-custom.scss->quartz/styles/custom.scss- Instead of replacing or moving the file, the contents must be pasted into
custom.scss
- Instead of replacing or moving the file, the contents must be pasted into
import Slide from './Slide'
export{
...,
Slide
}- Add this at the end of the file
export { mouseEnterHandler, clearActivePopover }export const defaultContentPageLayout: PageLayout = {
// or export const defaultListPageLayout: PageLayout = {
left: [
Component.Flex({
components: [
...,
{ Component: Component.Slide() }
]
})
]
}Component.Slide({
ratio: "16:9" | "4:3", // default 16:9
navigation: {
scroll: boolean, // default false
touch: boolean, // default true
click: boolean, // default false
},
timer: {
startOnChange: boolean, // default true
resetable: boolean, // default true
enabled: boolean, // default true
},
includePresenterNotes: boolean, // default true
tags: boolean, // default true
index: boolean, // default true
align: "left" | "center" // default left
}),- Enjoy the Slide!