formatting

.markdownlint.yaml

@@ -6,3 +6,5 @@ MD033:
     - img
     - a
 MD034: false
+MD046:
+    style: fenced

docs/content/README.md

@@ -1,7 +1,6 @@
----
-description: ""
----
-# Create Awesome Presentations in Obsidian
+# Slides Extended
+
+***Create Awesome Presentations in Obsidian**
 
 [Slides Extended](https://github.com/ebullient/obsidian-slides-extended) is an open source plugin for [Obsidian](https://obsidian.md/) that allows you to create [reveal.js](https://revealjs.com/) based presentations in Obsidian. With this tool anyone who is able to create a note in Obsidian can also create a beautiful presentation.
 

docs/content/basic-syntax/lists.md

@@ -9,12 +9,12 @@ Add ordered (numbered) and unordered lists to slides to present information as b
 ## Unordered Lists
 
 To create an unordered list, start the line with `*` or `-`.
-Alternatively, you can also use `+` to create a [Unordered Fragmented List]({{%relref "fragmentedLists.md"%}})
+Alternatively, you can also use `+` to create a [Unordered Fragmented List](../extend-syntax/fragmentedLists.md)
 
 ## Ordered Lists
 
 To create an ordered list, start the line with any number, followed by a dot and a space. The slide will show the correct numbers in the list.
-Alternatively, you can also start the line with any number, followed by a `)` to create a [Ordered Fragmented List]({{%relref "fragmentedLists.md"%}})
+Alternatively, you can also start the line with any number, followed by a `)` to create a [Ordered Fragmented List](../extend-syntax/fragmentedLists.md)
 
 ## Nesting Lists and Content
 

docs/content/getting-started/settings.md

@@ -18,4 +18,4 @@ Changing the port can be useful if you operate multiple vaults and both have Sli
 
 ## First Steps
 
-[Follow instructions here]({{%relref "firstSteps.md"%}})
+[Follow instructions here](firstSteps.md)

docs/content/layout/grid.md

@@ -18,7 +18,9 @@ Grid layouts drag-and-drop is used to size and position content of your slides.
 
 The following syntax is used to drag-and-drop a grid in Slides Extended:
 
-	<grid drag="width height" drop="x y">
+```md
+<grid drag="width height" drop="x y">
+```
 
 The *width* and *height* values of the **drag** property define the  size of the area in which the content will be displayed. The *x* and *y* values ​​of the **drop** property define the position on the slide where the content should be inserted. 
 
@@ -92,7 +94,9 @@ Bottom
 
 The following syntax is used to define a custom flow for a grid:
 
-	<grid drag="width height" drop="x y" flow="col | row">
+```md
+<grid drag="width height" drop="x y" flow="col | row">
+```
 
 Using a value of **col** or **row** for the **flow** property defines the layout behavior for the grid. If the flow property is not specified then the grid automatically inherits the default *col* flow behavior.
 
@@ -144,7 +148,9 @@ Left
 
 The grid bg property is used to define a custom background for a grid. Children added to the grid are rendered on top of the background.
 
-	<grid  drag="width height" drop="x y" bg="color">
+```md
+<grid  drag="width height" drop="x y" bg="color">
+```
 
 Where the color option of the **bg** property takes any valid [CSS Color Value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). The following sample demonstrates color backgrounds:
 
@@ -166,7 +172,9 @@ Where the color option of the **bg** property takes any valid [CSS Color Value](
 
 The grid border property is used to define a custom border for a grid section. Custom borders can help to highlight or differentiate grids on your slide.
 
-	<grid  drag="width height" drop="x y" border="width style color">
+```md
+<grid  drag="width height" drop="x y" border="width style color">
+```
 
 Where the **width** option of the **border** property takes values of *thin*, *medium*, *thick* or a pixel value such as **10px**. The style option takes values of *dotted*, *solid*, *dashed*, *inset*, or *outset*. And the **color** option takes any valid [CSS Color Value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
 
@@ -190,8 +198,9 @@ thick dotted blue <!-- element drag="30 25" drop="right" border="medium dashed r
 
 The grid animate property is used to define a slide animation a grid section. The animation applies to the grid and all associated children.
 
-	<grid  drag="width height" drop="x y" animate="type speed">
-
+```md
+<grid  drag="width height" drop="x y" animate="type speed">
+```
 
 Where the **type** option of the **animate** property can take one of the following animation types:
 
@@ -217,7 +226,9 @@ Where the **type** option of the **animate** property can take one of the follow
 
 The grid opacity property is used to control the transparency of a grid section. Adjusting the opacity of a section also affects the opacity of all associated children.
 
-	<grid  drag="width height" drop="x y" opacity="level">
+```md
+<grid  drag="width height" drop="x y" opacity="level">
+```
 
 
 Where the **level** option of the **opacity** property can take any value from **0.0** to **1.0**. A grid section with an opacity value of 0.0 is invisible.
@@ -226,8 +237,9 @@ Where the **level** option of the **opacity** property can take any value from *
 
 The grid filter property is used to define filter effects for a grid section. Filter effects on a grid section also affect all associated children.
 
-	<grid  drag="width height" drop="x y" filter="effect">
-
+```
+<grid  drag="width height" drop="x y" filter="effect">
+```
 
 Where the **effect** option of the **filter** property can take one of the following types:
 
@@ -256,7 +268,9 @@ Text is too blurry <!-- element drag="30 25" drop="5 15" bg="#B565A7" filter="bl
 
 The grid rotate property is used to control the 2D rotation of a grid section. Rotation on a grid section also affect all associated children.
 
-	<grid  drag="width height" drop="x y" rotate="deg">
+```md
+<grid  drag="width height" drop="x y" rotate="deg">
+```
 
 Where the **deg** option of the **rotate** property is a postive or negative value indicates a degree of rotation from 0 to 360 degrees.
 
@@ -276,11 +290,15 @@ World! <!-- element drag="40 25" drop="-12 -25" bg="#D65076" rotate="40" -->
 
 The grid **pad** property is used to define custom padding for grid. Custom padding can help to enhance the overall appearance of content by controlling the space around grid children.
 
-	<grid  drag="width height" drop="x y" pad="top right bottom left">
+```md
+<grid  drag="width height" drop="x y" pad="top right bottom left">
+```
 
 Where the **top**, **right**, **bottom**, and **left** options on the **pad** property all take pixel size values. Following standard [CSS Padding Rules](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) these four options can also be specified with just two values or even a single value, for example:
 
-	<grid  drag="width height" drop="x y" pad="10px 15px">
+```md
+<grid  drag="width height" drop="x y" pad="10px 15px">
+```
 
 This sample grid above would display with 10px padding top and bottom and 15px padding left and right. The following sample demonstrates padding:
 
@@ -303,7 +321,9 @@ This sample grid above would display with 10px padding top and bottom and 15px p
 
 The grid **align** property is used to define the horizontal alignment of a grid section.
 
-	<grid  drag="width height" drop="x y" align="type">
+```md
+<grid  drag="width height" drop="x y" align="type">
+```
 
 Where the **type** option of the **align** property can take one of the following types:
 
@@ -360,7 +380,9 @@ The following sample demonstrates the use of stretch alignment:
 
 The grid **justify-content** property is used to define how the grid component distributes space between and around their children.
 
-	<grid  drag="width height" drop="x y" justify-content="type">
+```md
+<grid  drag="width height" drop="x y" justify-content="type">
+```
 
 Where the **type** option of the **justify-content** property can take one of the following types:
 
@@ -376,31 +398,31 @@ The following sample demonstrates the use of align:
 ```md
 <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>
 ```
@@ -411,7 +433,9 @@ Item 4
 
 The grid frag property is used to define fragments for grid. Fragments are used to highlight or incrementally reveal individual elements on a slide.
 
-	<grid  drag="width height" drop="x y" frag="index">
+```html
+    <grid  drag="width height" drop="x y" frag="index">
+```
 
 Where the **index** option of the **frag** property is a postive value indicates the order the fragment will be displayed.
 
@@ -433,7 +457,7 @@ Bottom Grid
 </grid>
 ```
 
-As you have surely seen in the example, you can combine Fragments and [Fragment Lists]({{%relref "fragments.md"%}}) with each other. By default, Fragment Lists generate indexes that start at 1.
+As you have surely seen in the example, you can combine [Fragments](../extend-syntax/fragments.md) and [Fragment Lists](../extend-syntax/fragmentedLists.md) with each other. By default, Fragment Lists generate indexes that start at 1.
 
 ### Reference
 

docs/content/templates/README.md

@@ -6,24 +6,25 @@ alwaysopen: false
 pre: "<i class='fa fa-code' ></i> "
 ---
 
-Slides Extended allows you to design individual slides based on slide templates. Each slide template can have a unique layout and structure that you can draw upon repeatedly over the presentation. Using slide templates makes creating presentations that use different layout formats across different slides easy and fast. Also, slide templates reduce redundant code (aka boilerplate code) in your md presentation document. 
+Slides Extended allows you to design individual slides based on slide templates. Each slide template can have a unique layout and structure that you can draw upon repeatedly over the presentation. Using slide templates makes creating presentations that use different layout formats across different slides easy and fast. Also, slide templates reduce redundant code (aka boilerplate code) in your md presentation document.
 
 ### Example: Using a simple slide template
 
 The following slide template defines a slide structure that has a main content area as well as a footer. It shall be named `tpl-footer` and can be stored as a regular md note anywhere within the Obsidian vault you are using to make the presentation.
 
-```
+```md
 <% content %>
 
 <grid drag="100 6" drop="bottom">
 <% footer %>
 </grid>
 ```
+
 Once we have created this slide template we can reference it in our presentation by making a slide annotation in the following manner:
 
 #### How to use templates
 
-```
+```md
 <!-- slide template="[[tpl-footer]]" -->
 
 # This header will be part of the content section defined in the template
@@ -40,12 +41,11 @@ To place a text into the footer section you have to create a block comment with
 
 Note that every template _must_ contain a `<% content %>` variable _even if it is not used_ in the slide content.
 
-
 ### Optional Variables
 
 By default, every variable in a slide template has to be set by a block comment in the slide. Otherwise, a dummy text will be placed into the variable that reminds you to create a block comment for this variable. But there are scenarios where you don't want this behaviour, such as when you have a citation line in the footer of your template, but you don't need to reference any citations. Therefore you can create a section in the template and add a `?` in its definition:
 
-```
+```md
 <% content %>
 
 <grid drag="100 6" drop="bottom">
@@ -55,12 +55,11 @@ By default, every variable in a slide template has to be set by a block comment
 
 The footer markup won't be visible until you create a footer block comment inside of your slide.
 
-
 ### Advanced example
 
 The following slide template is called `tpl-con-2-1-box`. It creates a slide structure with a narrow header bar at the top end of the slide, 2 broad  columns at the center of the slide as well as a footer bar with a citation line in the bottom of the slide.
 
-```
+```md
 <grid drag="100 10" drop="top" bg="white" align="left" pad="0 20px">
  <% title %>
 </grid>
@@ -82,9 +81,8 @@ The following slide template is called `tpl-con-2-1-box`. It creates a slide str
 <% content %>
 
 <style>
-.horizontal_dotted_line{
-  border-bottom: 2px dotted gray;
-} 
+.horizontal_dotted_line {
+    border-bottom: 2px dotted gray;
 } 
 </style>
 
@@ -103,7 +101,7 @@ The following slide template is called `tpl-con-2-1-box`. It creates a slide str
 
 ### Using templates in a presentation
 
-```
+```md
 ---
 theme: consult
 height: 540
@@ -154,11 +152,11 @@ Umsetzungsschritte
 
 ![Slide](../images/templateSlide.png)
 
-
 ### Default Template
+
 You can define a default Template that will be applied to all slides of a deck by adding the `defaultTemplate` frontmatter property to your yaml:
 
-```
+```md
 ---
 defaultTemplate: "[[tpl-footer]]"
 ---

docs/content/yaml/README.md

@@ -19,8 +19,8 @@ You can customize many setting for your current slide deck by adding one or more
 | separator | Sets the slide separator | string | ^( ?\| )---( ?\| )$ |
 | verticalSeparator | Sets the vertical slide separator | string | ^( ?\| )--( ?\| )$ |
 | enableLinks | Enable backlinks in slides | true / false | false |
-| theme | Sets the theme | [see theme docs]({{%relref "themes"%}}) | black |
-| highlightTheme | Sets the highlight theme | [see theme docs]({{%relref "themes"%}}) | zenburn |
+| theme | Sets the theme | [see theme docs](../themes/README.md) | black |
+| highlightTheme | Sets the highlight theme | [see theme docs](../themes/README.md) | zenburn |
 | css | Adds further css files |  | [] |
 | enableOverview | Shows the Overview Button on the bottom right corner of the slide | true / false | false |
 | enableChalkboard | Activates the chalkboard for slides | true / false | false |
@@ -38,21 +38,21 @@ You can customize many setting for your current slide deck by adding one or more
 | autoSlide | Controls automatic progression to the next slide | number (in milliseconds) | 0 |
 | transition | Transition style | none / fade / slide / convex / concave / zoom | slide |
 | transitionSpeed | Transition speed | default / fast / slow | default |
-| bg | Sets a default background for all slides | [see slide background docs]({{%relref "slideBackground"%}}) | '#ffffff' |
+| bg | Sets a default background for all slides | [see slide background docs](../extend-syntax/slideBackground.md) | '#ffffff' |
 | markdown | Sets options for marked | (see note below) | (see note below) |
 | enableTimeBar | Activates elapsing timer bar for slides | true / false | false |
 | timeForPresentation | Sets the time for elapsing timer in seconds | number | 120 |
-| defaultTemplate | Sets a template that will be applied to all slides | [see template docs]({{%relref "templates/_index.md#default-template"%}}) | null |
-
+| defaultTemplate | Sets a template that will be applied to all slides | [see template docs](../templates/README.md#default-template) | null |
 
 > [!TIP]
 > You can find more possible parameters [here](https://revealjs.com/config/)
-
+<!-- -->
 > [!NOTE]
 > [marked](https://marked.js.org/) is the Markdown parser used by reveal.js.
 > The complete set of marked options is [here](https://marked.js.org/using_advanced#options).
 
 The default value of `markdown`:
+
 ```yaml
 markdown:
   gfm: true
@@ -63,4 +63,3 @@ markdown:
 ```
 
 Other marked options exist, but should not be used with the Slides Extended plugin.
-