diff --git a/.markdownlint.yaml b/.markdownlint.yaml index c3cccca..d9313d5 100644 --- a/.markdownlint.yaml +++ b/.markdownlint.yaml @@ -6,3 +6,5 @@ MD033: - img - a MD034: false +MD046: + style: fenced diff --git a/docs/content/README.md b/docs/content/README.md index 50c268c..46f0798 100644 --- a/docs/content/README.md +++ b/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. diff --git a/docs/content/basic-syntax/lists.md b/docs/content/basic-syntax/lists.md index 78bc56a..599588c 100644 --- a/docs/content/basic-syntax/lists.md +++ b/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 diff --git a/docs/content/getting-started/settings.md b/docs/content/getting-started/settings.md index 2fffc90..028ff0d 100644 --- a/docs/content/getting-started/settings.md +++ b/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) diff --git a/docs/content/layout/grid.md b/docs/content/layout/grid.md index 85a9b66..a5c45d6 100644 --- a/docs/content/layout/grid.md +++ b/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: - +```md + +``` 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: - +```md + +``` 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. - +```md + +``` 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. - +```md + +``` 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 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. - +```md + +``` 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: - +```md + +``` 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. - +```md + +``` 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. - +```md + +``` Where the **type** option of the **justify-content** property can take one of the following types: @@ -376,11 +398,11 @@ The following sample demonstrates the use of align: ```md Item 1 - + Item 2 - + Item 3 - + Item 4 @@ -388,19 +410,19 @@ Item 4 Item 1 Item 2 - + Item 3 - + Item 4 Item 1 - + Item 2 - + Item 3 - + Item 4 ``` @@ -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. - +```html + +``` 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 ``` -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 diff --git a/docs/content/templates/README.md b/docs/content/templates/README.md index 147524a..5c92e32 100644 --- a/docs/content/templates/README.md +++ b/docs/content/templates/README.md @@ -6,24 +6,25 @@ alwaysopen: false pre: " " --- -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 %> <% footer %> ``` + 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 # 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 %> @@ -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 <% title %> @@ -82,9 +81,8 @@ The following slide template is called `tpl-con-2-1-box`. It creates a slide str <% content %> @@ -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]]" --- diff --git a/docs/content/yaml/README.md b/docs/content/yaml/README.md index 78ac04a..ddd1919 100644 --- a/docs/content/yaml/README.md +++ b/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. -