mirror of
https://github.com/samuele-cozzi/obsidian-marp-slides.git
synced 2026-07-22 07:40:25 +00:00
enhance documentation
This commit is contained in:
samuele-cozzi
parent
3e114f3fa1
commit
e4ac3a2ae1
18 changed files with 492 additions and 83 deletions
11
README.md
11
README.md
|
|
@ -3,22 +3,21 @@
|
|||
[](https://github.com/samuele-cozzi/obsidian-marp-slides/releases/latest)[](https://www.codefactor.io/repository/github/samuele-cozzi/obsidian-marp-slides)[](https://codeclimate.com/github/samuele-cozzi/obsidian-marp-slides/maintainability)[](https://codeclimate.com/github/samuele-cozzi/obsidian-marp-slides/test_coverage)[](https://github.com/samuele-cozzi/obsidian-marp-slides/blob/main/LICENSE)
|
||||
<!--  -->
|
||||
|
||||
Marp Slides is very simple & powerful slide deck extension for [Obsidian](href="https://obsidian.md") based on [Marp](https://marp.app/)
|
||||
Marp Slides is very simple & powerful slide deck extension for [Obsidian](href="https://obsidian.md") based on [Marp](https://marp.app/). View the **[DOCS](https://samuele-cozzi.github.io/obsidian-marp-slides/)** for [getting started](https://samuele-cozzi.github.io/obsidian-marp-slides/10.GettingStarted.html)
|
||||
|
||||
|
||||
|
||||
Please refer **[marp](https://marp.app/)** for more details of Marp ecosystem. Refer to **[docs](https://samuele-cozzi.github.io/obsidian-marp-slides/)** for more marp obsidian plugin
|
||||
|
||||
|
||||
See the documentation of [Marpit Markdown](https://marpit.marp.app/markdown) and [the features of Marp Core](https://github.com/marp-team/marp-core#features) about how to write.
|
||||
Marp have powerful tools for Markdown Slides: [Marpit Framework](https://marpit.marp.app/), [CLI tool](https://github.com/marp-team/marp-cli), [Web interface](https://web.marp.app/) and so on.
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
- [Preview Slides](https://samuele-cozzi.github.io/obsidian-marp-slides/21.SlidesPreview.html)
|
||||
- [Export slide deck (html, pdf, pptx, img)](https://samuele-cozzi.github.io/obsidian-marp-slides/22.SlidesExport.html) using Marp cli API
|
||||
- [Use custom theme CSS](https://samuele-cozzi.github.io/obsidian-marp-slides/23.SlidesCustomTheme.html)
|
||||
- [Presenting](https://samuele-cozzi.github.io/obsidian-marp-slides/24.Presenting.html)
|
||||
|
||||
|
||||
|
||||
> ⚠️ Export except HTML requires to install any one of [Google Chrome](https://www.google.com/chrome/), [Chromium](https://www.chromium.org/), or [Microsoft Edge](https://www.microsoft.com/edge). You may also specify the custom path for Chrome / Chromium-based browser by preference `CHEROME_PATH`.
|
||||
|
||||
|
|
|
|||
|
|
@ -3,69 +3,19 @@ title: Getting Started
|
|||
nav_order: 2
|
||||
---
|
||||
|
||||
---
|
||||
title: Getting Started
|
||||
nav_order: 2
|
||||
has_children: true
|
||||
---
|
||||
|
||||
# Getting Started
|
||||
|
||||
## Setup Vault
|
||||
|
||||
Obsidian is a powerful note-taking app that allows users to create and organize their notes and ideas in a highly customizable and intuitive interface. Setting up Obsidian for optimal use requires a few key steps to ensure that you can get the most out of the app's features and capabilities.
|
||||
|
||||
The first step in setting up Obsidian is to create a vault, which is essentially a container for all of your notes and files. This can be done by simply creating a new folder on your computer and selecting it as your vault location within the app's settings. Once your vault is set up, you can start creating notes and organizing them into folders and subfolders as needed.
|
||||
|
||||
Next, it's important to customize Obsidian's settings to fit your workflow and preferences. This includes adjusting things like the default font and theme, enabling or disabling various plugins, and configuring hotkeys and other shortcuts for quick access to frequently used features.
|
||||
|
||||
|
||||
- [Setup Vault](11.SetupVault.md)
|
||||
- [Configuration](12.Configuration.md)
|
||||
- [Marp Syntax](13.MarpSyntax.md)
|
||||
- [First Deck](14.FirstDeck.md)
|
||||
|
||||
|
||||
### Settings
|
||||
|
||||
#### Chrome Path
|
||||
|
||||
Sets the custom path for Chrome or Chromium-based browser to export PDF, PPTX, and image. If it\'s empty, Marp will find out the installed Google Chrome / Chromium / Microsoft Edge.
|
||||
|
||||
#### Theme Path
|
||||
|
||||
Local paths to additional [theme CSS](https://marpit.marp.app/theme-css) for Marp core and Marpit framework. The rule for paths is following Markdown: Styles.
|
||||
|
||||
#### Enable HTML
|
||||
|
||||
Enable all HTML elements in Marp Markdown. Please Attention when you enable!!!
|
||||
|
||||
#### Math Typesettings
|
||||
|
||||
Controls math syntax and the default library for rendering math in Marp Core. A using library can override by math global directive in Markdown.
|
||||
|
||||
## Marp Syntax
|
||||
|
||||
Here are some of the key elements of Marp's syntax, along with references to their official documentation:
|
||||
|
||||
- Markdown: Marp uses standard Markdown syntax for formatting text, including headings, lists, links, images, and more. For a comprehensive guide to Markdown syntax, see the official documentation: https://www.markdownguide.org/basic-syntax/
|
||||
|
||||
- Slide separators: To create a new slide in Marp, you simply insert three hyphens (---) between two lines of text. You can also use three equal signs (===) to create a separator between slides. For more information on slide separators, see: https://marpit.marp.app/markdown#slide-separators
|
||||
|
||||
- Code blocks: Marp supports syntax highlighting for code blocks, which can be useful for technical presentations. To create a code block, simply indent the text by four spaces, or use triple backticks (`) to enclose the code. For more information on code blocks, see: https://marpit.marp.app/markdown#code-blocks
|
||||
|
||||
- Themes: Marp comes with a range of built-in themes for styling your presentations. You can also create your own custom themes using CSS. To apply a theme to your presentation, simply add a theme directive to the first line of your Markdown file. For more information on themes, see: https://marpit.marp.app/theme-css
|
||||
|
||||
- Speaker notes: Marp allows you to add speaker notes to your presentation, which are visible only to the presenter. To create speaker notes, simply add text inside the square brackets ([ ]) following a slide separator. For more information on speaker notes, see: https://marpit.marp.app/markdown#speaker-notes
|
||||
|
||||
These are just a few examples of Marp's syntax. For more detailed information and examples, you can refer to Marp's official documentation: https://marpit.marp.app/
|
||||
|
||||
## First Deck
|
||||
|
||||
When creating a presentation, it's important to plan out your content and structure in advance to ensure that your message is clear and engaging. One way to do this is to break your presentation into a series of slides that each convey a specific point or idea.
|
||||
|
||||
|
||||
|
||||
Here are some tips for creating effective slides in Marp:
|
||||
|
||||
1. First, start by writing your first slide. This slide should introduce your topic and grab your audience's attention. Keep it concise and to the point, and consider using a bold or eye-catching font to make it stand out.
|
||||
|
||||
2. Next, preview your slides to get a sense of the overall flow and structure of your presentation. Marp allows you to view your slides in real-time as you write, so you can see how each slide looks as you go.
|
||||
|
||||
3. For your second slide, consider adding a picture to help illustrate your point. Marp allows you to easily add images to your slides, and you can even set them as the background for your slide for added impact.
|
||||
|
||||
4. When designing your slides, don't forget to add a footer that includes your name, the date, and the title of your presentation. This helps to give your presentation a professional look and feel, and also makes it easier for your audience to keep track of where they are in the presentation.
|
||||
|
||||
5. Finally, consider changing the theme of your presentation to give it a unique and polished look. Marp comes with a range of built-in themes to choose from, or you can create your own custom theme using CSS for a truly personalized touch.
|
||||
|
||||
By following these tips and using Marp's simple and intuitive syntax, you can create engaging and effective presentations that captivate your audience and convey your message with clarity and impact.
|
||||
18
docs/11.SetupVault.md
Normal file
18
docs/11.SetupVault.md
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: Setup Vault
|
||||
parent: GettingStarted
|
||||
---
|
||||
|
||||
# Setup Vault
|
||||
|
||||
Obsidian is a powerful note-taking app that allows users to create and organize their notes and ideas in a highly customizable and intuitive interface. Setting up Obsidian for optimal use requires a few key steps to ensure that you can get the most out of the app's features and capabilities.
|
||||
|
||||
The first step in setting up Obsidian is to create a vault, which is essentially a container for all of your notes and files. This can be done by simply creating a new folder on your computer and selecting it as your vault location within the app's settings. Once your vault is set up, you can start creating notes and organizing them into folders and subfolders as needed.
|
||||
|
||||
Next, it's important to customize Obsidian's settings to fit your workflow and preferences. This includes adjusting things like the default font and theme, enabling or disabling various plugins, and configuring hotkeys and other shortcuts for quick access to frequently used features.
|
||||
|
||||
|
||||
|
||||
- Relative path to files
|
||||
- Not use Wikilinks
|
||||
- Detect all file extension
|
||||
28
docs/12.Configuration.md
Normal file
28
docs/12.Configuration.md
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
title: Configuration
|
||||
parent: GettingStarted
|
||||
---
|
||||
|
||||
# Configuration
|
||||
|
||||
|
||||
|
||||
## Chrome Path
|
||||
|
||||
Sets the custom path for Chrome or Chromium-based browser to export PDF, PPTX, and image. If it\'s empty, Marp will find out the installed Google Chrome / Chromium / Microsoft Edge.
|
||||
|
||||
## Theme Path
|
||||
|
||||
Local paths to additional [theme CSS](https://marpit.marp.app/theme-css) for Marp core and Marpit framework. The rule for paths is following Markdown: Styles.
|
||||
|
||||
## Enable HTML
|
||||
|
||||
Enable all HTML elements in Marp Markdown. Please Attention when you enable!!!
|
||||
|
||||
## Math Typesettings
|
||||
|
||||
Controls math syntax and the default library for rendering math in Marp Core. A using library can override by math global directive in Markdown.
|
||||
|
||||
## HTML Export
|
||||
|
||||
Controls HTML library for eporting HTML File in Marp Cli. bespoke.js is experimental
|
||||
31
docs/13.MarpSyntax.md
Normal file
31
docs/13.MarpSyntax.md
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
title: Marp Syntax
|
||||
parent: GettingStarted
|
||||
---
|
||||
|
||||
# Marp Syntax
|
||||
|
||||
Here are some of the key elements of Marp's syntax, along with references to their official documentation:
|
||||
|
||||
- Markdown: Marp uses standard Markdown syntax for formatting text, including headings, lists, links, images, and more. For a comprehensive guide to Markdown syntax, see the official documentation: https://www.markdownguide.org/basic-syntax/
|
||||
|
||||
- Slide separators: To create a new slide in Marp, you simply insert three hyphens (---) between two lines of text. You can also use three equal signs (===) to create a separator between slides. For more information on slide separators, see: https://marpit.marp.app/markdown#slide-separators
|
||||
|
||||
- Code blocks: Marp supports syntax highlighting for code blocks, which can be useful for technical presentations. To create a code block, simply indent the text by four spaces, or use triple backticks (`) to enclose the code. For more information on code blocks, see: https://marpit.marp.app/markdown#code-blocks
|
||||
|
||||
- Themes: Marp comes with a range of built-in themes for styling your presentations. You can also create your own custom themes using CSS. To apply a theme to your presentation, simply add a theme directive to the first line of your Markdown file. For more information on themes, see: https://marpit.marp.app/theme-css
|
||||
|
||||
- Speaker notes: Marp allows you to add speaker notes to your presentation, which are visible only to the presenter. To create speaker notes, simply add text inside the square brackets ([ ]) following a slide separator. For more information on speaker notes, see: https://marpit.marp.app/markdown#speaker-notes
|
||||
|
||||
These are just a few examples of Marp's syntax. For more detailed information and examples, you can refer to Marp's official documentation: https://marpit.marp.app/
|
||||
|
||||
|
||||
## Auto-scaling features
|
||||
|
||||
- **Fitting header**: Get bigger heading that fit onto the slide by # `<!--fit-->`.
|
||||
- Auto-shrink the **code block**
|
||||
- Auto-shrink **KaTeX block**
|
||||
|
||||
|
||||
|
||||
[reference](https://github.com/marp-team/marp-core#auto-scaling-features)
|
||||
24
docs/14.FirstDeck.md
Normal file
24
docs/14.FirstDeck.md
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
title: First Deck
|
||||
parent: GettingStarted
|
||||
---
|
||||
|
||||
# First Deck
|
||||
|
||||
When creating a presentation, it's important to plan out your content and structure in advance to ensure that your message is clear and engaging. One way to do this is to break your presentation into a series of slides that each convey a specific point or idea.
|
||||
|
||||
|
||||
|
||||
Here are some tips for creating effective slides in Marp:
|
||||
|
||||
1. First, start by writing your first slide. This slide should introduce your topic and grab your audience's attention. Keep it concise and to the point, and consider using a bold or eye-catching font to make it stand out.
|
||||
|
||||
2. Next, preview your slides to get a sense of the overall flow and structure of your presentation. Marp allows you to view your slides in real-time as you write, so you can see how each slide looks as you go.
|
||||
|
||||
3. For your second slide, consider adding a picture to help illustrate your point. Marp allows you to easily add images to your slides, and you can even set them as the background for your slide for added impact.
|
||||
|
||||
4. When designing your slides, don't forget to add a footer that includes your name, the date, and the title of your presentation. This helps to give your presentation a professional look and feel, and also makes it easier for your audience to keep track of where they are in the presentation.
|
||||
|
||||
5. Finally, consider changing the theme of your presentation to give it a unique and polished look. Marp comes with a range of built-in themes to choose from, or you can create your own custom theme using CSS for a truly personalized touch.
|
||||
|
||||
By following these tips and using Marp's simple and intuitive syntax, you can create engaging and effective presentations that captivate your audience and convey your message with clarity and impact.
|
||||
|
|
@ -8,4 +8,5 @@ has_children: true
|
|||
|
||||
- [Slides Preview](21.SlidesPreview.md)
|
||||
- [Slides Export](22.SlidesExport.md)
|
||||
- [Slides Custom Theme](23.SlidesCustomTheme.md)
|
||||
- [Slides Custom Theme](23.SlidesCustomTheme.md)
|
||||
- [Presenting](24.Presenting.md)
|
||||
|
|
@ -11,12 +11,3 @@ Marp for Obsidian lets you preview your Marp Markdown in real time, allowing you
|
|||
|
||||
The preview of the content of active Markdow editor, use the ribbon icon or execute command from the Command Palette (<kbd>Ctrl/Cmd+P</kbd> + 'Slide Preview')
|
||||
|
||||
## Auto-scaling features
|
||||
|
||||
- **Fitting header**: Get bigger heading that fit onto the slide by # `<!--fit-->`.
|
||||
- Auto-shrink the **code block**
|
||||
- Auto-shrink **KaTeX block**
|
||||
|
||||
|
||||
|
||||
[reference](https://github.com/marp-team/marp-core#auto-scaling-features)
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Slides Preview
|
||||
title: Slides Export
|
||||
parent: Features
|
||||
---
|
||||
|
||||
|
|
@ -9,11 +9,11 @@ We have integrated [Marp CLI](https://github.com/marp-team/marp-cli/) to export
|
|||
|
||||
To export the content of active Markdown editor execute command from the Command Palette (<kbd>Ctrl/Cmd+P</kbd>).
|
||||
|
||||
|
||||
|
||||
|
||||
## Supported file types
|
||||
|
||||
- **HTML** Basic export
|
||||
- **HTML** export
|
||||
- **PDF** with or without annotation
|
||||
- **PPTX** PowerPoint document
|
||||
- **PNG** One file for every slide
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Slides Preview
|
||||
title: Slides Custom Themes
|
||||
parent: Features
|
||||
---
|
||||
|
||||
|
|
|
|||
10
docs/24.Presenting.md
Normal file
10
docs/24.Presenting.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: Presenting
|
||||
parent: Features
|
||||
---
|
||||
|
||||
# Presenting
|
||||
|
||||
Marp for Obsidian lets you present your Marp Markdown.
|
||||
|
||||
|
||||
|
|
@ -7,9 +7,10 @@ nav_order: 1
|
|||
|
||||
## Getting Started
|
||||
|
||||
- [Setup Vault](10.GettingStarted.md#setup-vault)
|
||||
- [Marp Syntax](10.GettingStarted.md#marp-syntax)
|
||||
- [First Deck](10.GettingStarted.md#first-deck)
|
||||
- [Setup Vault](11.SetupVault.md)
|
||||
- [Configuration](12.Configuration.md)
|
||||
- [Marp Syntax](13.MarpSyntax.md)
|
||||
- [First Deck](14.FirstDeck.md)
|
||||
|
||||
## Features
|
||||
|
||||
|
|
|
|||
BIN
docs/pictures/CreateSlides.gif
Normal file
BIN
docs/pictures/CreateSlides.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
docs/pictures/ExportPDF.gif
Normal file
BIN
docs/pictures/ExportPDF.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
BIN
docs/pictures/Presenting.gif
Normal file
BIN
docs/pictures/Presenting.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
356
docs/pictures/Sample Pro 1.html
Normal file
356
docs/pictures/Sample Pro 1.html
Normal file
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 44 KiB |
BIN
docs/pictures/ThemeSlides.gif
Normal file
BIN
docs/pictures/ThemeSlides.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
Loading…
Reference in a new issue