add markdown-it plugin support

package.json

@@ -14,26 +14,29 @@
 	"author": "",
 	"license": "MIT",
 	"devDependencies": {
-		"@types/fs-extra": "^11.0.1",
+		"@types/fs-extra": "^11.0.4",
-		"@types/jest": "^29.4.0",
+		"@types/jest": "^29.5.12",
-		"@types/node": "^16.11.6",
+		"@types/node": "^16.18.86",
-		"@types/request": "^2.48.8",
+		"@types/request": "^2.48.12",
 		"@typescript-eslint/eslint-plugin": "5.29.0",
 		"@typescript-eslint/parser": "5.29.0",
 		"builtin-modules": "3.3.0",
 		"esbuild": "0.17.3",
-		"jest": "^29.5.0",
+		"jest": "^29.7.0",
-		"obsidian": "latest",
+		"markdown-it-container": "^4.0.0",
-		"ts-jest": "^29.0.5",
+		"markdown-it-mark": "^4.0.0",
+		"@kazumatu981/markdown-it-kroki": "^1.3.2",
+		"obsidian": "^1.5.7-1",
+		"ts-jest": "^29.1.2",
 		"tslib": "2.4.0",
-		"typescript": "^4.7.4"
+		"typescript": "^4.9.5"
 	},
 	"dependencies": {
-		"@marp-team/marp-cli": "^2.4.0",
+		"@marp-team/marp-cli": "^2.5.0",
-		"@marp-team/marp-core": "^3.5.0",
+		"@marp-team/marp-core": "^3.9.0",
-		"@marp-team/marpit": "^2.4.2",
+		"@marp-team/marpit": "^2.6.1",
 		"esbuild-plugin-copy": "^2.1.1",
-		"fs-extra": "^11.1.1",
+		"fs-extra": "^11.2.0",
 		"gray-matter": "^4.0.3",
 		"jszip": "^3.10.1",
 		"request": "^2.88.2"

src/config/marp.config.js

@@ -0,0 +1,4 @@
+module.exports = ({ marp }) => 
+  marp.use(require("markdown-it-container"), "container")
+  .use(require('markdown-it-mark'))
+  .use(require("@kazumatu981/markdown-it-kroki"),{entrypoint: "https://kroki.io"});

src/main.ts

@@ -239,6 +239,16 @@ export class MarpSlidesSettingTab extends PluginSettingTab {
 					this.plugin.settings.EnableSyncPreview = value;
 					await this.plugin.saveSettings();
 				}));
+
+		new Setting(containerEl)
+			.setName('MarkdownIt Plugins')
+			.setDesc('(Experimental) ...')
+			.addToggle(toggle => toggle
+				.setValue(this.plugin.settings.EnableMarkdownItPlugins)
+				.onChange(async (value) => {
+					this.plugin.settings.EnableMarkdownItPlugins = value;
+					await this.plugin.saveSettings();
+				}));
 	}
 }
 

src/utilities/filePath.ts

@@ -96,7 +96,14 @@ export class FilePath  {
 
     public getLibDirectory(vault: Vault): string {
         const pluginDirectory = this.getPluginDirectory(vault);
-        const path = normalizePath(`${pluginDirectory}lib`) + '/';
+        const path = normalizePath(`${pluginDirectory}lib2`) + '/';
+        //console.log(path);
+        return path;
+	}
+
+    public getMarpEngine(vault: Vault): string {
+        const libDirectory = this.getLibDirectory(vault);
+        const path = normalizePath(`${libDirectory}/marp.config.js`);
         //console.log(path);
         return path;
 	}

src/utilities/libs.ts

@@ -16,9 +16,10 @@ export class Libs {
     loadLibs(app: App){
         const libPathUtility = new FilePath(this.settings);
         const libPath = libPathUtility.getLibDirectory(app.vault);
+
         if (!existsSync(libPath)) {
 			//Download binary
-			const downloadUrl = `https://github.com/samuele-cozzi/obsidian-marp-slides/releases/download/lib-v1/lib.zip`;
+			const downloadUrl = `https://github.com/samuele-cozzi/obsidian-marp-slides/releases/download/lib-v2/lib.zip`;
 
 			const bufs: Uint8Array[] = [];
 			

src/utilities/marpExport.ts

@@ -20,12 +20,19 @@ export class MarpExport {
         const completeFilePath = filesTool.getCompleteFilePath(file);
         const themePath = filesTool.getThemePath(file);
         const resourcesPath = filesTool.getLibDirectory(file.vault);
+        const marpEngineConfig = filesTool.getMarpEngine(file.vault);
 
         if (completeFilePath != ''){            
             //console.log(completeFilePath);
             
             const argv: string[] = [completeFilePath,'--allow-local-files'];
-            
+            //const argv: string[] = ['--engine', '@marp-team/marp-core', completeFilePath,'--allow-local-files'];
+
+            if (this.settings.EnableMarkdownItPlugins){
+                argv.push('--engine');
+                argv.push(marpEngineConfig);
+            }
+
             if (themePath != ''){
                 argv.push('--theme-set');
                 argv.push(themePath);

src/utilities/settings.ts

@@ -6,6 +6,7 @@ export interface MarpSlidesSettings {
 	HTMLExportMode: string;
 	EXPORT_PATH: string;
 	EnableSyncPreview: boolean;
+	EnableMarkdownItPlugins: boolean;
 }
 
 export const DEFAULT_SETTINGS: MarpSlidesSettings = {
@@ -15,5 +16,6 @@ export const DEFAULT_SETTINGS: MarpSlidesSettings = {
 	MathTypesettings: 'mathjax',
 	HTMLExportMode: 'bare',
 	EXPORT_PATH: '',
-	EnableSyncPreview: true
+	EnableSyncPreview: true,
+	EnableMarkdownItPlugins: false
 }

src/views/marpPreviewView.ts

@@ -7,6 +7,10 @@ import { MarpExport } from '../utilities/marpExport';
 import { FilePath } from '../utilities/filePath'
 import { MathOptions } from '@marp-team/marp-core/types/src/math/math';
 
+const markdownItContainer = require('markdown-it-container');
+const markdownItMark = require('markdown-it-mark');
+const markdownItKroki = require('@kazumatu981/markdown-it-kroki');
+
 export const MARP_PREVIEW_VIEW = 'marp-preview-view';
 
 export class MarpPreviewView extends ItemView  {
@@ -34,6 +38,13 @@ export class MarpPreviewView extends ItemView  {
             minifyCSS: true,
             script: false
           });
+
+        if (this.settings.EnableMarkdownItPlugins){
+          this.marp
+            .use(markdownItContainer, "container")
+            .use(markdownItMark)
+            .use(markdownItKroki,{entrypoint: "https://kroki.io"});
+        }
     }
 
     getViewType() {

vault/samples/Sample Markdown-it Plugins.md

@@ -0,0 +1,98 @@
+---
+theme: minimal-container-turquoise
+---
+<!-- _class: lead -->
+# Title
+
+## Subtitle
+
+---
+
+<!-- _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
+
+:::
+
+
+---
+
+# Text Highlights
+
+**[markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)**
+
+This is ==marked== text
+
+---
+
+
+![bg](../attachments/kroki_cheatsheet_20210515_v1.1_EN.jpeg)
+
+---
+
+# PlantUML Diagram
+
+**[markdown-it-kroki](https://github.com/kazumatu981/markdown-it-kroki)**
+
+```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
+```
+
+
+---
+# Mermaid Gant Diagram
+
+**[markdown-it-kroki](https://github.com/kazumatu981/markdown-it-kroki)**
+
+```mermaid
+gantt
+	
+	title A Gant Diagram  
+	dateFormat YYYY-MM-DD  
+	section Section  
+	Initial milestone : milestone, m1, 2014-01-01,
+	Final milestone : milestone, m1, 2014-02-16,
+	A task :a1, 2014-01-01, 30d  
+	Another task :after a1, 20d  
+	section Another
+	Task in sec :2014-01-12, 12d  
+	another task : 24d
+	
+```
+
+---
+
+# CallOuts (Work in Progress)
+
+https://github.com/ebullient/markdown-it-obsidian-callouts
+

vault/themes/minimal-container-turquoise.css

@@ -0,0 +1,152 @@
+/* @theme minimal-container-turquoise */
+
+@import "gaia";
+
+/* 
+Usage:
+- slides: <!-- _class: 'xxx yyy' -->
+- fitting: <!-- fit -->
+
+Classes:
+- First slide: 'lead' 
+- First slide of a section: 'divider'
+- Boxes: 'box-flex box-bg'
+- text: big, small, extrasmall, center
+*/
+
+/* COLOR CONFIGURATION */
+:root {
+    --color-background: #fff;
+    --color-foreground: #455054;
+    --color-highlight: #E69D45;
+    --color-background-stripe: #D4CFC9;
+    --color-dimmed: #308695;
+}
+
+
+section {
+    padding: 0;
+}
+
+p,li {
+    font-size: 0.8em;
+}
+
+header {
+    color: var(--color-background);
+    padding-top:0;
+    margin-top: -10px !important;
+}
+
+footer {
+    border-left: 2px solid;
+    /* border-image: linear-gradient(to right, #000 50%, transparent 50%) 100% 1; */
+    padding: 0px 20px;
+    margin: 10px 20px 10px 60px;
+    height: 40px;
+    font-size: 50%;
+    border-image: linear-gradient(to bottom, rgba(0,0,0,0) 33%,var(--color-dimmed) 33%,var(--color-dimmed) 100%,rgba(0,0,0,0) 75%);
+    border-image-slice: 1;
+}
+
+section::after {
+    left: 0;
+    height: 60px;
+    font-size: 50%;
+    color: var(--color-dimmed);
+} 
+
+h1, h2 {
+    background-color: var(--color-dimmed);
+    color: var(--color-background);
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 25px 25px 15px 25px;
+}
+
+blockquote {
+    width: 60%;
+    text-align: center;
+    align-self: center;
+    padding: 66px;
+    border-radius: 30px;
+    background-color: var(--color-background-stripe, transparent);
+}
+
+blockquote::before,blockquote::after {
+    margin: 10px;
+}
+
+table {
+    width: calc(100% - 80px);;
+}
+
+h3,
+h4,
+h5,
+h6,
+p, strong,
+li,ul,ol,
+blockquote,
+table, 
+code, marp-pre {
+  margin-left: 40px !important;
+  margin-right: 40px !important;
+}
+
+section.lead h2 {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+section.divider h2 {
+    width: 45%;
+}
+
+section.divider {
+    justify-content: center;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: stretch;
+}
+
+
+section.box-flex {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    align-items: stretch;
+}
+
+section.box-flex > * {
+    flex: 1 100%;
+}
+
+section.box-flex > .container{
+    margin: 10px !important;
+    border-radius: 5px;
+    padding: 0.5em;
+    flex: 1 1 0;
+}
+
+section.box-bg > .container {
+    background-color: var(--color-background-stripe,transparent);
+}
+
+section.small p,section.big li {
+    font-size: 1em;
+}
+
+section.small p,section.small li {
+    font-size: 0.6em;
+}
+
+section.extrasmall p, section.extrasmall li {
+    font-size: 0.4em;
+}
+
+section.center p, section.center > ul > li {
+    text-align: center;
+}