Enhanced Fence Component Test

This page demonstrates all the new features added to the Fence component.

1. Basic Code Block (Backward Compatible)

Standard code block without any enhancements:

function greet(name) {
  console.log(`Hello, ${name}!`)
  return `Welcome to the docs!`
}

greet('Developer')

2. Code Block with Line Numbers

Use showLineNumbers to display line numbers:

1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { create } from '@metaplex-foundation/mpl-core'
3
4const umi = createUmi('https://api.devnet.solana.com')
5
6const asset = await create(umi, {
7  name: 'My NFT',
8  uri: 'https://example.com/metadata.json'
9}).sendAndConfirm(umi)
10
11console.log('Created:', asset.publicKey)

3. Highlight Specific Lines

Use highlightLines to highlight important lines:

1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { create } from '@metaplex-foundation/mpl-core'
3import { mplCore } from '@metaplex-foundation/mpl-core'
4
5const umi = createUmi('https://api.devnet.solana.com').use(mplCore())
6
7const asset = await create(umi, {
8  name: 'My NFT',
9  uri: 'https://example.com/metadata.json'
10}).sendAndConfirm(umi)
11
12console.log('Created:', asset.publicKey)

Lines 3 and 7-9 are highlighted!

4. Show Only Specific Lines (Line Range)

Use showLines to display only certain lines:

1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { create } from '@metaplex-foundation/mpl-core'
3import { mplCore } from '@metaplex-foundation/mpl-core'
4}).sendAndConfirm(umi)
5

Only showing lines 1-3 and 10-11 (with proper line numbers maintained)!

5. Code Block with Title

Use title to show a filename or description:

src/examples/create-nft.js

1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { create } from '@metaplex-foundation/mpl-core'
3
4const umi = createUmi('https://api.devnet.solana.com')
5
6const asset = await create(umi, {
7  name: 'My NFT',
8  uri: 'https://example.com/metadata.json'
9}).sendAndConfirm(umi)

6. All Features Combined

Title + Line Numbers + Highlighting + Line Range:

config/setup.js

10
11// Generate a new keypair for the asset
12const assetSigner = generateSigner(umi)
13
14// Create the asset with all metadata
15const asset = await create(umi, {
16  asset: assetSigner,
17  name: 'My Amazing NFT',
18  uri: 'https://arweave.net/my-metadata.json',
19  collection: collectionAddress,
20}).sendAndConfirm(umi)

Showing lines 10-20 with lines 15-17 highlighted!

7. Rust Example with Features

programs/my-program/src/lib.rs

1use anchor_lang::prelude::*;
2use mpl_core::instructions::TransferV1;
3
4declare_id!("Fg6PaFpoGXkYsidMpWTK6W2BeZ7FEfcYkg476zPFsLnS");
5
6#[program]
7pub mod transfer_asset {
8    use super::*;
9
10    pub fn transfer(ctx: Context<TransferAsset>) -> Result<()> {
11        let asset = &mut ctx.accounts.asset;
12        asset.owner = ctx.accounts.new_owner.key();
13        Ok(())
14    }
15}

Feature Summary

✅ Line Numbers - showLineNumbers=true ✅ Line Highlighting - highlightLines="1,3-5,10" ✅ Line Range - showLines="1-10,15-20" ✅ Title/Filename - title="path/to/file.js" ✅ Copy Button - Already included by default ✅ Backward Compatible - All existing code blocks still work!

Usage in Markdown

```javascript ,
// Your code here
```

The Fence component now supports professional code documentation! 🎉

Integration with Tabbed Code Examples

The enhanced Fence features also work with multi-framework code tabs!

8. Basic Tabbed Code (Copy with Context)

Standard tabbed code with Snippet/Full toggle:

1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { create } from '@metaplex-foundation/mpl-core'
3import { mplCore } from '@metaplex-foundation/mpl-core'
4
5// Initialize UMI
6const umi = createUmi('https://api.devnet.solana.com')
7  .use(mplCore())
8
9// Create a new NFT asset
10const asset = await create(umi, {
11  name: 'My NFT',
12  uri: 'https://example.com/metadata.json'
13}).sendAndConfirm(umi)
14
15console.log('Asset created:', asset.publicKey)

1use mpl_core::instructions::CreateV1;
2use solana_sdk::signer::Signer;
3
4// Create a new NFT asset
5let create_ix = CreateV1 {
6    name: "My NFT".to_string(),
7    uri: "https://example.com/metadata.json".to_string(),
8    ..Default::default()
9};
10
11let instruction = create_ix.instruction();
12
13println!("Asset instruction created");

1use anchor_lang::prelude::*;
2
3declare_id!("Fg6PaFpoGXkYsidMpWTK6W2BeZ7FEfcYkg476zPFsLnS");
4
5#[program]
6pub mod create_asset {
7    use super::*;
8
9    // Create a new NFT asset
10    pub fn create(
11        ctx: Context<CreateAsset>,
12        name: String,
13        uri: String
14    ) -> Result<()> {
15        let asset = &mut ctx.accounts.asset;
16        asset.name = name;
17        asset.uri = uri;
18        asset.owner = ctx.accounts.owner.key();
19
20        msg!("Asset created: {}", asset.key());
21        Ok(())
22    }
23}
24
25#[derive(Accounts)]
26pub struct CreateAsset<'info> {
27    #[account(init, payer = owner, space = 8 + 200)]
28    pub asset: Account<'info, Asset>,
29    #[account(mut)]
30    pub owner: Signer<'info>,
31    pub system_program: Program<'info, System>,
32}
33
34#[account]
35pub struct Asset {
36    pub name: String,
37    pub uri: String,
38    pub owner: Pubkey,
39}

9. Tabbed Code with Line Numbers

Add line numbers to all tabs:

1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { create } from '@metaplex-foundation/mpl-core'
3import { mplCore } from '@metaplex-foundation/mpl-core'
4
5// Initialize UMI
6const umi = createUmi('https://api.devnet.solana.com')
7  .use(mplCore())
8
9// Create a new NFT asset
10const asset = await create(umi, {
11  name: 'My NFT',
12  uri: 'https://example.com/metadata.json'
13}).sendAndConfirm(umi)
14
15console.log('Asset created:', asset.publicKey)

1use mpl_core::instructions::CreateV1;
2use solana_sdk::signer::Signer;
3
4// Create a new NFT asset
5let create_ix = CreateV1 {
6    name: "My NFT".to_string(),
7    uri: "https://example.com/metadata.json".to_string(),
8    ..Default::default()
9};
10
11let instruction = create_ix.instruction();
12
13println!("Asset instruction created");

1use anchor_lang::prelude::*;
2
3declare_id!("Fg6PaFpoGXkYsidMpWTK6W2BeZ7FEfcYkg476zPFsLnS");
4
5#[program]
6pub mod create_asset {
7    use super::*;
8
9    // Create a new NFT asset
10    pub fn create(
11        ctx: Context<CreateAsset>,
12        name: String,
13        uri: String
14    ) -> Result<()> {
15        let asset = &mut ctx.accounts.asset;
16        asset.name = name;
17        asset.uri = uri;
18        asset.owner = ctx.accounts.owner.key();
19
20        msg!("Asset created: {}", asset.key());
21        Ok(())
22    }
23}
24
25#[derive(Accounts)]
26pub struct CreateAsset<'info> {
27    #[account(init, payer = owner, space = 8 + 200)]
28    pub asset: Account<'info, Asset>,
29    #[account(mut)]
30    pub owner: Signer<'info>,
31    pub system_program: Program<'info, System>,
32}
33
34#[account]
35pub struct Asset {
36    pub name: String,
37    pub uri: String,
38    pub owner: Pubkey,
39}

10. Tabbed Code with Highlighting

Highlight important lines across all tabs:

1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { transfer } from '@metaplex-foundation/mpl-core'
3import { mplCore } from '@metaplex-foundation/mpl-core'
4import { publicKey } from '@metaplex-foundation/umi'
5
6// Initialize UMI
7const umi = createUmi('https://api.devnet.solana.com')
8  .use(mplCore())
9
10// Transfer an existing NFT asset to a new owner
11const result = await transfer(umi, {
12  asset: publicKey('AssetAddressHere...'),
13  newOwner: publicKey('RecipientAddressHere...'),
14}).sendAndConfirm(umi)
15
16console.log('Asset transferred:', result.signature)

1use mpl_core::instructions::TransferV1;
2use solana_sdk::{pubkey::Pubkey, signer::Signer};
3
4// Asset and recipient addresses
5let asset = Pubkey::from_str("AssetAddressHere...").unwrap();
6let new_owner = Pubkey::from_str("RecipientAddressHere...").unwrap();
7
8// Transfer an existing NFT asset to a new owner
9let transfer_ix = TransferV1 {
10    asset,
11    new_owner,
12    ..Default::default()
13};
14
15let instruction = transfer_ix.instruction();
16
17println!("Transfer instruction created");

1use anchor_lang::prelude::*;
2
3declare_id!("Fg6PaFpoGXkYsidMpWTK6W2BeZ7FEfcYkg476zPFsLnS");
4
5#[program]
6pub mod transfer_asset {
7    use super::*;
8
9    // Transfer an existing NFT asset to a new owner
10    pub fn transfer(
11        ctx: Context<TransferAsset>
12    ) -> Result<()> {
13        let asset = &mut ctx.accounts.asset;
14
15        // Verify current owner
16        require!(
17            asset.owner == ctx.accounts.current_owner.key(),
18            ErrorCode::Unauthorized
19        );
20
21        // Transfer ownership
22        asset.owner = ctx.accounts.new_owner.key();
23
24        msg!("Asset transferred to: {}", asset.owner);
25        Ok(())
26    }
27}
28
29#[derive(Accounts)]
30pub struct TransferAsset<'info> {
31    #[account(mut)]
32    pub asset: Account<'info, Asset>,
33    pub current_owner: Signer<'info>,
34    /// CHECK: New owner can be any account
35    pub new_owner: AccountInfo<'info>,
36}
37
38#[account]
39pub struct Asset {
40    pub name: String,
41    pub uri: String,
42    pub owner: Pubkey,
43}
44
45#[error_code]
46pub enum ErrorCode {
47    #[msg("Unauthorized: You are not the owner of this asset")]
48    Unauthorized,
49}

Lines 6-9 are highlighted in each framework!

11. All Features Together in Tabs

Line numbers + highlighting + Snippet/Full toggle:

1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { create } from '@metaplex-foundation/mpl-core'
3import { mplCore } from '@metaplex-foundation/mpl-core'
4
5// Initialize UMI
6const umi = createUmi('https://api.devnet.solana.com')
7  .use(mplCore())
8
9// Create a new NFT asset
10const asset = await create(umi, {
11  name: 'My NFT',
12  uri: 'https://example.com/metadata.json'
13}).sendAndConfirm(umi)
14
15console.log('Asset created:', asset.publicKey)

1use mpl_core::instructions::CreateV1;
2use solana_sdk::signer::Signer;
3
4// Create a new NFT asset
5let create_ix = CreateV1 {
6    name: "My NFT".to_string(),
7    uri: "https://example.com/metadata.json".to_string(),
8    ..Default::default()
9};
10
11let instruction = create_ix.instruction();
12
13println!("Asset instruction created");

1use anchor_lang::prelude::*;
2
3declare_id!("Fg6PaFpoGXkYsidMpWTK6W2BeZ7FEfcYkg476zPFsLnS");
4
5#[program]
6pub mod create_asset {
7    use super::*;
8
9    // Create a new NFT asset
10    pub fn create(
11        ctx: Context<CreateAsset>,
12        name: String,
13        uri: String
14    ) -> Result<()> {
15        let asset = &mut ctx.accounts.asset;
16        asset.name = name;
17        asset.uri = uri;
18        asset.owner = ctx.accounts.owner.key();
19
20        msg!("Asset created: {}", asset.key());
21        Ok(())
22    }
23}
24
25#[derive(Accounts)]
26pub struct CreateAsset<'info> {
27    #[account(init, payer = owner, space = 8 + 200)]
28    pub asset: Account<'info, Asset>,
29    #[account(mut)]
30    pub owner: Signer<'info>,
31    pub system_program: Program<'info, System>,
32}
33
34#[account]
35pub struct Asset {
36    pub name: String,
37    pub uri: String,
38    pub owner: Pubkey,
39}

Complete Feature Matrix

Feature	Standalone Code	Tabbed Code	Example
Line Numbers	✅	✅	`showLineNumbers=true`
Line Highlighting	✅	✅	`highlightLines="1-5,7"`
Line Range	✅	✅	`showLines="1-10,15-20"`
Title/Filename	✅	⚠️ Per-tab only	`title="file.js"`
Copy Button	✅	✅	`showCopy=true`
Snippet/Full Toggle	❌	✅	Automatic in tabs
Multi-Framework	❌	✅	code-tabs-imported

Combined Power! 💪

Now you can:

Show multi-framework examples with tabs (Kit, Umi, Shank, Anchor)
Toggle between Snippet and Full code with one click
Display line numbers for easy reference
Highlight important lines to focus attention
Show only relevant lines with line ranges
Add titles to provide context
Sync preferences across all code blocks on the page!

This makes the documentation professional, beginner-friendly, and developer-focused all at once! 🎉