HTML CSS JS samples
TodorovicSrdjan edited this page Oct 21, 2023
·
17 revisions
Based on our users' feedback, here are some templates and code samples you can use:
Remark templates
Pure HTML/CSS tricks
- better blockquotes
- add header and footer
- two-column layout
- add a GitLab button
- hidden comments
- better code blocks when disabling syntax highlighter
Integration with remark features
- show bullet points as sub-slides
- add slide-specific CSS
- override layouts' CSS classes
- incremental slides + "sticky" part
Loading JS
- load custom JS just like you would in HTML
- one example to adjust text size
- another example to adjust text size too
<title>Title</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
<textarea id="source">
body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
Code:
def add(a,b)
a + b
end</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create();
</script>