update packages and add valign

scripts/reveal.js/plugin/markdown/index.ts

@@ -0,0 +1,29 @@
+import type { MarkdownConfig, RevealPlugin } from 'reveal.js';
+import type { Marked } from 'marked';
+
+// @ts-expect-error The runtime implementation remains in JS during the migration.
+import MarkdownImplementation from './plugin.js';
+
+export interface MarkdownSlidifyOptions {
+	separator?: string | null;
+	verticalSeparator?: string | null;
+	notesSeparator?: string;
+	attributes?: string;
+}
+
+export interface MarkdownOptions extends MarkdownConfig {
+	animateLists?: boolean;
+}
+
+export interface MarkdownPlugin extends RevealPlugin {
+	id: 'markdown';
+	processSlides(scope: ParentNode): Promise<void[]>;
+	convertSlides(): Promise<void>;
+	slidify(markdown: string, options?: MarkdownSlidifyOptions): string;
+	readonly marked: Marked | null;
+	readonly markdownOptions: MarkdownOptions;
+}
+
+const Markdown = MarkdownImplementation as () => MarkdownPlugin;
+
+export default Markdown;

scripts/reveal.js/plugin/markdown/plugin.js

@@ -4,7 +4,8 @@
  * of external markdown documents.
  */
 
-import { marked } from 'marked';
+import { Marked } from 'marked';
+import { markedSmartypants } from 'marked-smartypants';
 
 const DEFAULT_SLIDE_SEPARATOR = '\r?\n---\r?\n',
 	  DEFAULT_VERTICAL_SEPARATOR = null,
@@ -30,6 +31,7 @@ const Plugin = () => {
 
 	// The reveal.js instance this plugin is attached to
 	let deck;
+	let markedInstance = null;
 
 	/**
 	 * Retrieves the markdown contents of a slide section
@@ -116,8 +118,8 @@ const Plugin = () => {
 
 		const notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
 
-		if( notesMatch.length === 2 ) {
-			content = notesMatch[0] + '<aside class="notes">' + marked(notesMatch[1].trim()) + '</aside>';
+		if( notesMatch.length === 2 && markedInstance ) {
+			content = notesMatch[0] + '<aside class="notes">' + markedInstance.parse(notesMatch[1].trim()) + '</aside>';
 		}
 
 		// prevent script end tags in the content from interfering
@@ -368,7 +370,12 @@ const Plugin = () => {
 		}
 
 		if ( element.nodeType === Node.COMMENT_NODE ) {
-			if ( addAttributeInElement( element, previousElement, separatorElementAttributes ) === false ) {
+		let targetElement = previousElement;
+		if( targetElement && ( targetElement.tagName === 'UL' || targetElement.tagName === 'OL' ) ) {
+			targetElement = targetElement.lastElementChild || targetElement;
+		}
+
+		if ( addAttributeInElement( element, targetElement, separatorElementAttributes ) === false ) {
 				addAttributeInElement( element, section, separatorSectionAttributes );
 			}
 		}
@@ -389,7 +396,7 @@ const Plugin = () => {
 			const notes = section.querySelector( 'aside.notes' );
 			const markdown = getMarkdownFromSlide( section );
 
-			section.innerHTML = marked( markdown );
+			section.innerHTML = markedInstance ? markedInstance.parse( markdown ) : markdown;
 			addAttributes( 	section, section, null, section.getAttribute( 'data-element-attributes' ) ||
 							section.parentNode.getAttribute( 'data-element-attributes' ) ||
 							DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
@@ -426,24 +433,14 @@ const Plugin = () => {
 
 			deck = reveal;
 
-			let { renderer, animateLists, ...markedOptions } = deck.getConfig().markdown || {};
+			let { renderer: customRenderer, animateLists, smartypants, ...markedOptions } = deck.getConfig().markdown || {};
 
-			if( !renderer ) {
-				renderer = new marked.Renderer();
-
-				renderer.code = ( code, language ) => {
-
-					// Off by default
+			const renderer = customRenderer || {
+				code( { text, lang } ) {
+					let language = lang || '';
 					let lineNumberOffset = '';
 					let lineNumbers = '';
 
-					// Users can opt in to show line numbers and highlight
-					// specific lines.
-					// ```javascript []        show line numbers
-					// ```javascript [1,4-8]   highlights lines 1 and 4-8
-					// optional line number offset:
-					// ```javascript [25: 1,4-8]   start line numbering at 25,
-					//                             highlights lines 1 (numbered as 25) and 4-8 (numbered as 28-32)
 					if( CODE_LINE_NUMBER_REGEX.test( language ) ) {
 						let lineNumberOffsetMatch =  language.match( CODE_LINE_NUMBER_REGEX )[2];
 						if (lineNumberOffsetMatch){
@@ -455,26 +452,24 @@ const Plugin = () => {
 						language = language.replace( CODE_LINE_NUMBER_REGEX, '' ).trim();
 					}
 
-					// Escape before this gets injected into the DOM to
-					// avoid having the HTML parser alter our code before
-					// highlight.js is able to read it
-					code = escapeForHTML( code );
+					text = escapeForHTML( text );
 
-					// return `<pre><code ${lineNumbers} class="${language}">${code}</code></pre>`;
-
-					return `<pre><code ${lineNumbers} ${lineNumberOffset} class="${language}">${code}</code></pre>`;
+					return `<pre><code ${lineNumbers} ${lineNumberOffset} class="${language}">${text}</code></pre>`;
+				},
+			};
+			if( animateLists === true && !customRenderer ) {
+				renderer.listitem = function( token ) {
+					const text = token.tokens ? this.parser.parseInline( token.tokens ) : ( token.text || '' );
+					return `<li class="fragment">${text}</li>`;
 				};
 			}
 
-			if( animateLists === true ) {
-				renderer.listitem = text => `<li class="fragment">${text}</li>`;
+			markedInstance = new Marked();
+			markedInstance.use( { renderer, ...markedOptions } );
+			if( smartypants ) {
+				markedInstance.use( markedSmartypants() );
 			}
 
-			marked.setOptions( {
-				renderer,
-				...markedOptions
-			} );
-
 			return processSlides( deck.getRevealElement() ).then( convertSlides );
 
 		},
@@ -483,7 +478,8 @@ const Plugin = () => {
 		processSlides: processSlides,
 		convertSlides: convertSlides,
 		slidify: slidify,
-		marked: marked
+		get marked() { return markedInstance; },
+		get markdownOptions() { return deck ? deck.getConfig().markdown || {} : {}; }
 	}
 
 };

scripts/reveal.js/plugin/markdown/vite.config.ts

@@ -0,0 +1,23 @@
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import { appendExtension } from '../../vite.config.ts';
+import { createPluginDts } from '../vite-plugin-dts.ts';
+
+// Once Vite supports multiple entries for plugins, this build can
+// be merged into the main vite.config.ts.
+// See https://github.com/vitejs/vite/pull/10609
+
+export default defineConfig({
+  build: {
+    emptyOutDir: false,
+    lib: {
+      formats: ['es', 'umd'],
+      entry: {
+        'plugin/markdown': resolve(__dirname, 'index.ts'),
+      },
+      name: 'RevealMarkdown',
+      fileName: appendExtension,
+    },
+  },
+  plugins: [createPluginDts('markdown')],
+});