Feature: Focus/Expendable Code Snippets

[julio4]

Extend the !include marker with:

• !include_focus: all the content of the file is imported, but !code focus action is applied on each line of the imported content. All the // [!region] comments are deleted as well.

• !include_expandable: Same behaviors as !include_focus, however initially all the non focused part of the code block is collapsed. A small toggle icon allows to expand/collapse the content outside of the imported region.

Mdbook has this feature with #rustdoc_include.

Not sure if possible, but we could also consider abstracting the applied actions:
[!include path(:region)?( action)*] would apply the list of actions to the imported content (all the file or just the region if specified). With this, implement expand action separately from !include marker (Slightly related to #225).

Example

With the following snippet:

// [!region import]
import { http, createPublicClient } from 'viem'
import { mainnet } from 'viem/chains'
// [!endregion import]
 
// [!region setup]
const client = createPublicClient({
  chain: mainnet,
  transport: http(),
})
// [!endregion setup]
 
const blockNumber = await client.getBlockNumber()

Markdown page:

// [!include_focus ~/snippets/example.ts:setup]

Result:

import { http, createPublicClient } from 'viem'
import { mainnet } from 'viem/chains'
 
const client = createPublicClient({ // [!code focus]
  chain: mainnet, // [!code focus]
  transport: http(), // [!code focus]
}) // [!code focus]
 
const blockNumber = await client.getBlockNumber()

With !include_expandable:

// [!include_expandable ~/snippets/example.ts:setup]

Result:

const client = createPublicClient({
  chain: mainnet,
  transport: http(),
})

With a button to switch between this and !include_focus result.

[julio4]

A configured prefix to hide line could be used as well. This could be reused to implement expandable easily.
With #:

# import { http, createPublicClient } from 'viem'
import { mainnet } from 'viem/chains'

Would only render to:

import { mainnet } from 'viem/chains'

<code class="vocs_Code hide">
    <span class="line vocs_Span hidden">"import { http, createPublicClient } from 'viem'"</span>
    <span class="line vocs_Span">"import { mainnet } from 'viem/chains'"</span>
</code>

.hide .hidden {
    display: none;
}

An hide action would append # to each lines when used with !include.
expandable toggle button would just add/remove the specific hide class and automatically show/hide hidden lines.