How to define highlighting styles for blocks?

[craftzdog]

Hi Marijn!

I’m making themes for CM6.
Is there any way to define styles for blocks (e.g., blockquote, codeblock)?
The pre-defined tags seem to be for elements but I’d like to change the background of blocks, something like:

[marijn]

Not without defining an additional extension that adds some class to the lines that contain a code block (using Decoration.line).

[reorx]

Hi @craftzdog, just encountered the same problem and made a plugin for blockquote, didn’t try code block yet, hope this helps.

class BlockquotePlugin {
	decorations: DecorationSet = Decoration.none;

	constructor(view: EditorView) {
		this.buildDeco(view);
	}

	update(update: ViewUpdate) {
		this.buildDeco(update.view);
	}

	buildDeco(view: EditorView) {
		let builder = new RangeSetBuilder<Decoration>();
		view.viewportLines(line => {
			let lineObj = view.state.doc.lineAt(line.from);
			let match = /^>.*/g.exec(lineObj.text);
			if (match && match[0]) {
				builder.add(line.from, line.from, Decoration.line({class: 'cm-blockquote'}))
			}
		});

		this.decorations = builder.finish();
	}
}

// pass to extensions:
// ViewPlugin.define(view => new BlockquotePlugin(view), {decorations: v => v.decorations}),

[mb21]

@marijn I assume the situation is still the same? Is this an intentional design decision or just not implemented in @codemirror/lang-markdown yet?

Seems weird that we have fancy syntax highlighting of javascript in code blocks (as demonstrated in the example), but there is no generic thing to match on for all code blocks and not even a span is emitted for markdown inline code spans.