Observable Framework and Cursor not working well

[nicola]

I am a very active Observable Framework and Cursor user and I would like to make them work together.

Observable

The Observable Framework core idea is that code is written in a markdown file as code blocks for example:

# Title

Welcome ${hello()}

```js
const hello = () => "hello world"
```

Problem with cursor

However, when using cursor, cursor UI breaks. Cursor tries to suggest code blocks, but since they are inside code blocks, the UI breaks.

I tried with .cursorrules, by saying to provide code blocks and I run into these two problems:

1. Either it provides me with a code block, but the code block is rendered as a code block (so it does not contain ```js code, in fact when I ask to apply it only applies the content of the block).

See image here: https://global.discourse-cdn.com/flex020/uploads/cursor1/original/2X/c/cb6b5b822a81c3ae38be0a9dd95bbc2a9d7bf17a.png - sorry I am a new user I can’t embed two images…

2. Or it breaks the UX

Potential bug

My take is that the current way cursor suggests changes is with code blocks (which themselves can’t contain code blocks).

Is there a way to fix this?