### Copy sample config to Hugo root

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/getting-start/configuration.md

This command copies the sample configuration file from the theme's example site to the Hugo root directory. This allows users to quickly set up their site with a pre-configured setup.

```Bash
$ cp themes/docdock/exampleSite/config.toml .
```

--------------------------------

### Preview site locally

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/getting-start/configuration.md

This command starts the Hugo server, allowing you to preview the site locally in your browser. The site will be available at http://localhost:1313.

```Bash
$ hugo server
```

--------------------------------

### Creating a new Hugo site

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/getting-start/installation.md

This command initializes a new Hugo site in the current directory, creating the minimal required directory structure.

```Bash
$ hugo new site .
```

--------------------------------

### Initializing a Git repository

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/getting-start/installation.md

This command initializes a new Git repository in the current directory, allowing you to track changes to your Hugo site.

```Bash
$ git init
```

--------------------------------

### Initializing and updating Git submodules

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/getting-start/installation.md

These commands initialize and update the Git submodules in your Hugo site, ensuring that the DocDock theme is properly installed.

```Bash
$ git submodule init
$ git submodule update
```

--------------------------------

### Button Shortcode Live Examples

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/button.md

Live examples of the button shortcode with different themes and a link to google.com. These examples demonstrate the rendered output of the shortcode.

```html
{{<button href="https://google.com" >}} go to google {{< /button >}}
{{<button href="https://google.com" theme="success">}} Success {{< /button >}}
{{<button href="https://google.com" theme="info">}} Info {{< /button >}}
{{<button href="https://google.com" theme="warning">}} Warning {{< /button >}}
{{<button href="https://google.com" theme="danger">}} Danger ! {{< /button >}}
{{<button href="https://google.com" theme="default">}} Danger ! {{< /button >}}
```

--------------------------------

### Running the Node.js Notes Server

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

These commands are used to install dependencies and start the Node.js server for the speaker notes plugin. The server allows speaker notes to be displayed on a separate device during the presentation.

```bash
npm install
```

```bash
node plugin/notes-server
```

--------------------------------

### Button Shortcode Demo Examples

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/button.md

Examples of using the button shortcode with various themes (success, info, warning, danger, default) and a link to google.com.

```html
{{</* button href="https://google.com" */>}} go to google {{</* /button */>}}
	{{</* button href="https://google.com" theme="success" */>}} Success {{</* /button */>}}
	{{</* button href="https://google.com" theme="info" */>}} Info {{</* /button */>}}
	{{</* button href="https://google.com" theme="warning" */>}} Warning {{</* /button */>}}
	{{</* button href="https://google.com" theme="danger" */>}} Danger ! {{</* /button */>}}
	{{</* button href="https://google.com" theme="default" */>}} Danger ! {{</* /button */>}}
```

--------------------------------

### Cloning DocDock theme using Git

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/getting-start/installation.md

This command clones the DocDock theme from GitHub into the themes/docdock directory of your Hugo site. This method checks out the files locally but won't be visible from the parent git repo.

```Bash
$ git clone https://github.com/vjeantet/hugo-theme-docdock.git themes/docdock
```

--------------------------------

### Installing node-static

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

This command installs the node-static package, which is used to serve static files for the master presentation. This allows the presentation to be accessed locally.

```bash
npm install node-static
```

--------------------------------

### Adding DocDock as a Git submodule

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/getting-start/installation.md

This command adds the DocDock theme as a Git submodule to your Hugo site, allowing you to easily update the theme in the future. This method is recommended for CI tools.

```Bash
$ git submodule add https://github.com/vjeantet/hugo-theme-docdock.git themes/docdock
```

--------------------------------

### Running Hugo server

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/README.md

Starts the Hugo development server. This allows previewing the site locally.

```bash
$ hugo server
```

--------------------------------

### Installing reveal.js-menu with Bower

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/examples/consult/plugin/menu/README.md

Installs the reveal.js-menu plugin using Bower and initializes it within a reveal.js presentation. Requires Bower to be installed and configured. Adds the plugin to the Reveal.initialize options.

```JavaScript
<script src="bower_components/reveal.js-menu/menu.js"></script>
<script>
  Reveal.initialize({
    plugins: [ RevealMenu ]
  });
</script>
```

--------------------------------

### Installing reveal.js-menu with npm

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/examples/consult/plugin/menu/README.md

Installs the reveal.js-menu plugin using npm and initializes it within a reveal.js presentation. Requires npm to be installed and configured. Adds the plugin to the Reveal.initialize options.

```JavaScript
<script src="node_modules/reveal.js-menu/menu.js"></script>
<script>
  Reveal.initialize({
    plugins: [ RevealMenu ]
  });
</script>
```

--------------------------------

### Installing reveal.js-menu with Bower

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/examples/legday/plugin/menu/README.md

This snippet demonstrates how to install the reveal.js-menu plugin using Bower and integrate it into a reveal.js presentation. It includes the necessary HTML script tags and Reveal.initialize configuration.

```shell
bower install reveal.js-menu
```

```html
<script src="bower_components/reveal.js-menu/menu.js"></script>
<script>
  Reveal.initialize({
    plugins: [ RevealMenu ]
  });
</script>
```

--------------------------------

### Installing reveal.js-menu with npm

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/examples/legday/plugin/menu/README.md

This snippet demonstrates how to install the reveal.js-menu plugin using npm and integrate it into a reveal.js presentation. It includes the necessary HTML script tags and Reveal.initialize configuration.

```shell
npm install --save reveal.js-menu
```

```html
<script src="node_modules/reveal.js-menu/menu.js"></script>
<script>
  Reveal.initialize({
    plugins: [ RevealMenu ]
  });
</script>
```

--------------------------------

### Installing reveal.js-menu Manually

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/examples/consult/plugin/menu/README.md

Installs the reveal.js-menu plugin by manually copying the repository into the plugins folder of a reveal.js presentation and initializes it. Adds the plugin to the Reveal.initialize options.

```JavaScript
<script src="plugin/menu/menu.js"></script>
<script>
  Reveal.initialize({
    plugins: [ RevealMenu ]
  });
</script>
```

--------------------------------

### Activate search in config.toml

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/getting-start/configuration.md

This snippet shows how to activate search functionality by adding the specified lines to the `config.toml` file. This enables the generation of a LUNRJS search index file.

```TOML
[outputs]
home = [ "HTML", "RSS", "JSON"]
```

--------------------------------

### Comment out themesdir in config.toml

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/getting-start/configuration.md

This snippet shows how to comment out the `themesdir` line in the `config.toml` file. This ensures that the default `themes/` directory is used for themes.

```TOML
# themesdir = "../.."
```

--------------------------------

### Installing reveal.js-menu Manually

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/examples/legday/plugin/menu/README.md

This snippet demonstrates how to manually install the reveal.js-menu plugin by copying the repository into the plugins folder and integrate it into a reveal.js presentation. It includes the necessary HTML script tags and Reveal.initialize configuration.

```html
<script src="plugin/menu/menu.js"></script>
<script>
  Reveal.initialize({
    plugins: [ RevealMenu ]
  });
</script>
```

--------------------------------

### Alert Shortcode Example

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/alert.md

Illustrates basic usage of the alert shortcode to display a highlighted message.  The example shows how to create an alert box with bold text.

```HTML
{{%alert%}}**This is** an alert !{{%/alert%}}
```

--------------------------------

### Copying sample configuration

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/README.md

Copies the sample configuration file from the theme's exampleSite directory to the Hugo project root. This provides a starting point for configuring the theme.

```bash
$ cp themes/docdock/exampleSite/config.toml .
```

--------------------------------

### Configuring Marked Options

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

This example demonstrates how to configure the `marked` Markdown parser by passing options during Reveal initialization. This allows customization of rendering behavior, such as enabling smartypants.

```javascript
Reveal.initialize({
	// Options which are passed into marked
	// See https://github.com/chjj/marked#options-1
	markdown: {
		smartypants: true
	}
});
```

--------------------------------

### Manage public directory with .gitkeep

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/getting-start/configuration.md

This snippet shows how to manage the `public/` directory by creating a `.gitkeep` file and adding rules to `.gitignore`. This keeps the repository smaller by excluding build result files while ensuring the `public/` directory is tracked.

```Bash
/public/*
!/public/.gitkeep
```

--------------------------------

### Reveal.js Shortcode Source Code Example

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/revealjs.md

Shows the source code example of the revealjs shortcode with parameters for theme and progress bar. The content within the shortcode is formatted as Markdown and rendered as reveal.js slides. The slides are separated by '___' or '---'.

```HTML
{{</*revealjs theme="moon" progress="true"*/>}}

# In the morning

___


## Getting up

- Turn off alarm
- Get out of bed

___

## Breakfast

- Eat eggs
- Drink coffee

---

# In the evening

___

## Dinner

- Eat spaghetti
- Drink wine

___

## Going to sleep

- Get in bed
- Count sheep

{{</*revealjs*/>}}
```

--------------------------------

### Installing Reveal.js Dependencies

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

This shell command installs the necessary dependencies for Reveal.js using npm. This step is required for features like external Markdown and speaker notes to function correctly.

```Shell
$ npm install
```

--------------------------------

### Serving static files

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

This command starts the static file server, making the master presentation accessible via a local URL. This is necessary for the presenter to control the presentation.

```bash
static
```

--------------------------------

### Updating Reveal.js Configuration After Initialization

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

This code demonstrates how to update the Reveal.js configuration after the initial setup using the `configure` method. It shows examples of turning off autoSlide and setting autoSlide to occur every 5 seconds.

```javascript
// Turn autoSlide off
Reveal.configure({ autoSlide: 0 });

// Start auto-sliding every 5s
Reveal.configure({ autoSlide: 5000 });
```

--------------------------------

### Installing Custom Controls Plugin

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/examples/legday/plugin/customcontrols/README.md

This snippet demonstrates how to install the custom controls plugin for reveal.js by including the necessary CSS and JavaScript files and initializing the plugin within the Reveal.initialize configuration.

```HTML
<link rel="stylesheet" href="plugin/customcontrols/style.css">
<script src="plugin/customcontrols/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealCustomControls ],
        // ...
    });
</script>
```

--------------------------------

### Compiling Themes with Grunt

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/css/theme/README.md

This snippet shows how to compile Sass themes to CSS using the Grunt task runner. It requires a reveal.js development environment with Grunt dependencies installed. The command `grunt css-themes` triggers the compilation process as defined in the Gruntfile.

```Shell
grunt css-themes
```

--------------------------------

### Simple Slideshow Presentation Example

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/create-page/page-slide.md

This code snippet provides an example of a simple slideshow presentation created using Markdown and reveal.js delimiters. It includes frontmatter configuration and content for horizontal and vertical slides.

```Markdown
+++

title = "test"
date = "2017-04-24T18:36:24+02:00"
type="slide"

theme = "league"
[revealOptions]
transition= 'concave'
controls= true
progress= true
history= true
center= true
+++

# In the morning

___

## Getting up

- Turn off alarm
- Get out of bed

___

## Breakfast

- Eat eggs
- Drink coffee

---

# In the evening

___

## Dinner

- Eat spaghetti
- Drink wine

___

## Going to sleep

- Get in bed
- Count sheep

```

--------------------------------

### Serving Reveal.js Presentation

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

This shell command starts the Reveal.js presentation server and monitors source files for changes. It allows viewing the presentation in a browser and automatically updates when changes are made to the source files.

```Shell
$ npm start
```

--------------------------------

### Set Hugo theme in config.toml

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/getting-start/configuration.md

This snippet shows how to set the theme in the `config.toml` file.  The `theme` variable should be set to the directory name of the Hugo theme.

```TOML
theme = "<hugo-theme-docdock-dir-name>"
```

--------------------------------

### Reveal.js Shortcode Usage Example

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/revealjs.md

Demonstrates how to use the revealjs shortcode with parameters for theme and progress bar.  The content within the shortcode is formatted as Markdown and rendered as reveal.js slides.  The slides are separated by '___' or '---'.

```HTML
{{<revealjs theme="moon" progress="true">}}

# In the morning

___

## Getting up

- Turn off alarm
- Get out of bed

___

## Breakfast

- Eat eggs
- Drink coffee

---

# In the evening

___

## Dinner

- Eat spaghetti
- Drink wine

___

## Going to sleep

- Get in bed
- Count sheep

{{</revealjs>}}
```

--------------------------------

### RevealJS Presentation Structure

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/getting-start/firstSteps.md

This snippet shows the basic structure of a RevealJS presentation within an Obsidian note using the Advanced Slides plugin. It includes the opening and closing tags, as well as example slide content.

```HTML
{{<revealjs theme="moon" progress="true">}}

#### Hello from Cover Page

---

Greetings from second Slide

{{</revealjs>}}
```

--------------------------------

### Grid Justify Content Example

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/layout/grid.md

Demonstrates how to use the `justify-content` property to control the distribution of space between grid items. The example showcases center, space-between, and space-around options.

```markdown
<grid drag="30 100" drop="left" justify-content="center" bg="red">
Item 1
	
Item 2
	
Item 3
	
Item 4
</grid>

<grid drag="30 100" drop="center" justify-content="space-between" bg="green">
Item 1

Item 2
	
Item 3
	
Item 4
</grid>

<grid drag="30 100" drop="right" justify-content="space-around" bg="coral">
Item 1
	
Item 2
	
Item 3
	
Item 4
</grid>
```

--------------------------------

### Markdown Link Examples

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/basic-syntax/links.md

Demonstrates external links, Obsidian URI links, internal links, and slide links within a Markdown context for Obsidian Advanced Slides.

```Markdown
External Links

http://obsidian.md - automatic!

[Obsidian](http://obsidian.md)

---

Obsidian URI links

[Link to note](obsidian://open?path=D:%2Fpath%2Fto%2Ffile.md)

[Link to note](obsidian://open?vault=MainVault&file=MyNote.md)

---

<!-- .slide: id="InternalLinks" -->
Internal Links

This [[Internal link]] will be displayed as normal text

This [[Internal link|Link]] will use its alias for displaying

---

Slide Links

You can link between slides, [like this](#/1/0).

Or by slide id, [like this](#InternalLinks).
```

--------------------------------

### Basic Reveal.js Presentation Markup

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

A minimal HTML structure for a reveal.js presentation.  It includes the necessary CSS and JavaScript files, along with the basic slide structure.  The `Reveal.initialize()` function is called to start the presentation.

```HTML
<html>
	<head>
		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/white.css">
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section>Slide 1</section>
				<section>Slide 2</section>
			</div>
		</div>
		<script src="js/reveal.js"></script>
		<script>
			Reveal.initialize();
		</script>
	</body>
</html>
```

--------------------------------

### Markdown Fragment Examples

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/extend-syntax/fragments.md

Demonstrates various fragment styles in Markdown syntax for Reveal.js slides, including fade in, fade out, highlight, fade in then out, and slide up effects.

```markdown
Fade in <!-- element class="fragment" -->

Fade out <!-- element class="fragment fade-out" -->

Highlight red <!-- element class="fragment highlight-red" -->

Fade in, then out <!-- element class="fragment fade-in-then-out" -->

Slide up while fading in <!-- element class="fragment fade-up" -->
```

--------------------------------

### Initializing Reveal.js as Multiplex Master

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

This code snippet shows how to initialize Reveal.js as the master presentation in a multiplex setup. It includes the configuration for the multiplex plugin, specifying the secret, ID, and URL of the socket.io server. It also includes dependencies for socket.io, the multiplex master plugin, and the notes-server client.

```javascript
Reveal.initialize({
	// other options...

	multiplex: {
		// Example values. To generate your own, see the socket.io server instructions.
		secret: '13652805320794272084', // Obtained from the socket.io server. Gives this (the master) control of the presentation
		id: '1ea875674b17ca76', // Obtained from socket.io server
		url: 'https://reveal-js-multiplex-ccjbegmaii.now.sh' // Location of socket.io server
	},

	// Don't forget to add the dependencies
	dependencies: [
		{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
		{ src: 'plugin/multiplex/master.js', async: true },

		// and if you want speaker notes
		{ src: 'plugin/notes-server/client.js', async: true }

		// other dependencies...
	]
});
```

--------------------------------

### Grid Stretch Alignment Example

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/layout/grid.md

Demonstrates how to use the `align` property with the `stretch` option to make grid items fill the available space. This example uses images within the grid.

```markdown
<grid drag="100 45" drop="top" flow="row" align="stretch">
![[Title-Wide.png]]
![[Title-Wide.png]]
![[Title-Wide.png]]
</grid>

<grid drag="100 55" drop="bottom" flow="col" align="stretch">
![[Title-Wide.png]]
![[Title-Wide.png]]
</grid>
```

--------------------------------

### Grid Alignment Example (Left, Right, Justify)

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/layout/grid.md

Demonstrates how to use the `align` property to control the horizontal alignment of text within a grid. The example showcases left, right, and justify alignment options.

```markdown
<grid drag="35 20" drop="topleft" align="left">
This text is aligned to the left side of the box
</grid>

<grid drag="35 20" drop="topright" align="right">
This text is aligned to the right side of the box
</grid>

<grid drag="36 20" drop="center" align="justify">
Stretches the text so that each line has equal width (like in newspapers and magazines)
</grid>
```

--------------------------------

### Markdown Slide with Textarea

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

This example demonstrates how to create a slide using Markdown by adding the `data-markdown` attribute to a `<section>` element and wrapping the Markdown content in a `<textarea data-template>`.

```html
<section data-markdown>
	<textarea data-template>
		## Page title

		A paragraph with some text and a [link](http://hakim.se).
	</textarea>
</section>
```

--------------------------------

### Gantt Chart with Mermaid

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/mermaid.md

This code defines a Gantt chart using Mermaid syntax. It outlines tasks, their durations, dependencies, and critical paths, providing a visual representation of a project timeline.

```Mermaid
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d
```

--------------------------------

### Initializing Reveal.js as Multiplex Client

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

This code snippet demonstrates how to initialize Reveal.js as a client presentation in a multiplex setup. It includes the configuration for the multiplex plugin, specifying the ID and URL of the socket.io server. The secret is set to null, indicating that the client does not have control of the master presentation. It also includes dependencies for socket.io and the multiplex client plugin.

```javascript
Reveal.initialize({
	// other options...

	multiplex: {
		// Example values. To generate your own, see the socket.io server instructions.
		secret: null, // null so the clients do not have control of the master presentation
		id: '1ea875674b17ca76', // id, obtained from socket.io server
		url: 'https://reveal-js-multiplex-ccjbegmaii.now.sh' // Location of socket.io server
	},

	// Don't forget to add the dependencies
	dependencies: [
		{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
		{ src: 'plugin/multiplex/client.js', async: true }

		// other dependencies...
	]
});
```

--------------------------------

### Markdown Header Examples

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/basic-syntax/heading.md

Illustrates the syntax for creating headers of different levels (1-6) in Markdown. These headers define the structure and hierarchy of content within a document or slide.

```Markdown
# This is a heading 1
## This is a heading 2
### This is a heading 3 
#### This is a heading 4
##### This is a heading 5
###### This is a heading 6
```

--------------------------------

### Grid Fragments Example

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/layout/grid.md

Demonstrates how to use the `frag` property to create fragments within a grid, allowing elements to appear in a specific order during a presentation.

```markdown
<grid drag="60 55" drop="5 10" bg="red">
### Fragments:
+ Right
+ Bottom
</grid>

<grid drag="25 55" drop="-5 10" bg="green" frag="1">
Right Grid
</grid>

<grid drag="90 20" drop="5 -10" bg="gray" frag="2">
Bottom Grid
</grid>
```

--------------------------------

### Icon Shortcode Usage Example

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/icon.md

Demonstrates how to use the 'icon' shortcode with the 'name' and 'size' parameters to display a film icon with a large size.  The shortcode renders an icon from either Glyphicons or Font Awesome based on the specified name.

```HTML
{{</* icon name="film" size="large" */>}}
```

--------------------------------

### Loading External Markdown File

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

This example shows how to load Markdown content from an external file using the `data-markdown` attribute. It also demonstrates how to customize the separator, vertical separator, notes separator, and charset.

```html
<section data-markdown="example.md"  
         data-separator="^\n\n\n"  
         data-separator-vertical="^\n\n"  
         data-separator-notes="^Note:"  
         data-charset="iso-8859-15">
</section>
```

--------------------------------

### Installing Chart Plugin Dependencies

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/examples/legday/plugin/chart/README.md

This code snippet demonstrates how to include the Chart.js library and the Reveal.js chart plugin in a Reveal.js presentation. It adds the necessary script tags and configures Reveal.js to use the chart plugin.

```HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
<script src="plugin/chart/plugin.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChart ],
        // ...
    });
</script>
```

--------------------------------

### Tip Notice Shortcode Usage

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/notice.md

Demonstrates how to use the Hugo notice shortcode to create a 'tip' disclaimer. The shortcode is invoked with the 'tip' parameter, and the content within the shortcode tags is displayed as a tip.

```HTML
{{%/* notice tip */%}}
A tip disclaimer
{{%/* /notice */%}}
```

--------------------------------

### Sequence Diagram with Mermaid

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/mermaid.md

This code defines a sequence diagram using Mermaid syntax. It illustrates interactions between participants (Alice, Bob, and John) with messages, loops, and notes to represent a communication flow.

```Mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
```

--------------------------------

### Scale Image to a Specific Width

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/basic-syntax/images.md

Demonstrates scaling an image to a specific width using both Obsidian's Markdown syntax and standard Markdown with a URL. The first example uses Obsidian's syntax, while the second uses standard Markdown with a URL.

```Markdown
![[Image.jpg|100]]
```

```Markdown
![Image|100](https://picsum.photos/id/1006/500/300)
```

--------------------------------

### Info Notice Shortcode Usage

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/notice.md

Demonstrates how to use the Hugo notice shortcode to create an 'info' disclaimer. The shortcode is invoked with the 'info' parameter, and the content within the shortcode tags is displayed as an information notice.

```HTML
{{%/* notice info */%}}
An information disclaimer
{{%/* /notice */%}}
```

--------------------------------

### Flowchart Diagram with Mermaid

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/mermaid.md

This code defines a flowchart diagram using Mermaid syntax. It includes nodes with different shapes, link labels, and decision points to illustrate a simple process flow.

```Mermaid
graph LR;
	A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```

--------------------------------

### HTML Fragment Examples

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/extend-syntax/fragments.md

Illustrates the use of different fragment styles directly within HTML for Reveal.js slides, including fade in, fade out, highlight, fade in then out, and slide up effects. The `data-fragment-index` attribute is used to control the order.

```html
<section data-fragment="-1"><p class="fragment" data-fragment-index="0">Fade in <!-- --></p>
<p class="fragment fade-out" data-fragment-index="1">Fade out <!-- --></p>
<p class="fragment highlight-red" data-fragment-index="2">Highlight red <!-- --></p>
<p class="fragment fade-in-then-out" data-fragment-index="3">Fade in, then out <!-- --></p>
<p class="fragment fade-up" data-fragment-index="4">Slide up while fading in <!-- --></p>
</section>
```

--------------------------------

### Note Notice Shortcode Usage

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/notice.md

Demonstrates how to use the Hugo notice shortcode to create a 'note' disclaimer.  The shortcode is invoked with the 'note' parameter, and the content within the shortcode tags is displayed as a note.

```HTML
{{%/* notice note */%}}
A notice disclaimer
{{%/* /notice */%}}
```

--------------------------------

### Warning Notice Shortcode Usage

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/notice.md

Demonstrates how to use the Hugo notice shortcode to create a 'warning' disclaimer. The shortcode is invoked with the 'warning' parameter, and the content within the shortcode tags is displayed as a warning.

```HTML
{{%/* notice warning */%}}
An warning disclaimer
{{%/* /notice */%}}
```

--------------------------------

### Emoji Shortcode Example

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/extend-syntax/emojis.md

This example demonstrates how to use an emoji shortcode in Markdown. The shortcode ':smile:' will be rendered as the 😄 emoji in the slide preview.

```Markdown
:smile: => 😄
```

--------------------------------

### Basic Panel Creation

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/panel.md

Demonstrates the basic usage of the panel shortcode to create a simple panel with default styling.  No specific theme or header/footer is applied.

```HTML
{{%/* panel */%}}this is a panel text{{%/* /panel */%}}
```

--------------------------------

### Initializing Reveal.js with Dependencies

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

This code initializes Reveal.js and defines a set of dependencies. Each dependency object specifies the script source, a condition for loading, and optional async loading and callback functions. It demonstrates how to load plugins like Markdown, Highlight.js, Zoom, Notes, and MathJax.

```javascript
Reveal.initialize({
	dependencies: [
		// Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
		{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },

		// Interpret Markdown in <section> elements
		{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
		{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },

		// Syntax highlight for <code> elements
		{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },

		// Zoom in and out with Alt+click
		{ src: 'plugin/zoom-js/zoom.js', async: true },

		// Speaker notes
		{ src: 'plugin/notes/notes.js', async: true },

		// MathJax
		{ src: 'plugin/math/math.js', async: true }
	]
});
```

--------------------------------

### Generating Documentation Website with Hugo

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/_index.md

This command generates a static website using Hugo with the DocDock theme. It specifies the theme to use during the build process.

```Bash
hugo -t docdock
```

--------------------------------

### Markdown Blockquote Example

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/basic-syntax/blockquotes.md

This snippet shows a basic blockquote using Markdown syntax. It includes an attributed quote from Doug Engelbart.

```Markdown
> Human beings face ever more complex and urgent problems, and their effectiveness in dealing with these problems is a matter that is critical to the stability and continued progress of society.

\- Doug Engelbart, 1961
```

--------------------------------

### Initializing Chalkboard Configuration in Reveal.js

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/examples/legday/plugin/chalkboard/README.md

This code snippet demonstrates how to initialize the Reveal.js chalkboard plugin with various configuration options. It includes settings for boardmarker and chalk appearance, storage, themes, background, grid, eraser, and custom controls. The configuration is passed within the `Reveal.initialize` function.

```javascript
Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			},
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
  			}
  		]
    },
    // ...

});
```

--------------------------------

### Creating a new Hugo site

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/README.md

Creates a new Hugo site in the current directory. This command initializes the basic directory structure required for a Hugo project.

```bash
$ hugo new site .
```

--------------------------------

### Loading Chalkboard and Custom Controls Plugins

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/examples/consult/plugin/chalkboard/README.md

This code snippet demonstrates how to load the Chalkboard and Custom Controls plugins in a reveal.js presentation. It initializes Reveal.js with the necessary plugins to enable chalkboard functionality.

```HTML
<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/chalkboard/customcontrols.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>
```

--------------------------------

### Loading Chalkboard and Custom Controls Plugins

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/examples/legday/plugin/chalkboard/README.md

This code snippet demonstrates how to load the Chalkboard and Custom Controls plugins in a reveal.js presentation. It initializes reveal.js with the necessary plugins to enable chalkboard functionality.

```HTML
<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/chalkboard/customcontrols.js"></script>

<script>
    Reveal.initialize({
        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...
    });
</script>
```

--------------------------------

### Markdown Block Comment Example

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/extend-syntax/blockComment.md

Demonstrates how to use block comments in Markdown to group slide content and apply properties using HTML-style comments.

```markdown
::: block

#### Header
_and_
Paragraph content
*in same block*

:::

---

no color

::: block <!-- element style="background-color: red;" -->

everything inside this block has red background color

::: block <!-- element style="background-color: blue;" -->

blue

:::

red

:::

no color
```

--------------------------------

### Initializing Reveal.js with Server Side Notes Plugin

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

This code snippet demonstrates how to initialize Reveal.js with the server-side notes plugin. It includes the necessary dependencies for socket.io and the notes-server client. This configuration allows speaker notes to be displayed on a separate device.

```javascript
Reveal.initialize({
	...

	dependencies: [
		{ src: 'socket.io/socket.io.js', async: true },
		{ src: 'plugin/notes-server/client.js', async: true }
	]
});
```

--------------------------------

### Panel with Heading and Success Theme

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/panel.md

Shows how to add a heading to the panel using the `header` parameter and apply the 'success' theme.

```HTML
{{%/* panel theme="success" header="panel title" */%}}this is a panel text{{%/* /panel */%}}
```

--------------------------------

### Initializing a Git repository

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/README.md

Initializes a Git repository in the current directory. This allows tracking changes to the Hugo project.

```bash
$ git init
```

--------------------------------

### Vertical Slide Delimiter

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/create-page/page-slide.md

This code snippet shows the delimiter used to indicate the start of a vertical slide in a reveal.js presentation. It uses three underscores on a single line.

```Markdown
___

```

--------------------------------

### Horizontal Slide Delimiter

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/create-page/page-slide.md

This code snippet shows the delimiter used to indicate the start of a horizontal slide in a reveal.js presentation.  It uses three dashes on a single line.

```Markdown
---

```

--------------------------------

### Initializing Reveal.js with Menu Configuration

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/content/examples/consult/plugin/menu/README.md

This code snippet demonstrates how to initialize Reveal.js with a menu configuration object. The configuration includes options for the menu's side, width, slide numbering, title selection, and other customization settings. The menu allows users to navigate the presentation, change themes, and adjust transitions.

```javascript
Reveal.initialize({
  // ...

  menu: {
    // Specifies which side of the presentation the menu will
    // be shown. Use 'left' or 'right'.
    side: 'left',

    // Specifies the width of the menu.
    // Can be one of the following:
    // 'normal', 'wide', 'third', 'half', 'full', or
    // any valid css length value
    width: 'normal',

    // Add slide numbers to the titles in the slide list.
    // Use 'true' or format string (same as reveal.js slide numbers)
    numbers: false,

    // Specifies which slide elements will be used for generating
    // the slide titles in the menu. The default selects the first
    // heading element found in the slide, but you can specify any
    // valid css selector and the text from the first matching
    // element will be used.
    // Note: that a section data-menu-title attribute or an element
    // with a menu-title class will take precedence over this option
    titleSelector: 'h1, h2, h3, h4, h5, h6',

    // If slides do not have a matching title, attempt to use the
    // start of the text content as the title instead
    useTextContentForMissingTitles: false,

    // Hide slides from the menu that do not have a title.
    // Set to 'true' to only list slides with titles.
    hideMissingTitles: false,

    // Adds markers to the slide titles to indicate the
    // progress through the presentation. Set to 'false'
    // to hide the markers.
    markers: true,

    // Specify custom panels to be included in the menu, by
    // providing an array of objects with 'title', 'icon'
    // properties, and either a 'src' or 'content' property.
    custom: false,

    // Specifies the themes that will be available in the themes
    // menu panel. Set to 'true' to show the themes menu panel
    // with the default themes list. Alternatively, provide an
    // array to specify the themes to make available in the
    // themes menu panel, for example...
    //
    // [
    //     { name: 'Black', theme: 'dist/theme/black.css' },
    //     { name: 'White', theme: 'dist/theme/white.css' },
    //     { name: 'League', theme: 'dist/theme/league.css' },
    //     {
    //       name: 'Dark',
    //       theme: 'lib/reveal.js/dist/theme/black.css',
    //       highlightTheme: 'lib/reveal.js/plugin/highlight/monokai.css'
    //     },
    //     {
    //       name: 'Code: Zenburn',
    //       highlightTheme: 'lib/reveal.js/plugin/highlight/zenburn.css'
    //     }
    // ]
    //
    // Note: specifying highlightTheme without a theme will
    // change the code highlight theme while leaving the
    // presentation theme unchanged.
    themes: false,

    // Specifies the path to the default theme files. If your
    // presentation uses a different path to the standard reveal
    // layout then you need to provide this option, but only
    // when 'themes' is set to 'true'. If you provide your own
    // list of themes or 'themes' is set to 'false' the
    // 'themesPath' option is ignored.
    themesPath: 'dist/theme/',

    // Specifies if the transitions menu panel will be shown.
    // Set to 'true' to show the transitions menu panel with
    // the default transitions list. Alternatively, provide an
    // array to specify the transitions to make available in
    // the transitions panel, for example...
    // ['None', 'Fade', 'Slide']
    transitions: false,

    // Adds a menu button to the slides to open the menu panel.
    // Set to 'false' to hide the button.
    openButton: true,

    // If 'true' allows the slide number in the presentation to
    // open the menu panel. The reveal.js slideNumber option must
    // be displayed for this to take effect
    openSlideNumber: false,

    // If true allows the user to open and navigate the menu using
    // the keyboard. Standard keyboard interaction with reveal
    // will be disabled while the menu is open.
    keyboard: true,

    // Normally the menu will close on user actions such as
    // selecting a menu item, or clicking the presentation area.
    // If 'true', the sticky option will leave the menu open
    // until it is explicitly closed, that is, using the close
    // button or pressing the ESC or m key (when the keyboard
    // interaction option is enabled).
    sticky: false,

    // If 'true' standard menu items will be automatically opened
    // when navigating using the keyboard. Note: this only takes
    // effect when both the 'keyboard' and 'sticky' options are enabled.
    autoOpen: true,

    // If 'true' the menu will not be created until it is explicitly
    // requested by calling RevealMenu.init(). Note this will delay
    // the creation of all menu panels, including custom panels, and
    // the menu button.
    delayInit: false
  }
})
```

--------------------------------

### Adding Attributes to Markdown Elements

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/static/revealjs/README.md

This example demonstrates how to add attributes to Markdown elements using special syntax within HTML comments. This is useful for adding fragments and other dynamic behaviors.

```html
<section data-markdown>
	<script type="text/template">
		- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
		- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
	</script>
</section>
```

--------------------------------

### Alert Shortcode with Theme Argument

Source: https://github.com/mszturc/obsidian-advanced-slides/blob/main/docs/themes/docdock/exampleSite/content/shortcodes/alert.md

Shows how to use the alert shortcode by directly passing the theme as an argument, instead of using the `theme` parameter. This is a shorthand notation for setting the theme.

```HTML
{{%/*alert warning*/%}}
```