[Feature][Docs]: Support `diff` in code snippet build system

[nikolasburk]

Problem Statement

The snippet build system is really useful to validate that all snippets in the docs actually compile when the docs are built.

Right now, they don't support diff code blocks, so we need to fallback to regular, "fenced" code blocks in raw markdown/MDX.

Proposed Solution

It would be nice to be able to use diffs in the snippet build system.

I didn't dive deep into how the snippets build system works, but one idea could be this:

Raw snippet (in _assets/code/.../snippet.ts):

function App() {

+  const { store } = useStore()

  // The trailing `$` is a convention to indicate that this
  // variable is a "live query".
+  const todos$ = queryDb(() => tables.todos.select())

  // `todos` is an array containing all the todos from the DB.
  // When rendering the component, you can do {todos.map(todo => ...
  // and access `todo.text` and `todo.id` as before.
+  const todos = store.useQuery(todos$)
-  const [todos, setTodos] = useState<Todo[]>([])

  // ... remaining code for the `App` component
}

Since the lines prefixed with - aren't relevant and only the new lines marked by the + prefix should count; there could be another step before the validation that removes the lines prefixed with - as well as the leading + to make the code compile.

Additionally, we need a way to render the green/red lines.

Alternative Solutions

No response

Which package(s) would this affect?

No response

Priority/Impact

Would be helpful

Additional Context

No response

Checklist

• I have searched existing issues and discussions to ensure this feature hasn't been requested before
• I have clearly described the problem this feature would solve