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