Custom node types for markdown mode

v6
1

Hey there,

I’m trying to solve the following problem:
I am trying to create a hybrid editor showing markdown and highlighting it at the same time.
However my markdown syntax is very different from the existing modes eg.: bold = *text* or italic = _text_ etc…

I’ve tried extending the syntax like described in Adding support for the additional inline syntax to Markdown but unfortunately didn’t get it to work.

Could you point me in the right direction?

Thanks!
Fynn

2

If you’re defining new meaning for syntax used in base CommonMark, you will probably have to turn off the rules that define the standard syntax. Apart from that, you really didn’t tell us enough about what you’re trying and what is going wrong to provide any useful feedback.

3

Turning off the rules for the standard syntax sounds promising. I’ve validated that custom rules that don’t interfere with the standard work like expected (the highlight thread mentioned in my question)

This is the current editor state with my two custom nodes:
image

As you can see, the custom highlight extension works as expected, the customBold extension doesn’t.
Here is the code:

export const customTags = {
  highlight: Tag.define(), // define custom tag, that can be picked up by the style configuration
  customBold: Tag.define()
}
export const mdHighlight = HighlightStyle.define([
  // { tag: tags.emphasis, fontStyle: 'italic' },
  // { tag: tags.strikethrough, textDecoration: 'line-through' },
  // { tag: tags.url, textDecoration: 'underline' },
  // { tag: tags.strong, fontWeight: 'bold' },
  // { tag: tags.monospace, fontFamily: 'monospace' },
  { tag: customTags.highlight, backgroundColor: 'yellow' },
  { tag: customTags.customBold, fontStyle: 'bold' }
])

const HighlightDelim = { resolve: 'Highlight', mark: 'HighlightMark' }

export const Highlight = {
  defineNodes: ['Highlight', 'HighlightMark'],
  parseInline: [{
    name: 'Highlight',
    parse (cx, next, pos) {
      if (next !== 61 /* '=' */ || cx.char(pos + 1) !== 61) {
        return -1
      }
      return cx.addDelimiter(HighlightDelim, pos, pos + 2, true, true)
    },
    after: 'Emphasis'
  }],
  props: [
    styleTags({
      HighlightMark: tags.processingInstruction,
      'Highlight/...': customTags.highlight
    })
  ]
}

const CustomBoldDelim = { resolve: 'CustomBold', mark: 'CustomBold' }

export const CustomBold = {
  defineNodes: ['CustomBold', 'CustomBoldMark'],
  parseInline: [{
    name: 'CustomBold',
    parse (cx, next, pos) {
      if (next !== 42 /* '*' */ || cx.char(pos + 1) !== 42) {
        return -1
      }
      return cx.addDelimiter(CustomBoldDelim, pos, pos + 2, true, true)
    },
    after: 'Emphasis'
  }],
  props: [
    styleTags({
      CustomBoldMark: tags.processingInstruction,
      'CustomBold/...': customTags.customBold
    })
  ]
}

How would I go about disabling standard rules?

Thanks

4

See the remove extension option. You’ll want to turn off the parser named "Emphasis" (or possibly just define your own parsers with higher precedence).

5

Just defining my own parsers didn’t work - using the remove extension option did the trick.

Thank you