How do I change how indentation is parsed?

[NullVoxPopuli]

I'm wanting to integrate remark / rehype with a component renderer, and something that happens often is that component rendering is deeply nested -- for example:

<MyComponent>
  <Foo>
    <Bar>
    
      - now I
      - want a list
      
    </Bar>
  </Foo>
</MyComponent>

but, because that list is indented 4+ spaces, it's interpreted as code.
What I want is to reset the reference indentation at every element/component nesting.

[ChristianMurphy]

It looks like you want JSX and markdown mixed?
If so, use consider using MDX directly. https://github.com/mdx-js/mdx

If you want to go into custom parsing (I won't recommend it), you could use how micromark jsx is handled for MDX as a reference https://github.com/micromark/micromark-extension-mdx-jsx

this is how it behaves https://codesandbox.io/s/mdx-2-component-block-parsing-p69f3

[NullVoxPopuli]

It looks like you want JSX and markdown mixed?

maybe -- I'm not using JSX (or React, or anything JSX-esque), so I don't know exactly what footguns I'll run in to from using mdx...

you could use how micromark
this is how it behaves

excellent, I'll have a look

you want to go into custom parsing (I won't recommend it)

I am no stranger to dealing with low-level utilities ;)

[wooorm]

This is a guide on turning off constructs, specificailly showing indented code: https://github.com/micromark/micromark#case-turn-off-constructs.

[NullVoxPopuli]

Progress! https://jsbin.com/jizotik/edit?html,console

Thanks!

Now I need to figure out multi-line element/componentctags