feat: Merge pull request #144 from samuele-cozzi:134-highlighting-mis…

…sing 134-highlighting-missing
samuele-cozzi · Mar 9, 2024 · 50c4453 · 50c4453
2 parents e4a4472 + 04e94c4
commit 50c4453
Show file tree

Hide file tree

Showing 24 changed files with 1,910 additions and 1,097 deletions.
diff --git a/docs/12.Configuration.md b/docs/12.Configuration.md
@@ -7,6 +7,7 @@ parent: Getting Started
 
 ![Settings](pictures/Settings.png)
 
+
 ## 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.
@@ -29,4 +30,18 @@ Controls math syntax and the default library for rendering math in Marp Core. A
 
 ## HTML Export
 
-Controls HTML library for eporting HTML File in Marp Cli. bespoke.js is experimental
+**This is an EXPERIMENTAL feature**
+
+Controls HTML library for eporting HTML File in Marp Cli. bespoke.js is experimental
+
+## Sync Preview
+
+**This is an EXPERIMENTAL feature**
+
+Sync the slide preview with the editor cursor
+
+## Markdown It Plugins
+
+**This is an EXPERIMENTAL feature**
+
+Enable the [Markdown It Plugins](30.Markdown-it-Plugins.md) (Mark, Containers, Kroki)
diff --git a/docs/30.Markdown-it-Plugins.md b/docs/30.Markdown-it-Plugins.md
@@ -0,0 +1,23 @@
+---
+title: Markdown-It Plugins
+nav_order: 4
+---
+
+Markdown-it is a powerful and flexible Markdown parser that allows you to convert Markdown syntax into HTML. It’s widely used for rendering Markdown content on websites, blogs, and documentation.
+
+## Markdown-it Plugins
+
+Markdown-it supports community-written plugins. The Plugins can be loaded like this:
+
+```js
+const md = markdownit
+  .use(plugin1)
+  .use(plugin2, opts, ...)
+  .use(plugin3);
+```
+
+## Marp Slides Markdown-It Plugins
+
+- [Mark](31.Markdown-it-Mark.md)
+- [Containers](32.Markdown-it-Conteiners.md)
+- [Kroki](33.Markdown-it-Kroki.md)
diff --git a/docs/31.Markdown-it-Mark.md b/docs/31.Markdown-it-Mark.md
@@ -0,0 +1,25 @@
+---
+title: Markdown-It Mark
+parent: Markdown-It Plugins
+---
+Markup uses the same conditions as CommonMark [emphasis](http://spec.commonmark.org/0.15/#emphasis-and-strong-emphasis).
+
+`==marked==` => `<mark>inserted</mark>`
+
+## Sample
+
+```markdown
+---
+# Text Highlights
+
+**[markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)**
+
+This is ==marked== text
+---
+```
+
+![alt text](pictures/plugin-mark.png)
+
+## References
+
+- [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)
diff --git a/docs/32.Markdown-it-Conteiners.md b/docs/32.Markdown-it-Conteiners.md
@@ -0,0 +1,55 @@
+---
+title: Markdown-It Conteiners
+parent: Markdown-It Plugins
+---
+
+With this plugin you can create block containers like:
+
+```markdown
+::: container
+*here be dragons*
+:::
+```
+
+.... and specify how they should be rendered. If no renderer defined, `<div>` with
+container name class will be created:
+
+```html
+<div class="container">
+<em>here be dragons</em>
+</div>
+```
+
+## Sample
+
+```markdown
+---
+
+<!-- _class: box-flex -->
+# Columns Containers
+
+**[markdown-it-container](https://github.com/markdown-it/markdown-it-container)**
+
+::: container
+## Colum 1
+
+text dadadas text text text text text text text text text text 
+
+:::
+
+::: container
+## Colum 2
+
+text
+
+:::
+
+---
+```
+
+![1709827719273](attachments/32.Markdown-it-Conteiners/1709827719273.png)
+
+
+## References
+
+- [markdown-it-container](https://github.com/markdown-it/markdown-it-container)
diff --git a/docs/33.Markdown-it-Kroki.md b/docs/33.Markdown-it-Kroki.md
@@ -0,0 +1,48 @@
+---
+title: Markdown-It Kroki
+parent: Markdown-It Plugins
+---
+
+# markdown-it-kroki
+
+> This library was designed to embed [Kroki.io](https://kroki.io/) diagram into [Marp](https://marp.app/) slide decks!!
+
+This library is a plugin for markdown-it to embed figure created by textual syntax.
+To use this package, you can embed **Software Diagram** (like UML) written by **code** in Marp slide decks.
+
+## Sample
+
+```plantuml[platuml image]
+@startuml
+left to right direction
+actor Guest as g
+package Professional {
+actor Chef as c
+actor "Food Critic" as fc
+}
+package Restaurant {
+usecase "Eat Food" as UC1
+usecase "Pay for Food" as UC2
+usecase "Drink" as UC3
+usecase "Review" as UC4
+}
+fc --> UC4
+g --> UC1
+g --> UC2
+g --> UC3
+@enduml
+```
+
+![alt text](pictures/plugin-kroki.png)
+
+If you want to write diagrams, you can use various syntaxes (such as [PlantUML](https://plantuml.com/) or [Mermaid](https://mermaid-js.github.io/mermaid/#/)) within fenced code blocks.
+
+
+> [!NOTE]  
+> This package depends on [Kroki.io](https://kroki.io).   
+> If you want to know which **diagram languages are supported**,
+> please check the official website at [https://kroki.io/](https://kroki.io/).
+
+## References
+
+- [markdown-it-kroki](https://github.com/kazumatu981/markdown-it-kroki)
diff --git a/docs/30.Examples.md → docs/40.Examples.md b/docs/30.Examples.md → docs/40.Examples.md
@@ -1,6 +1,6 @@
 ---
 title: Examples
-nav_order: 4
+nav_order: 5
 ---
 
 # Examples

diff --git a/docs/DeveloperGuide.md b/docs/DeveloperGuide.md
@@ -1,6 +1,6 @@
 ---
 title: Developer Guide
-nav_order: 5
+nav_order: 6
 ---
 
 # Developer Guide

diff --git a/docs/pictures/Sample Markdown-it Plugins.html b/docs/pictures/Sample Markdown-it Plugins.html
diff --git a/docs/pictures/Settings.png b/docs/pictures/Settings.png
diff --git a/docs/pictures/plugin-container.png b/docs/pictures/plugin-container.png
diff --git a/docs/pictures/plugin-kroki.png b/docs/pictures/plugin-kroki.png
diff --git a/docs/pictures/plugin-mark.png b/docs/pictures/plugin-mark.png