jsz4n/slide_example
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: jsz4n:a8e578ad4bc1de1aaef9c1a663665e468b052b35
Branches Tags
jsz4n:main
...
compare: jsz4n:711c4156a52e300456768f1e8e8785545cf81bf9
Branches Tags
jsz4n:main

2 Commits
a8e578ad4b ... 711c4156a5

Author SHA1 Message Date
jsz4n
711c4156a5 add custom css style to html slides 2025-03-30 20:13:12 +02:00
jsz4n
97197144bb update reveal version 2025-03-30 20:11:12 +02:00
2 changed files with 107 additions and 1 deletions
Expand all files Collapse all files

5
scripts/slides_to_html.sh
View File

@@ -9,7 +9,10 @@ for filename in $*
do do
echo compiling $filename echo compiling $filename
file_out=`echo $filename | sed -e 's/\.md/\.html/g'` 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 -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
if [ -f ./templates/custom.css ]; then
cp ./templates/custom.css ./html/custom.css
fi
echo output $file_out echo output $file_out
done done

103
templates/custom.css Normal file
View File

@@ -0,0 +1,103 @@
/* Set a clean and professional font */
body {
font-family: 'Arial', sans-serif;
color: #333;
}
/* Style for headers */
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
color: #00468B; /* Dark blue for headers */
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; /* Light gray background */
border: 1px solid #ddd; /* Light gray border */
padding: 10px; /* Padding inside the code block */
border-radius: 5px; /* Rounded corners */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
/* Style for inline code */
.reveal code {
background-color: #f4f4f4; /* Slightly different background for inline code */
/*border: 1px solid #ccc; */
padding: 1px; /* Padding inside the inline code block */
border-radius: 2px; /* Rounded corners */
}
/* 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; /* White background */
}
/* 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%;
}