Desktop: Resolves #1649: Cache code blocks in notes to speed up rendering

ElectronClient/app/gui/NoteText.jsx

@@ -954,6 +954,7 @@ class NoteTextComponent extends React.Component {
 			postMessageSyntax: 'ipcProxySendToHost',
 			userCss: options.useCustomCss ? this.props.customCss : '',
 			resources: await shared.attachedResources(bodyToRender),
+			codeHighlightCacheKey: this.state.note ? this.state.note.id : null,
 		};
 
 		let bodyHtml = '';

ReactNativeClient/lib/MdToHtml.js

@@ -43,6 +43,9 @@ class MdToHtml {
 		this.resourceBaseUrl_ = ('resourceBaseUrl' in options) ? options.resourceBaseUrl : null;
 
 		this.cachedOutputs_ = {};
+
+		this.lastCodeHighlightCacheKey_ = null;
+		this.cachedHighlightedCode_ = {};
 	}
 
 	render(body, style, options = null) {
@@ -51,6 +54,15 @@ class MdToHtml {
 		if (!options.paddingBottom) options.paddingBottom = '0';
 		if (!options.highlightedKeywords) options.highlightedKeywords = [];
 
+		// The "codeHighlightCacheKey" option indicates what set of cached object should be
+		// associated with this particular Markdown body. It is only used to allow us to
+		// clear the cache whenever switching to a different note.
+		// If "codeHighlightCacheKey" is not specified, code highlighting won't be cached.
+		if (options.codeHighlightCacheKey !== this.lastCodeHighlightCacheKey_ || !options.codeHighlightCacheKey) {
+			this.cachedHighlightedCode_ = {};
+			this.lastCodeHighlightCacheKey_ = options.codeHighlightCacheKey;
+		}
+
 		const breaks_ = Setting.value('markdown.softbreaks') ? false : true;
 
 		const cacheKey = md5(escape(body + JSON.stringify(options) + JSON.stringify(style)));
@@ -67,15 +79,22 @@ class MdToHtml {
 			breaks: breaks_,
 			linkify: true,
 			html: true,
-			highlight: function(str, lang) {
+			highlight: (str, lang) => {
 				try {
 					let hlCode = '';
 
+					const cacheKey = md5(str + '_' + lang);
+
+					if (options.codeHighlightCacheKey && this.cachedHighlightedCode_[cacheKey]) {
+						hlCode = this.cachedHighlightedCode_[cacheKey];
+					} else {
 						if (lang && hljs.getLanguage(lang)) {
 							hlCode = hljs.highlight(lang, str, true).value;
 						} else {
 							hlCode = hljs.highlightAuto(str).value;
 						}
+						this.cachedHighlightedCode_[cacheKey] = hlCode;
+					}
 
 					if (shim.isReactNative()) {
 						context.css['hljs'] = shim.loadCssFromJs(options.codeTheme);
@@ -124,15 +143,13 @@ class MdToHtml {
 		markdownIt.use(rules.checkbox(context, ruleOptions));
 		markdownIt.use(rules.link_open(context, ruleOptions));
 		markdownIt.use(rules.html_image(context, ruleOptions));
-		if (Setting.value('markdown.plugin.katex'))
+		if (Setting.value('markdown.plugin.katex')) markdownIt.use(rules.katex(context, ruleOptions));
-			markdownIt.use(rules.katex(context, ruleOptions));
 		markdownIt.use(rules.highlight_keywords(context, ruleOptions));
 		markdownIt.use(rules.code_inline(context, ruleOptions));
 		markdownIt.use(markdownItAnchor)
 
 		for (let key in plugins) {
-			if (Setting.value('markdown.plugin.' + key))
+			if (Setting.value('markdown.plugin.' + key)) markdownIt.use(plugins[key].module, plugins[key].options);
-				markdownIt.use(plugins[key].module, plugins[key].options);
 		}
 
 		setupLinkify(markdownIt);