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}),