My code can't get multiplex to close

Using multiplex to style python in the middle of yaml. “yaml” mode works fine on its own, and multiplex starts “python” just fine. Once the python starts, though, I can’t close it. I’ve tried it locally and in codepen. You can see it on codepen: https://codepen.io/plocket/pen/ZEGYmXv.

What do I need to change?

Here’s the code that’s in codepen:

<section>
	<div class="container">
		
<div class="code-container">
	<textarea id="code">
---
foo: |
  somestring
---
code: |
  if (foo):
    bar = "str"
zz: |
  - item = "str"
---
	</textarea>
</div><br>
		
	</div>
</section>

CodeMirror.defineMode("yamlmixed", function(){
	let outer = CodeMirror.getMode( {}, "yaml" );
	let inner = CodeMirror.getMode( {}, "python" );

	let innerOptions = {
	  open: /^code: /,
	  // close: /\n[^\s]/,
	  // Tried this to see if the regex was broken, but it isn't working either.
	  close: "zz",
	  mode: inner,
	  parseDelimiters: true,  // I've also tried without this. Hasn't worked either way.
	};

	return CodeMirror.multiplexingMode( outer, innerOptions );
	
});

let mixedMode = {
  name: "yamlmixed",
};

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
	lineNumbers: true,
	mode: 'yamlmixed',
});

Embedded:

You can’t match newlines in your open/close regexp—the regexps are matched against single lines.

Why didn’t “zz” work?

It seems to work fine in the demo you linked.

No, that’s not the correct highlighting. I’ll edit it to make it more clearly like the top item.

Is the difference more clear now? In what way would I need to adjust my code to make “zz” work there?

It still seems to work — if I type if before a zz, it gets highlighted as a keyword. After, it doesn’t.

Sorry that I keep doing this wrong. In the below, the “zz” should be same color as “foo” and both “foostring” and the string under zz should be the same color:

Does that give a clearer description?