Custom CSS files from plugin don't work

Support
1

Operating system

Windows

Joplin version

3.0.1

Desktop version info

Joplin 3.2.4 (dev, win32)

Sync target

Joplin Server

Editor

Markdown Editor

What issue do you have?

Hello,

I'm trying to use a CSS file like in this tutorial: Creating a Markdown editor plugin | Joplin
The plugin itself works but the stylesheets won't effect the rendered text. (Putting them into the userstyle.css works.)
Am I missing something?

2

I'm linking to the relevant line in the example editor plugin:

Make sure that:

  1. The editor plugin is being loaded.
    • Adding a console.log to the plugin function should log to Joplin's main development tools. These can be opened from help > toggle development tools.
  2. The path to the CSS file is a relative path.

Be aware that it should also be possible to use an EditorView.theme extension to style the editor.

3

Yes, thank you - my files look like this (all in the same directory):

index.ts:

import joplin from 'api';
import {ContentScriptType} from 'api/types';

joplin.plugins.register({
	onStart: async function() {
		const contentScriptId = 'ID';
		joplin.contentScripts.register(ContentScriptType.CodeMirrorPlugin, contentScriptId, './contentScript.js');
	}
});

contentScript.ts:

export default (context: {contentScriptId: string, postMessage: any }) => {
	return {
		assets: () => {
			return [{name: 'blockquote.css'}];
		}
	};
};

blockquote.css:

blockquote {
	background-color: #eceff1 !important;
	border-left: 55px solid #607d8b !important;
	border-radius: .5rem !important;
	display: block !important;
	margin: 1rem 0 !important;
	margin-block-end: 1em !important;
	margin-block-start: 1em !important;
	margin-inline-end: 40px !important;
	margin-inline-start: 40px !important;
	padding: 0 1rem 1rem !important;
	position: relative !important;
	unicode-bidi: isolate !important;
}

My Plugin is loaded and it produces log output. But when I check the inspector, I cannot see my custom styles and it also does not change the appearance of the blockquotes.

4

A little update: I changed the first line of the blockquote.css file from

blockquote {

to

div.cm-blockQuote,
blockquote {

and now it works - at least partially.
So my style affects the markdown editor but not the rich text editor page.

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.