HedgeDoc - Collaborative markdown notes

### Module Example For reference visit the documentation: - [Using the Editor](https://docs.momentumhub.org.au/components/modules/_index/) - [Module Options](https://docs.momentumhub.org.au/reference/module_options/) - [Markdown reference](https://docs.momentumhub.org.au/reference/markdown/) You can use `URL query` or `slideOptions` of the YAML metadata to customize your slides. --- ### First slide `---` Is the divider of slides. It is also possible to have "branches" which adds slides downward instead of to the right of the current slide. `----` creates a new slide below the current one. ---- #### Nested Slide Nested slides are useful for adding additional detail underneath a high-level horizontal slide. --- ### Slide Navigation Use the *Space* key to navigate through all slides. You can also get an overview of all slides with the *Esc* key. On touch-screen enabled devices, the user can swipe to move between slides. --- ### Images Images can be inserted into slides using the following methods: 1. drag an image from the media browser ![image centre x40](https://minio1.greenant.net/media-testing/puppies.jpg) 2. add an image using the syntax: - `[image <ALIGNMENT> <width>x<height>](URL)` - the `URL` can be any web accessible image, but we recommmend that you use images from the media browser to help you keep track of images ---- #### Cutomising Images: `Size` Image size - you can change the size of an image by changing the `<width>x<height>` setting - you can also use the shortcut `x<height>` - this sets the size of the image in `%` - note that currently, the images are set to keep a constant aspect ratio For example, this image is `right` aligned with the syntax `![image centre x20](https://minio1.greenant.net/media-testing/puppies.jpg)`: ![image centre x20](https://minio1.greenant.net/media-testing/puppies.jpg) ---- #### Cutomising Images: `Alignment` Image position - you can change the position of an image by changing the `ALIGNMENT` setting - valid options are: `left`, `right`, `centre` For example, this image is `right` aligned with the syntax `![image right x20](https://minio1.greenant.net/media-testing/puppies.jpg)`: ![image right x20](https://minio1.greenant.net/media-testing/puppies.jpg) --- ### Videos You can add a video by dragging and dropping from the video section of the media browser. The following syntax can be used: ```md {%vimeo ID HEIGHT class %} ``` - the `ID` is the Vimeo video ID - the `HEIGHT` is the height of the video player - `class` refers to the [CSS class](/reference/classes) used to provide a border or adornment to the video {%vimeo 554582312 200 class %} --- #### Scrolling Text {scrolling 20 CLASS} Markdown content {endscrolling} ![image](https://minio1.greenant.net/media-testing/puppies.jpg) --- ### Surveys {%survey 51 400 class %} --- ### Fragments `` Is the fragment syntax Hit the next arrow... ... to step through ... <span>... a</span> <span>fragmented</span> <span>slide.</span> Note: This slide has fragments which are also stepped through in the notes window. --- ### Fragment Styles There are different types of fragments, like: grow shrink fade-out fade-up (also down, left and right!) current-visible Highlight <span>red</span> <span>blue</span> <span>green</span> ---  ### Transition Styles Different background transitions are available via the transition option. This one's called "zoom". `` Is the transition syntax You can use: none/fade/slide/convex/concave/zoom ---  `` Also, you can set different in/out transition You can use: none/fade/slide/convex/concave/zoom postfix with `-in` or `-out` ---  `` Custom the transition speed! You can use: default/fast/slow --- ### Themes reveal.js comes with a few themes built in: Black (default) - White - League - Sky - Beige - Simple Serif - Blood - Night - Moon - Solarized It can be set in YAML slideOptions ---  `` Is the background syntax ---  <div style="color: #fff;"> ## Image Backgrounds `` </div> ----  <div style="color: #fff;"> ## Tiled Backgrounds `` </div> ----  <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> ## Video Backgrounds `` </div> ----  ## ... and GIFs! --- ### Pretty Code ``` javascript function linkify( selector ) { if( supports3DTransforms ) { const nodes = document.querySelectorAll( selector ); for( const i = 0, len = nodes.length; i < len; i++ ) { var node = nodes[i]; if( !node.className ) { node.className += ' roll'; } } } } ``` Code syntax highlighting courtesy of [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/). --- ### Marvelous List - No order here - Or here - Or here - Or here --- ### Fantastic Ordered List 1. One is smaller than... 2. Two is smaller than... 3. Three! --- ### Tabular Tables | Item | Value | Quantity | | ---- | ----- | -------- | | Apples | $1 | 7 | | Lemonade | $2 | 18 | | Bread | $3 | 2 | --- ### Clever Quotes > “For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.” --- ### Intergalactic Interconnections You can link between slides internally, [like this](#/1/3). --- ### Speaker There's a [speaker view](https://github.com/hakimel/reveal.js#speaker-notes). It includes a timer, preview of the upcoming slide as well as your speaker notes. Press the *S* key to try it out. Note: Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit `s` on your keyboard). --- ### Take a Moment Press `B` or `.` on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen. --- ### Print your Slides Down below you can find a print icon<i class="fa fa-fw fa-print"></i>. After you click on it, use the print function of your browser (either CTRL+P or cmd+P) to print the slides as PDF. [See official reveal.js instructions for details](https://github.com/hakimel/reveal.js#instructions-1) --- ### The End