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,9 +9,9 @@ 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.2.0 --template=./templates/template.revealjs --css custom.css
+  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 ./templates/custom.css ./html/custom.css
+    cp -n ./templates/custom.css ./html/custom.css
   fi
   echo output $file_out
 

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

@@ -2,11 +2,28 @@
 body {
     font-family: 'Arial', sans-serif;
     color: #333;
+    font-size: 36px; /* Base font size */
 }
 
 /* Style for headers */
-.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
+.reveal h1 {
-    color: #00468B; /* Dark blue for headers */
+    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;
 }
 
@@ -20,20 +37,20 @@ body {
 /* Style for code blocks */
 .reveal pre code {
     font-family: 'Courier New', Courier, monospace;
-    background-color: #f9f9f9; /* Light gray background */
+    background-color: #f9f9f9;
-    border: 1px solid #ddd; /* Light gray border */
+    border: 1px solid #ddd;
-    padding: 10px; /* Padding inside the code block */
+    padding: 10px;
-    border-radius: 5px; /* Rounded corners */
+    border-radius: 5px;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
 }
 
 /* Style for inline code */
 .reveal code {
-    background-color: #f4f4f4; /* Slightly different background for inline code */
+    background-color: #f4f4f4;
-    /*border: 1px solid #ccc; */
+    padding: 1px;
-    padding: 1px; /* Padding inside the inline code block */
+    border-radius: 2px;
-    border-radius: 2px; /* Rounded corners */
 }
+
 /* Style for lists */
 .reveal ul, .reveal ol {
     margin-left: 2em;
@@ -52,14 +69,13 @@ body {
     color: #0056b3;
     text-decoration: none;
 }
-
 .reveal a:hover {
     text-decoration: underline;
 }
 
 /* Background color for slides */
 .reveal .slides {
-    background-color: #fcfcfc; /* White background */
+    background-color: #fcfcfc;
 }
 
 /* Style for footer (if used) */
@@ -77,7 +93,6 @@ body {
 .reveal .progress {
     background: #ccc;
 }
-
 .reveal .progress span {
     background: #0056b3;
 }

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$',