add a math example

Makefile

@@ -0,0 +1,21 @@
+watch:
+	./watch_compile.sh $(word 2,$(MAKECMDGOALS))
+
+html:
+	./scripts/slides_to_html.sh slides.md
+
+pdf:
+	./scripts/slides_to_pdf.sh slides.md
+
+serve_html:
+	@echo creating html
+	./scripts/slides_to_html.sh slides.md
+	@echo creating links
+	ln -b -s  `pwd`/templates/custom.css `pwd`/html/custom.css
+	ln -b -s `pwd`/medias `pwd`/html/medias
+	ln -b -s `pwd`/html/slides.html `pwd`/html/index.html
+	@echo launching server...
+	python -m http.server --directory html 7777
+
+clean:
+	rm -rf html/*

README.md

@@ -3,3 +3,23 @@
 This repos aims to show a structured way to generate an html/pdf slideshow from markdown files
 
 it depends on `pandoc` for compiling to pdf/html and `inotify-tools` for watching changes.
+
+## Usage
+
+### Slides in  HTML/RevealJS:
+
+- `make html`: for creating the html file
+- `make serve_html`: for launching the server, then open [https://localhost:7777](https://localhost:7777) on your browser
+
+
+
+### Slides in PDF/LateX:
+
+- `make pdf`: for creating the pdf file
+
+Then open the pdf file in your favorite pdf reader
+
+
+### Compiling the slideset when modifications occur
+
+- `make watch` should launch an inotiy loop recompiling a pdf by default (for html, launch: `make watch html`)

scripts/slides_to_html.sh

@@ -9,7 +9,10 @@ for filename in  $*
 do
   echo compiling $filename
   file_out=`echo $filename | sed -e 's/\.md/\.html/g'`
-  sed -e "s|SLIDEHEAD|$headEscapedForSed|g" $filename | pandoc -s --mathjax -t revealjs -o html/$file_out --slide-level=$SLIDE_LEVEL --highlight-style=$HIGHLIGHT_STYLE -V revealjs-url=https://unpkg.com/reveal.js@5.0.0 --template=./templates/template.revealjs
+  sed -e "s|SLIDEHEAD|$headEscapedForSed|g" $filename | pandoc -s --mathjax="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS_HTML" -t revealjs -o html/$file_out --slide-level=$SLIDE_LEVEL --highlight-style=$HIGHLIGHT_STYLE -V revealjs-url=https://unpkg.com/reveal.js@5.2.0 --template=./templates/template.revealjs --css=./custom.css --toc --toc-depth=1
+  if [ -f ./templates/custom.css ]; then
+    cp -n ./templates/custom.css ./html/custom.css
+  fi
   echo output $file_out
 
 done

slides.md

@@ -33,3 +33,7 @@ import this
 for i in range(10):
     print("Hello world")
 ```
+
+# Some math
+
+$$\bar{x}_w = \frac{\sum_{i=1}^n w_i x_i}{\sum_{i=1}^n w_i} $$

templates/custom.css

@@ -0,0 +1,118 @@
+/* Set a clean and professional font */
+body {
+    font-family: 'Arial', sans-serif;
+    color: #333;
+    font-size: 36px; /* Base font size */
+}
+
+/* Style for headers */
+.reveal h1 {
+    font-size: 2.9em; /* Reduced from 3.77em */
+    color: #00468B;
+    font-weight: bold;
+}
+.reveal h2 {
+    font-size: 1.6em; /* Reduced from 2.11em */
+    color: #00468B;
+    font-weight: bold;
+}
+.reveal h3 {
+    font-size: 1.2em; /* Reduced from 1.55em */
+    color: #00468B;
+    font-weight: bold;
+}
+.reveal h4 {
+    font-size: 0.9em; /* Reduced from 1em */
+    color: #00468B;
+    font-weight: bold;
+}
+
+/* Style for main content */
+.reveal p, .reveal li, .reveal blockquote {
+    font-size: 0.9em;
+    line-height: 1.1;
+    color: #444;
+}
+
+/* Style for code blocks */
+.reveal pre code {
+    font-family: 'Courier New', Courier, monospace;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+/* Style for inline code */
+.reveal code {
+    background-color: #f4f4f4;
+    padding: 1px;
+    border-radius: 2px;
+}
+
+/* Style for lists */
+.reveal ul, .reveal ol {
+    margin-left: 2em;
+}
+
+/* Style for blockquotes */
+.reveal blockquote {
+    border-left: 4px solid #ccc;
+    padding-left: 1em;
+    color: #555;
+    font-style: italic;
+}
+
+/* Style for links */
+.reveal a {
+    color: #0056b3;
+    text-decoration: none;
+}
+.reveal a:hover {
+    text-decoration: underline;
+}
+
+/* Background color for slides */
+.reveal .slides {
+    background-color: #fcfcfc;
+}
+
+/* Style for footer (if used) */
+.reveal .footer {
+    font-size: 0.8em;
+    color: #777;
+}
+
+/* Style for navigation controls */
+.reveal .controls {
+    color: #555;
+}
+
+/* Style for progress bar */
+.reveal .progress {
+    background: #ccc;
+}
+.reveal .progress span {
+    background: #0056b3;
+}
+
+/* Optional: Add a subtle header bar */
+.reveal .header {
+    background-color: #00468B;
+    color: #fff;
+    padding: 5px;
+    text-align: left;
+}
+
+/* Optional: Add a subtle footer bar */
+.reveal .footer-bar {
+    background-color: #00468B;
+    color: #fff;
+    padding: 10px;
+    text-align: right;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+}
+

templates/html_header.md

@@ -1,6 +1,8 @@
-theme: sky
+theme: simple
 width: 1824
 height: 1026
-maxScale: 0.85
+maxScale: 0.81
 margin: 0.02
 progress: true
+showNotes: false
+pdfSeparateFragments: false

templates/template.revealjs

@@ -218,6 +218,9 @@ $endif$
         // Opens links in an iframe preview overlay
         previewLinks: $previewLinks$,
 
+         // Prints each fragment on a separate slide
+        pdfSeparateFragments: $pdfSeparateFragments$,
+
         // Transition style (none/fade/slide/convex/concave/zoom)
         transition: '$transition$',