I’m going to highlight Markdown’s mark using @codemirror/highlight
and @codemirror/lang-markdown
.
For example, I want to highlight the mark of heading(#
, ##
, ###
and so on), but I don’t know how to select only a specific mark.
This is my code right now.
import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
import { languages } from '@codemirror/language-data'
import { EditorState } from '@codemirror/state'
const highlightStyle = HighlightStyle.define([
{
tag: tags.heading1,
color: 'black',
fontSize: '1.75em',
fontWeight: '700',
},
{
tag: tags.processingInstruction,
color: 'blue',
},
// …
]);
return EditorState.create({
doc: options.doc,
selection: options.selection,
extensions: [
markdown({
base: markdownLanguage,
codeLanguages: languages,
}),
highlightStyle,
],
});
marijn
February 4, 2022, 1:35pm
2
Those aren’t currently tagged with a specific highlighting tag, so you can’t target them in a highlight style. But it should be possible to pass the return value of styleTags
to your markdown configuration (via an extension with a props
property).
acnebs
February 6, 2022, 2:29am
3
This is how it’s done:
import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
import { languages } from '@codemirror/language-data'
import { EditorState } from '@codemirror/state'
import { MarkdownConfig } from '@lezer/markdown';
const customTags = {
headingMark: Tag.define(),
};
const MarkStylingExtension: MarkdownConfig = {
props: [
styleTags({
HeadingMark: customTags.headingMark,
}),
],
};
const highlightStyle = HighlightStyle.define([
{
tag: customTags.headerMark,
color: 'blue',
},
{
tag: tags.heading1,
color: 'black',
fontSize: '1.75em',
fontWeight: '700',
},
]);
const editorState = EditorState.create({
doc: options.doc,
selection: options.selection,
extensions: [
markdown({
base: markdownLanguage,
codeLanguages: languages,
extensions: [MarkStylingExtension],
}),
highlightStyle,
],
});
You can find the other names like HeadingMark
in the @lezer/markdown
package, around here .