index.html (6929B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <link rel="stylesheet" href="remark/styles.css" /> 6 </head> 7 <body> 8 <textarea id="source" style="display: none;"> 9 10 name: title 11 layout: true 12 class: center, middle, inverse 13 --- 14 name: leftmenu 15 layout: true 16 --- 17 name: normal 18 layout: true 19 --- 20 21 template: title 22 # remark-slides 23 (very creative name) 24 25 ### [remark](https://github.com/gnab/remark) distribution by [@tongong](https://github.com/tongong) 26 27 --- 28 template: normal 29 # get started 30 31 1. clone the repo (or download as archive from github) 32 ``` 33 git clone https://github.com/tongong/remark-slides.git 34 ``` 35 36 2. Put the `remark` folder where you want to make your presentation. 37 38 3. Start with a new markdown file and compile it to HTML with the compile 39 script or copy the `template.html` outside the remark folder and start 40 modifying it. 41 42 4. Use the following slides as documentation. 43 44 .center[ 45 [markdown](#markdown) - [remarkjs](#remarkjs) - 46 [patches](#patches) - [scripts](#scripts) 47 ] 48 49 --- 50 template: title 51 name: markdown 52 ## markdown 53 (see [cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)) 54 55 --- 56 template: normal 57 58 ## headings 59 ``` 60 # biggest heading 61 ## not so big 62 ### only a little big 63 #### smaller 64 ##### smaller-smaller 65 ###### smol 66 ``` 67 68 ## inline formatting 69 ``` 70 This is **bold**, this *italicized*, this ~~struck through~~ and this `inline code`. 71 ``` 72 73 ## quotes 74 ``` 75 > Quotation is the repetition or copy of someone else's statement or thoughts. 76 > Quotation marks are punctuation marks used in text to indicate a quotation. 77 > Both of these words are sometimes abbreviated as "quote(s)". 78 > .author[~ Wikipedia] 79 ``` 80 (The `author` class does not belong to the markdown specification.) 81 82 --- 83 template: normal 84 85 ## links & images 86 ``` 87 [link text](https://www.example.com) 88 OR https://www.example.com 89 OR <https://www.example.com> 90 OR bla bla [remark] bla [something else][remark] 91 92  93 OR ![alt text][logo] 94 95 [remark]: https://remarkjs.com 96 [logo]: ./example.png 97 ``` 98 99 ## lists 100 ``` 101 1. first item 102 103 2. second item 104 105 also belongs to second item 106 107 3. third item 108 - unordered sublist 109 - third level 110 - next item 111 ``` 112 113 --- 114 template: normal 115 116 ## tables 117 ``` 118 | Syntax | Description | 119 | ---------:| ----------- | 120 | Header | Title | 121 | Paragraph | Text | 122 ``` 123 124 see [cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables) 125 for more. 126 ## code blocks 127 ``` 128 `` ` (<- without the space) 129 { 130 "firstName": "John", 131 "lastName": "Smith", 132 "age": 25 133 } 134 `` ` (<- without the space) 135 ``` 136 137 --- 138 template: title 139 name: remarkjs 140 ## remarkjs 141 (see [documentation](https://github.com/gnab/remark/wiki)) 142 143 --- 144 template: normal 145 146 ## slide separators 147 ``` 148 # Slide 1 149 This is slide 1 150 --- 151 # Slide 2 152 This is slide 2 153 ``` 154 For incremental content you can also use `--` but this does not work 155 everywhere. 156 157 There are also 158 [notes](https://github.com/gnab/remark/wiki/Markdown#slide-notes) but these are 159 not that useful. 160 161 ## slide links 162 ``` 163 # Slide 1 164 --- 165 name: secondslide 166 167 # Slide 2 168 --- 169 # Slide 3 170 171 This is a link to the [second slide](#secondslide). 172 ``` 173 174 --- 175 template: normal 176 177 ## slide properties 178 ``` 179 # boring slide 180 --- 181 class: center 182 key: value 183 184 # styled slide 185 ``` 186 187 - `name` for linking (see previous slide) 188 189 - `class` apply CSS classes 190 - `left`, `center`, `right`, `top`, `middle`, `bottom` for alignment 191 - `inverse` for white font on dark background 192 193 - `background-image: url(image.jpg)` (see [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)) 194 195 - `count: false` excludes the slide from slide counting 196 - `template` 197 - `normal` self-explanatory 198 - `title` applies `inverse`, `center` and `middle` 199 - `leftmenu` see patches section 200 201 --- 202 template: normal 203 ## content classes 204 ``` 205 This is .red[red text]. 206 ``` 207 This wraps the content in `<span>` tags with the name (`red` in this case) as CSS 208 class. Text blocks can be styled this way with `left` (default), `center` and 209 `right`. Other options are: 210 211 - `.red` 212 - `.pull-left` and `.pull-right` for a 2-column layout 213 - `.large` 214 - `.footnote` (renders at the bottom of the slide) 215 216 ## syntax highlighting 217 theoretically possible but not enabled at the moment 218 219 --- 220 template: title 221 name: patches 222 ## custom patches 223 224 --- 225 template: leftmenu 226 left: leftmenu 227 228 ### ← this menu here 229 _(yes the name is bad but I didn't have a better idea at the time...)_ 230 231 To generate slides with this style set `template` to `leftmenu` and `left` to 232 the text: 233 ``` 234 --- 235 template: leftmenu 236 left: Cats 237 This slide is about cats... 238 ``` 239 For a slide without a word in the menu set `left: *` and to reset the menu 240 prefix the word with `_` like `left: _Cats`. 241 242 --- 243 template: leftmenu 244 left: imagelist 245 246 One thing markdown doesn't handle is styling of images. But since this is 247 required for a good presentation I wrote this patch. 248 249 To have one or multiple images nicely aligned wrap them with the `.ilist[]` 250 class: 251 252 .ilist[ 253  254  255  256 ] 257 258 ``` 259 .ilist[ 260 ![a very interesting picture] (img/example1.jpg) 261 ![wow such wisdom] (img/example2.jpg) 262 ![another example] (img/example1.jpg) 263 ] 264 ``` 265 (without the space between `]` and `(`; otherwise remark would render the 266 images (which is really weird inside a code block)) 267 268 --- 269 template: leftmenu 270 left: * 271 272 If the images would get too big for the slide you can append a percentage of 273 the normal size to one of the alt texts to scale them down. 274 275 ``` 276 .ilist[ 277 ![this too big:40] (img/example1.jpg) 278 ![another example] (img/example1.jpg) 279 ] 280 .ilist[ 281 ![this also too big:40] (img/example2.jpg) 282 ] 283 ``` 284 285 .ilist[ 286  287  288 ] 289 .ilist[ 290  291 ] 292 293 --- 294 template: leftmenu 295 left: arrows 296 297 - all arrows like `-` `>` get replaced by arrows like `→` (I can't put them in 298 one code block because then they would get replaced. 299 300 - (unordered) list items starting with such an arrow are also rendered nicely 301 302 - -> like here 303 - or 304 - -> here 305 306 ``` 307 statement => conclusion 308 - one 309 - => two 310 - three 311 ``` 312 (replace `=` with `-`) 313 314 --- 315 template: leftmenu 316 left: other changes 317 318 - removed Google trackers and embedded Google-fonts locally instead of fetching 319 from Google servers every time 320 321 - templates and CSS rules (see remarkjs section) 322 323 - support for tables & quotes 324 325 --- 326 template: normal 327 name: scripts 328 # scripts 329 330 ## pdf export 331 ``` 332 decktape remark index.html index.pdf --chrome-arg=--disable-web-security 333 ``` 334 (I might put that into a shellscript as well...) 335 336 ## compiler script 337 takes the content of a markdown document and wraps it with the HTML boilerplate 338 339 ``` 340 ./remark/compile.sh index.remark 341 ``` 342 343 --- 344 template: title 345 # That's it. 346 347 </textarea> 348 <script src="remark/remark.min.js"></script> 349 <script src="remark/scripts.js"></script> 350 </body> 351 </html>