Improved integration of external renderer

2025-10-31 00:07:48 +02:00 · 2019-12-30 21:54:13 +01:00
parent 541372eb91
commit 6d9f73eef7
12 changed files with 333 additions and 99 deletions
--- a/ElectronClient/app/InteropServiceHelper.js
+++ b/ElectronClient/app/InteropServiceHelper.js
@@ -5,7 +5,6 @@ const Setting = require('lib/models/Setting');
 const md5 = require('md5');
 const url = require('url');
 const { shim } = require('lib/shim');
-// const { BrowserWindow } = require('electron');

 class InteropServiceHelper {

--- a/ElectronClient/app/gui/NoteText.jsx
+++ b/ElectronClient/app/gui/NoteText.jsx
@@ -15,7 +15,7 @@ const TagList = require('./TagList.min.js');
 const { connect } = require('react-redux');
 const { _ } = require('lib/locale.js');
 const { reg } = require('lib/registry.js');
-const { MarkupToHtml } = require('joplin-renderer');
+const { MarkupToHtml, assetsToHeaders } = require('joplin-renderer');
 const shared = require('lib/components/shared/note-screen-shared.js');
 const { bridge } = require('electron').remote.require('./bridge');
 const { themeStyle } = require('../theme.js');
@@ -2004,6 +2004,7 @@ class NoteTextComponent extends React.Component {
 			if (htmlHasChanged) {
 				let options = {
 					pluginAssets: this.state.lastRenderPluginAssets,
+					pluginAssetsHeadersHtml: assetsToHeaders(this.state.lastRenderPluginAssets),
 					downloadResources: Setting.value('sync.resourceDownloadMode'),
 				};
 				this.webviewRef_.current.wrappedInstance.send('setHtml', html, options);
--- a/ElectronClient/app/gui/note-viewer/index.html
+++ b/ElectronClient/app/gui/note-viewer/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-<head>
+<head id="joplin-container-root-head">
 	<meta charset="UTF-8">

 	<style>
@@ -65,27 +65,7 @@
 				ipc[callName](callData);
 			}
 		}));
-
-		// TODO: The joplin-renderer package should take care of creating the <link> and <script> tags to reduce duplicate code
-		//       Calling app would then ensure that the CSS files, etc. are in the correct location.
-		const loadedPluginAssets_ = {}
-		function loadPluginAssets(assets) {
-			if (!assets) return;
-
-			for (let i = 0; i < assets.length; i++) {
-				const asset = assets[i];
-				if (loadedPluginAssets_[asset.name]) continue;
-				loadedPluginAssets_[asset.name] = true;
-
-				if (asset.mime === 'text/css') {
-					const link = document.createElement('link');
-					link.rel = 'stylesheet';
-					link.href = 'pluginAssets/' + asset.name;
-					document.getElementById('joplin-container-styleContainer').appendChild(link);
-				}
-			}
-		}
-
+		
 		// Note: the scroll position source of truth is "percentScroll_". This is easier to manage than scrollTop because
 		// the scrollTop value depends on the images being loaded or not. For example, if the scrollTop is saved while
 		// images are being displayed then restored while images are being reloaded, the new scrollTop might be changed
@@ -162,10 +142,10 @@
 				}, 1);
 			}

-			// loadCssFiles(event.options.cssFiles);
+			const pluginAssetsContainer = document.createElement('div');
+			pluginAssetsContainer.innerHTML = event.options.pluginAssetsHeadersHtml;
+			document.getElementById('joplin-container-styleContainer').appendChild(pluginAssetsContainer);

-			loadPluginAssets(event.options.pluginAssets);
-			
 			if (event.options.downloadResources === 'manual') {
 				webviewLib.setupResourceManualDownload();
 			}
--- a/ElectronClient/app/package-lock.json
+++ b/ElectronClient/app/package-lock.json
@@ -2466,11 +2466,6 @@
        }
      }
    },
-    "dataurl": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/dataurl/-/dataurl-0.1.0.tgz",
-      "integrity": "sha1-H0c0/t3sBf/kRXR5eNhnWcSzMZk="
-    },
    "debug": {
      "version": "2.6.9",
      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -4179,9 +4174,9 @@
      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
    },
    "joplin-renderer": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/joplin-renderer/-/joplin-renderer-1.0.5.tgz",
-      "integrity": "sha512-6WHqJdHzpxkI4AIz7/uK+V4eB+uU3kg8ut8r1HwC10kWQCMdTtH0yv04l+cNpWvQFULsZANmVr7FAP6JNhcqcw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/joplin-renderer/-/joplin-renderer-1.0.6.tgz",
+      "integrity": "sha512-o6I2ztOXdNa0wUx94ubMtH1SMujmijD8z3VHCgOnxUFgIpr0TiBwH2G8OrcKoIlo1+jxNwDeUuVu+HRAF06lXQ==",
      "requires": {
        "base-64": "^0.1.0",
        "font-awesome-filetypes": "^2.1.0",
--- a/ElectronClient/app/package.json
+++ b/ElectronClient/app/package.json
@@ -90,7 +90,6 @@
    "chokidar": "^3.0.0",
    "clean-html": "^1.5.0",
    "compare-versions": "^3.2.1",
-    "dataurl": "^0.1.0",
    "diacritics": "^1.3.0",
    "diff-match-patch": "^1.0.4",
    "electron-context-menu": "^0.15.0",
@@ -105,7 +104,7 @@
    "html-entities": "^1.2.1",
    "html-minifier": "^4.0.0",
    "image-type": "^3.0.0",
-    "joplin-renderer": "^1.0.5",
+    "joplin-renderer": "^1.0.6",
    "joplin-turndown": "^4.0.19",
    "joplin-turndown-plugin-gfm": "^1.0.11",
    "jssha": "^2.3.1",
--- a/ReactNativeClient/lib/components/note-body-viewer.js
+++ b/ReactNativeClient/lib/components/note-body-viewer.js
@@ -6,6 +6,7 @@ const { themeStyle } = require('lib/components/global-style.js');
 const Setting = require('lib/models/Setting.js');
 const { reg } = require('lib/registry.js');
 const { shim } = require('lib/shim');
+const { assetsToHeaders } = require('joplin-renderer');
 const shared = require('lib/components/shared/note-screen-shared.js');
 const markupLanguageUtils = require('lib/markupLanguageUtils');

@@ -92,26 +93,13 @@ class NoteBodyViewer extends Component {
 			}, 10);
 		`);

-		// TODO: The joplin-renderer package should take care of creating the <link> and <script> tags to reduce duplicate code
-		//       Calling app would then ensure that the CSS files, etc. are in the correct location.
-		const headers = [];
-		for (let i = 0; i < result.pluginAssets.length; i++) {
-			const asset = result.pluginAssets[i];
-			if (asset.mime === 'text/css') {
-				headers.push(`<link rel="stylesheet" href="pluginAssets/${asset.name}">`);
-			} else if (asset.mime === 'application/javascript') {
-				// NOT TESTED!!
-				headers.push(`<script type="application/javascript" src="pluginAssets/${asset.name}"></script>`);
-			}
-		}
-
 		html =
 			`
 			<!DOCTYPE html>
 			<html>
 				<head>
 					<meta name="viewport" content="width=device-width, initial-scale=1">
-					${headers.join('\n')}
+					${assetsToHeaders(result.pluginAssets)}
 				</head>
 				<body>
 					${html}
--- a/ReactNativeClient/lib/services/InteropService.js
+++ b/ReactNativeClient/lib/services/InteropService.js
@@ -83,6 +83,7 @@ class InteropService {
 			},
 			{
 				format: 'html',
+				fileExtensions: ['html', 'htm'],
 				target: 'file',
 				canDoMultiExport: false,
 				description: _('HTML File'),
--- a/ReactNativeClient/lib/services/InteropService_Exporter_Html.js
+++ b/ReactNativeClient/lib/services/InteropService_Exporter_Html.js
@@ -4,13 +4,12 @@ const BaseModel = require('lib/BaseModel');
 const Folder = require('lib/models/Folder');
 const Note = require('lib/models/Note');
 const Setting = require('lib/models/Setting');
-const Resource = require('lib/models/Resource');
 const { shim } = require('lib/shim');
-const dataurl	 = require('dataurl');
 const { themeStyle } = require('../../theme.js');
 const { dirname } = require('lib/path-utils.js');
 const { escapeHtml } = require('lib/string-utils.js');
 const markupLanguageUtils = require('lib/markupLanguageUtils');
+const { assetsToHeaders } = require('joplin-renderer');

 class InteropService_Exporter_Html extends InteropService_Exporter_Base {

@@ -58,21 +57,7 @@ class InteropService_Exporter_Html extends InteropService_Exporter_Base {

 		for (let i = 0; i < linkedResourceIds.length; i++) {
 			const id = linkedResourceIds[i];
-			const resource = await Resource.load(id);
-			let resourceContent = '';
-			const isImage = Resource.isSupportedImageMimeType(resource.mime);
-
-			if (!isImage) {
-				resourceContent = `${relativePath ? `${relativePath}/` : ''}_resources/${basename(resourcePaths[id])}`;
-			} else {
-				const buffer = await shim.fsDriver().readFile(resourcePaths[id], 'Buffer');
-
-				resourceContent = dataurl.convert({
-					data: buffer,
-					mimetype: resource.mime,
-				});
-			}
-
+			const resourceContent = `${relativePath ? `${relativePath}/` : ''}_resources/${basename(resourcePaths[id])}`;
 			newBody = newBody.replace(new RegExp(`:/${id}`, 'g'), resourceContent);
 		}

@@ -110,22 +95,12 @@ class InteropService_Exporter_Html extends InteropService_Exporter_Base {

 			// We need to export all the plugin assets too and refer them from the header
 			// The source path is a bit hard-coded but shouldn't change.
-			// TODO: The joplin-renderer package should take care of creating the <link> and <script> tags to reduce duplicate code
-			//       Calling app would then ensure that the CSS files, etc. are in the correct location.
-			const headers = [];
 			for (let i = 0; i < result.pluginAssets.length; i++) {
 				const asset = result.pluginAssets[i];
 				const filePath = `${dirname(dirname(__dirname))}/gui/note-viewer/pluginAssets/${asset.name}`;
 				const destPath = `${dirname(noteFilePath)}/pluginAssets/${asset.name}`;
 				await shim.fsDriver().mkdir(dirname(destPath));
 				await shim.fsDriver().copy(filePath, destPath);
-
-				if (asset.mime === 'text/css') {
-					headers.push(`<link rel="stylesheet" href="pluginAssets/${asset.name}">`);
-				} else if (asset.mime === 'application/javascript') {
-					// NOT TESTED!!
-					headers.push(`<script type="application/javascript" src="pluginAssets/${asset.name}"></script>`);
-				}
 			}

 			const fullHtml = `
@@ -133,7 +108,7 @@ class InteropService_Exporter_Html extends InteropService_Exporter_Base {
 				<html>
 					<head>
 						<meta charset="UTF-8">
-						${headers.join('\n')}
+						${assetsToHeaders(result.pluginAssets)}
 						<title>${escapeHtml(item.title)}</title>
 					</head>
 					<body>
@@ -147,11 +122,9 @@ class InteropService_Exporter_Html extends InteropService_Exporter_Base {
 	}

 	async processResource(resource, filePath) {
-		if (!Resource.isSupportedImageMimeType(resource.mime)) {
-			const destResourcePath = `${this.resourceDir_}/${basename(filePath)}`;
-			await shim.fsDriver().copy(filePath, destResourcePath);
-			this.resources_.push(resource);
-		}
+		const destResourcePath = `${this.resourceDir_}/${basename(filePath)}`;
+		await shim.fsDriver().copy(filePath, destResourcePath);
+		this.resources_.push(resource);
 	}

 	async close() {}
--- a/ReactNativeClient/package-lock.json
+++ b/ReactNativeClient/package-lock.json
@@ -3796,9 +3796,9 @@
      "dev": true
    },
    "joplin-renderer": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/joplin-renderer/-/joplin-renderer-1.0.5.tgz",
-      "integrity": "sha512-6WHqJdHzpxkI4AIz7/uK+V4eB+uU3kg8ut8r1HwC10kWQCMdTtH0yv04l+cNpWvQFULsZANmVr7FAP6JNhcqcw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/joplin-renderer/-/joplin-renderer-1.0.6.tgz",
+      "integrity": "sha512-o6I2ztOXdNa0wUx94ubMtH1SMujmijD8z3VHCgOnxUFgIpr0TiBwH2G8OrcKoIlo1+jxNwDeUuVu+HRAF06lXQ==",
      "requires": {
        "base-64": "^0.1.0",
        "font-awesome-filetypes": "^2.1.0",
--- a/ReactNativeClient/package.json
+++ b/ReactNativeClient/package.json
@@ -19,7 +19,7 @@
    "events": "^1.1.1",
    "form-data": "^2.1.4",
    "html-entities": "^1.2.1",
-    "joplin-renderer": "^1.0.5",
+    "joplin-renderer": "^1.0.6",
    "jsc-android": "241213.1.0",
    "markdown-it": "^8.4.0",
    "md5": "^2.2.1",
--- a/package-lock.json
+++ b/package-lock.json
@@ -330,7 +330,6 @@
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
      "requires": {
        "sprintf-js": "~1.0.2"
      }
@@ -363,6 +362,11 @@
      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
      "dev": true
    },
+    "base-64": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
+      "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs="
+    },
    "brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -431,6 +435,11 @@
      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
      "dev": true
    },
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
+    },
    "ci-info": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
@@ -529,8 +538,7 @@
    "commander": {
      "version": "2.20.0",
      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
-      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
-      "dev": true
+      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ=="
    },
    "concat-map": {
      "version": "0.0.1",
@@ -589,6 +597,11 @@
        }
      }
    },
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
+    },
    "csstype": {
      "version": "2.6.7",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
@@ -683,6 +696,11 @@
        "once": "^1.4.0"
      }
    },
+    "entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
+      "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw=="
+    },
    "error-ex": {
      "version": "1.3.2",
      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -807,12 +825,20 @@
      }
    },
    "eslint-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.0.tgz",
-      "integrity": "sha512-7ehnzPaP5IIEh1r1tkjuIrxqhNkzUJa9z3R92tLJdZIVdWaczEhr3EbhGtsMrVxi1KeR8qA7Off6SWc5WNQqyQ==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz",
+      "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==",
      "dev": true,
      "requires": {
-        "eslint-visitor-keys": "^1.0.0"
+        "eslint-visitor-keys": "^1.1.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz",
+          "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==",
+          "dev": true
+        }
      }
    },
    "eslint-visitor-keys": {
@@ -989,6 +1015,21 @@
      "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
      "dev": true
    },
+    "font-awesome-filetypes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/font-awesome-filetypes/-/font-awesome-filetypes-2.1.0.tgz",
+      "integrity": "sha512-U6hi14GRjfZFIWsTNyVmCBuHyPhiizWEKVbaQqHipKQv3rA1l1PNvmKulzpqxonFnQMToty5ZhfWbc/0IjLDGA=="
+    },
+    "fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
    "fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1075,6 +1116,22 @@
        }
      }
    },
+    "graceful-fs": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+      "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
+    },
+    "handlebars": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.3.tgz",
+      "integrity": "sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==",
+      "requires": {
+        "neo-async": "^2.6.0",
+        "optimist": "^0.6.1",
+        "source-map": "^0.6.1",
+        "uglify-js": "^3.1.4"
+      }
+    },
    "has": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -1113,12 +1170,25 @@
      "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=",
      "dev": true
    },
+    "highlight.js": {
+      "version": "9.17.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.17.1.tgz",
+      "integrity": "sha512-TA2/doAur5Ol8+iM3Ov7qy3jYcr/QiJ2eDTdRF4dfbjG7AaaB99J5G+zSl11ljbl6cIcahgPY6SKb3sC3EJ0fw==",
+      "requires": {
+        "handlebars": "^4.5.3"
+      }
+    },
    "hosted-git-info": {
      "version": "2.7.1",
      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
      "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==",
      "dev": true
    },
+    "html-entities": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz",
+      "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8="
+    },
    "husky": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/husky/-/husky-3.0.2.tgz",
@@ -1226,6 +1296,11 @@
      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
      "dev": true
    },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
    "is-callable": {
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
@@ -1361,6 +1436,33 @@
      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
      "dev": true
    },
+    "joplin-renderer": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/joplin-renderer/-/joplin-renderer-1.0.6.tgz",
+      "integrity": "sha512-o6I2ztOXdNa0wUx94ubMtH1SMujmijD8z3VHCgOnxUFgIpr0TiBwH2G8OrcKoIlo1+jxNwDeUuVu+HRAF06lXQ==",
+      "requires": {
+        "base-64": "^0.1.0",
+        "font-awesome-filetypes": "^2.1.0",
+        "fs-extra": "^8.1.0",
+        "highlight.js": "^9.17.1",
+        "html-entities": "^1.2.1",
+        "katex": "^0.11.1",
+        "markdown-it": "^10.0.0",
+        "markdown-it-abbr": "^1.0.4",
+        "markdown-it-anchor": "^5.2.5",
+        "markdown-it-deflist": "^2.0.3",
+        "markdown-it-emoji": "^1.4.0",
+        "markdown-it-footnote": "^3.0.2",
+        "markdown-it-ins": "^3.0.0",
+        "markdown-it-mark": "^3.0.0",
+        "markdown-it-multimd-table": "^4.0.0",
+        "markdown-it-sub": "^1.0.0",
+        "markdown-it-sup": "^1.0.0",
+        "markdown-it-toc-done-right": "^4.1.0",
+        "md5": "^2.2.1",
+        "uslug": "^1.0.4"
+      }
+    },
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -1395,6 +1497,14 @@
      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
      "dev": true
    },
+    "jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "requires": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
    "jsx-ast-utils": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.1.tgz",
@@ -1405,6 +1515,14 @@
        "object.assign": "^4.1.0"
      }
    },
+    "katex": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.11.1.tgz",
+      "integrity": "sha512-5oANDICCTX0NqYIyAiFCCwjQ7ERu3DQG2JFHLbYOf+fXaMoH8eg/zOq5WSYJsKMi/QebW+Eh3gSM+oss1H/bww==",
+      "requires": {
+        "commander": "^2.19.0"
+      }
+    },
    "levn": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -1421,6 +1539,14 @@
      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
      "dev": true
    },
+    "linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
    "lint-staged": {
      "version": "9.2.1",
      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-9.2.1.tgz",
@@ -1674,6 +1800,110 @@
        "js-tokens": "^3.0.0 || ^4.0.0"
      }
    },
+    "markdown-it": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz",
+      "integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==",
+      "requires": {
+        "argparse": "^1.0.7",
+        "entities": "~2.0.0",
+        "linkify-it": "^2.0.0",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      }
+    },
+    "markdown-it-abbr": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-it-abbr/-/markdown-it-abbr-1.0.4.tgz",
+      "integrity": "sha1-1mtTZFIcuz3Yqlna37ovtoZcj9g="
+    },
+    "markdown-it-anchor": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-5.2.5.tgz",
+      "integrity": "sha512-xLIjLQmtym3QpoY9llBgApknl7pxAcN3WDRc2d3rwpl+/YvDZHPmKscGs+L6E05xf2KrCXPBvosWt7MZukwSpQ=="
+    },
+    "markdown-it-deflist": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/markdown-it-deflist/-/markdown-it-deflist-2.0.3.tgz",
+      "integrity": "sha512-/BNZ8ksW42bflm1qQLnRI09oqU2847Z7MVavrR0MORyKLtiUYOMpwtlAfMSZAQU9UCvaUZMpgVAqoS3vpToJxw=="
+    },
+    "markdown-it-emoji": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz",
+      "integrity": "sha1-m+4OmpkKljupbfaYDE/dsF37Tcw="
+    },
+    "markdown-it-footnote": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-3.0.2.tgz",
+      "integrity": "sha512-JVW6fCmZWjvMdDQSbOT3nnOQtd9iAXmw7hTSh26+v42BnvXeVyGMDBm5b/EZocMed2MbCAHiTX632vY0FyGB8A=="
+    },
+    "markdown-it-ins": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-ins/-/markdown-it-ins-3.0.0.tgz",
+      "integrity": "sha512-+vyAdBuMGwmT2yMlAFJSx2VR/0QZ1onQ/Mkkmr4l9tDFOh5sVoAgRbkgbuSsk+sxJ9vaMH/IQ323ydfvQrPO/Q=="
+    },
+    "markdown-it-mark": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-3.0.0.tgz",
+      "integrity": "sha512-HqMWeKfMMOu4zBO0emmxsoMWmbf2cPKZY1wP6FsTbKmicFfp5y4L3KXAsNeO1rM6NTJVOrNlLKMPjWzriBGspw=="
+    },
+    "markdown-it-multimd-table": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-multimd-table/-/markdown-it-multimd-table-4.0.0.tgz",
+      "integrity": "sha512-kdM3fH+/sRMfHQgD2CM1BcIpLNODUCuoiFr6TwS7mDJBYntVXDJxZbFwGDRflIc9ZzAfsUbr0lnHc6RbYafIsw==",
+      "requires": {
+        "markdown-it": "^8.4.2"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+        },
+        "markdown-it": {
+          "version": "8.4.2",
+          "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",
+          "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
+          "requires": {
+            "argparse": "^1.0.7",
+            "entities": "~1.1.1",
+            "linkify-it": "^2.0.0",
+            "mdurl": "^1.0.1",
+            "uc.micro": "^1.0.5"
+          }
+        }
+      }
+    },
+    "markdown-it-sub": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sub/-/markdown-it-sub-1.0.0.tgz",
+      "integrity": "sha1-N1/WAm6ufdywEkl/ZBEZXqHjr+g="
+    },
+    "markdown-it-sup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sup/-/markdown-it-sup-1.0.0.tgz",
+      "integrity": "sha1-y5yf+RpSVawI8/09YyhuFd8KH8M="
+    },
+    "markdown-it-toc-done-right": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-toc-done-right/-/markdown-it-toc-done-right-4.1.0.tgz",
+      "integrity": "sha512-UhD2Oj6cZV3ycYPoelt4hTkwKIK3zbPP1wjjdpCq7UGtWQOFalDFDv1s2zBYV6aR2gMs/X8kpJcOYsQmUbiXDw=="
+    },
+    "md5": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz",
+      "integrity": "sha1-U6s41f48iJG6RlMp6iP6wFQBJvk=",
+      "requires": {
+        "charenc": "~0.0.1",
+        "crypt": "~0.0.1",
+        "is-buffer": "~1.1.1"
+      }
+    },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
    "merge-stream": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -1714,8 +1944,7 @@
    "minimist": {
      "version": "0.0.8",
      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-      "dev": true
+      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
    },
    "mkdirp": {
      "version": "0.5.1",
@@ -1744,6 +1973,11 @@
      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
      "dev": true
    },
+    "neo-async": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
+      "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw=="
+    },
    "nice-try": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -1869,6 +2103,22 @@
      "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==",
      "dev": true
    },
+    "optimist": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
+      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
+      "requires": {
+        "minimist": "~0.0.1",
+        "wordwrap": "~0.0.2"
+      },
+      "dependencies": {
+        "wordwrap": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
+          "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
+        }
+      }
+    },
    "optionator": {
      "version": "0.8.2",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
@@ -2207,6 +2457,11 @@
        "is-fullwidth-code-point": "^2.0.0"
      }
    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
    "spdx-correct": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
@@ -2242,8 +2497,7 @@
    "sprintf-js": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
    },
    "string-argv": {
      "version": "0.3.0",
@@ -2424,6 +2678,39 @@
      "integrity": "sha512-Mcr/Qk7hXqFBXMN7p7Lusj1ktCBydylfQM/FZCk5glCNQJrCUKPkMHdo9R0MTFWsC/4kPFvDS0fDPvukfCkFsw==",
      "dev": true
    },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
+    "uglify-js": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.7.3.tgz",
+      "integrity": "sha512-7tINm46/3puUA4hCkKYo4Xdts+JDaVC9ZPRcG8Xw9R4nhO/gZgUM3TENq8IF4Vatk8qCig4MzP/c8G4u2BkVQg==",
+      "optional": true,
+      "requires": {
+        "commander": "~2.20.3",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "optional": true
+        }
+      }
+    },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+    },
+    "unorm": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/unorm/-/unorm-1.6.0.tgz",
+      "integrity": "sha512-b2/KCUlYZUeA7JFUuRJZPUtr4gZvBh7tavtv4fvk4+KV9pfGiR6CQAQAWl49ZpR3ts2dk4FYkP7EIgDJoiOLDA=="
+    },
    "uri-js": {
      "version": "4.2.2",
      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
@@ -2433,6 +2720,14 @@
        "punycode": "^2.1.0"
      }
    },
+    "uslug": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/uslug/-/uslug-1.0.4.tgz",
+      "integrity": "sha1-uaIvCRTgqGFAYz2swwLl9PpFBnc=",
+      "requires": {
+        "unorm": ">= 1.0.0"
+      }
+    },
    "v8-compile-cache": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz",
--- a/package.json
+++ b/package.json
@@ -35,5 +35,8 @@
    "husky": "^3.0.2",
    "lint-staged": "^9.2.1",
    "typescript": "^3.7.3"
+  },
+  "dependencies": {
+    "joplin-renderer": "^1.0.6"
  }
 }