External CSS (per note) is being ignored

Support
6

Ok that's interesting, Joplin wasn't designed for this obviously and I'm surprised it was previously working.

But in fact, I've just realised you could restore the feature using a plugin - you would add a fenced block at the top of the note that contains the CSS path. Then in the plugin you grab this and create a <link> tag. If you want to give it a try I've just created one based on the exiting renderer plugin demo and it works:

Copy this to externalCss.js in your profile /plugins directory:

/* joplin-manifest:
{
	"id": "org.joplinapp.plugin.ExternalCss",
	"manifest_version": 1,
	"app_min_version": "1.4",
	"name": "Allow adding external CSS",
	"version": "1.0.0"
}
*/

joplin.plugins.register({
	onStart: async function() {
		await joplin.plugins.registerContentScript(
			'markdownItPlugin',
			'externalCss',
			'./_markdownItExternalCss.js'
		);
	},
});

And then this to _markdownItExternalCss.js still in /plugins:

function plugin(markdownIt, _options) {
	const defaultRender = markdownIt.renderer.rules.fence || function(tokens, idx, options, env, self) {
		return self.renderToken(tokens, idx, options, env, self);
	};

	markdownIt.renderer.rules.fence = function(tokens, idx, options, env, self) {
		const token = tokens[idx];
		if (token.info !== 'external_css') return defaultRender(tokens, idx, options, env, self);
		return '<link href="' + escape(token.content.trim()) + '" media="all" rel="stylesheet"/>';
	};
}

module.exports = {
	default: function(_context) { 
		return {
			plugin: plugin,
		}
	},
}

Then you can create block like so at the top of any note, and it will load the CSS file:

```external_css
/path/to/file.css
```