[docs] Improve demo previews

The autogenerated demo previews don't show relevant code when used to depict unstyled components (and possibly others as well). Often, the code that matters in the demo is placed outside the default exported function (see https://mui.com/components/buttons/#unstyled-component for example).

I propose to allow manually marking code for a preview as an addition to the current automatic extraction.
It could be marked using comments in code, such as:

import React from 'react';

// -- 8< --
function ImportantComponent() {
  // ...
}
// -- >8 --

export default function NotSoImportant() {
  return <ImportantComponent />
}

Here, the scissors mark was used but we can discuss the shape of the comment to mark the area.

The preview generation code should be adjusted to look for these markers and extract the code between them. If the markers are not found, it can fall back to the current behavior.

We can also modify the full code preview to cut the markers out, so they don't confuse developers.

cc @mui/docs-infra

Start with the preview generation code and compare its output with the unstyled-component example linked in the issue. Done means marked code can be included alongside automatic extraction, the existing fallback still works when markers are absent, and the markers are removed from the full code preview.