marp-dev-preview 0.2.1 → 0.3.0

package/README.md

@@ -73,10 +73,10 @@ mdp my-slides/presentation.md --port 3000 --theme-dir my-themes
 
 In addition to normal browser navigation keys (`Page Up`, `Page Down`, `Home`, `End`), the following bindings are available:
 
-- **Ctrl+f** or **Ctrl+n** — Forward one page  
-- **Ctrl+b** or **Ctrl+p** — Backward one page  
-- **Ctrl+d** — Forward half a page  
-- **Ctrl+u** — Backward half a page  
+- **Ctrl+f** — Forward one page  
+- **Ctrl+b** — Backward one page  
+- **Ctrl+d**  or **Ctrl+n** — Forward half a page  
+- **Ctrl+u**  or **Ctrl+p** — Backward half a page  
 - **gg** — First slide  
 - **G** — Last slide  
 - **:number** — Jump to slide `{number}`  

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marp-dev-preview",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A CLI tool to preview Marp markdown files.",
   "main": "src/marp-dev-preview.mjs",
   "type": "module",

package/src/args.mjs

@@ -9,6 +9,12 @@ export function parseArgs() {
       describe: 'Path to the markdown file to preview',
       type: 'string'
     })
+    .option('containers', {
+      alias: 'c',
+      describe: 'containers for the markdown-it-containers plugin',
+      type: 'array',
+      default: ["note", "info", "warning", "details"]
+    })
     .option('theme-set', {
       alias: 't',
       describe: 'Directories for custom themes',

package/src/client.js

@@ -147,16 +147,16 @@ document.addEventListener('DOMContentLoaded', () => {
     } else if (e.key === 'k') {
       window.scrollBy({ top: -window.innerHeight * 0.1, behavior: 'smooth' });
       lastKey = '';
-    } else if (e.key === 'u' && e.ctrlKey) {
+    } else if ((e.key === 'u' || e.key === 'p') && e.ctrlKey) {
       window.scrollBy({ top: -window.innerHeight * 0.5, behavior: 'smooth' });
       lastKey = '';
-    } else if (e.key === 'd' && e.ctrlKey) {
+    } else if ((e.key === 'd' || e.key === 'n') && e.ctrlKey) {
       window.scrollBy({ top: window.innerHeight * 0.5, behavior: 'smooth' });
       lastKey = '';
-    } else if ((e.key === 'f' || e.key === 'n') && e.ctrlKey) {
+    } else if (e.key === 'f' && e.ctrlKey) {
       window.scrollBy({ top: window.innerHeight * 0.9, behavior: 'smooth' });
       lastKey = '';
-    } else if ((e.key === 'b' || e.key === 'p') && e.ctrlKey) {
+    } else if (e.key === 'b' && e.ctrlKey) {
       window.scrollBy({ top: -window.innerHeight * 0.9, behavior: 'smooth' });
       lastKey = '';
     } else if (e.key === '?') {

package/src/marp-dev-preview.mjs

@@ -20,6 +20,7 @@ const markdownFile = argv.markdownFile;
 const themeSet = argv.themeSet;
 const port = argv.port;
 const verbose = argv.verbose;
+const containers = argv.containers;
 
 if (argv.version) {
   const pkg = JSON.parse(await fs.readFile(path.join(__dirname, '..', 'package.json'), 'utf8'));
@@ -111,10 +112,10 @@ async function renderMarp() {
         <tr><td><kbd>gg</kbd> or <kbd>Home</kbd></td><td>Go to first slide</td></tr>
         <tr><td><kbd>G</kbd> or <kbd>End</kbd></td><td>Go to last slide</td></tr>
         <tr><td><kbd>:&lt;number&gt</kbd></td><td>Go to the given slide number</td></tr> 
-        <tr><td><kbd>^f</kbd> or <kbd>^n</kbd></td><td>Forward one page</td></tr>
-        <tr><td><kbd>^b</kbd> or <kbd>^p</kbd></td><td>Back one page</td></tr>
-        <tr><td><kbd>^d</kbd></td><td>Forward half a page</td></tr>
-        <tr><td><kbd>^u</kbd></td><td>Back half a page</td></tr>
+        <tr><td><kbd>^f</kbd></td><td>Forward one page</td></tr>
+        <tr><td><kbd>^b</kbd></td><td>Back one page</td></tr>
+        <tr><td><kbd>^d</kbd> or <kbd>^n</kbd></td><td>Forward half a page</td></tr>
+        <tr><td><kbd>^u</kbd> or <kbd>^p</kbd></td><td>Back half a page</td></tr>
         <tr><td><kbd>?</kbd></td><td>Show/hide help</td></tr>
 	</table>
       </div>
@@ -159,14 +160,14 @@ if (themeSet) {
       console.debug('Reloading theme from file :', file);
 
       console.debug(`Theme file ${file} changed, updating...`);
-      await initializeMarp(themeSet);
+      await initializeMarp(themeSet, containers);
       const md = await fs.readFile(markdownFile, 'utf8');
       await reload(md);
     });
   }
 }
 
-initializeMarp(themeSet).then(() => {
+initializeMarp(themeSet, containers).then(() => {
   const app = createServer(markdownDir, renderMarp, reload, wss, __dirname);
   const server = http.createServer(app);
 

package/src/marp-utils.mjs

@@ -13,12 +13,15 @@ export function getMarp() {
 }
 
 
-export async function initializeMarp(themeSet) {
+export async function initializeMarp(themeSet, containers) {
   const options = { html: true, linkify: true, };
   marp = new Marp(options)
     .use(markdownItFootnote)
-    .use(markdownItMark)
-    .use(markdownItContainer, 'note');
+    .use(markdownItMark);
+
+  for (const container of containers) {
+    marp = marp.use(markdownItContainer, container);
+  }
 
   if (!themeSet) {
     return marp;