Code Features Showcase

Discover powerful code presentation and documentation features for technical content.

🎨 Syntax Highlighting

Basic Syntax Highlighting

// JavaScript with syntax highlighting
function deploySmartContract(contractData) {
  const web3 = new Web3(window.ethereum);
  const contract = new web3.eth.Contract(ABI, contractAddress);

  return contract.methods
    .deploy(contractData)
    .send({ from: account })
    .on('receipt', (receipt) => {
      console.log('Contract deployed:', receipt.contractAddress);
    });
}

# Python with syntax highlighting
import web3
from eth_account import Account

class BlockchainManager:
    def __init__(self, provider_url):
        self.w3 = web3.Web3(web3.HTTPProvider(provider_url))
        self.account = Account.from_key(private_key)

    def deploy_contract(self, bytecode, abi):
        Contract = self.w3.eth.contract(abi=abi, bytecode=bytecode)
        tx = Contract.constructor().build_transaction({
            'from': self.account.address,
            'nonce': self.w3.eth.get_transaction_count(self.account.address),
        })
        return self.w3.eth.send_raw_transaction(signed_tx.rawTransaction)

// Solidity smart contract
pragma solidity ^0.8.0;

contract ProperLabsToken {
    mapping(address => uint256) private balances;
    uint256 public totalSupply;

    event Transfer(address indexed from, address indexed to, uint256 value);

    constructor(uint256 _initialSupply) {
        totalSupply = _initialSupply;
        balances[msg.sender] = _initialSupply;
    }

    function transfer(address _to, uint256 _value) public returns (bool) {
        require(balances[msg.sender] >= _value, "Insufficient balance");
        balances[msg.sender] -= _value;
        balances[_to] += _value;
        emit Transfer(msg.sender, _to, _value);
        return true;
    }
}

📋 Code with Line Numbers

src/components/Web3Provider.tsx

import React, { createContext, useContext, useState, useEffect } from 'react';
import { ethers } from 'ethers';

interface Web3ContextType {
  provider: ethers.Provider | null;
  signer: ethers.Signer | null;
  account: string | null;
  connect: () => Promise<void>;
}

const Web3Context = createContext<Web3ContextType>({
  provider: null,
  signer: null,
  account: null,
  connect: async () => {},
});

export function Web3Provider({ children }: { children: React.ReactNode }) {
  const [provider, setProvider] = useState<ethers.Provider | null>(null);
  const [signer, setSigner] = useState<ethers.Signer | null>(null);
  const [account, setAccount] = useState<string | null>(null);

  const connect = async () => {
    if (typeof window.ethereum !== 'undefined') {
      const web3Provider = new ethers.BrowserProvider(window.ethereum);
      const web3Signer = await web3Provider.getSigner();
      const address = await web3Signer.getAddress();

      setProvider(web3Provider);
      setSigner(web3Signer);
      setAccount(address);
    }
  };

  return (
    <Web3Context.Provider value={{ provider, signer, account, connect }}>
      {children}
    </Web3Context.Provider>
  );
}

🔍 Line Highlighting

HighlightedLines.jsx

function ProperLabsComponent() {
  // These lines are highlighted
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // This line is also highlighted
    fetchBlockchainData();
  }, []);

  return (
    <div className="proper-labs-component">
      {loading ? <Spinner /> : <DataDisplay data={data} />}
    </div>
  );
}

➕➖ Diff View

contract-changes.diff

 contract ProperLabsDAO {
     mapping(address => uint256) public votingPower;
     uint256 public proposalCount;
+    uint256 public quorumThreshold;
+    uint256 public votingPeriod;

     struct Proposal {
         string description;
         uint256 voteCount;
-        bool active;
+        bool executed;
+        uint256 endTime;
         mapping(address => bool) hasVoted;
     }

-    function createProposal(string memory _description) public {
+    function createProposal(string memory _description) public onlyMember {
         require(votingPower[msg.sender] > 0, "No voting power");
+        require(bytes(_description).length > 0, "Empty description");

         Proposal storage newProposal = proposals[proposalCount++];
         newProposal.description = _description;
-        newProposal.active = true;
+        newProposal.executed = false;
+        newProposal.endTime = block.timestamp + votingPeriod;
     }
 }

📁 Multiple File Examples

package.json

package.json

{
  "name": "proper-labs-sdk",
  "version": "1.0.0",
  "description": "Official SDK for Proper Labs Web3 Platform",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc",
    "test": "jest",
    "lint": "eslint src/**/*.ts"
  },
  "dependencies": {
    "ethers": "^6.0.0",
    "@proper-labs/contracts": "^1.0.0"
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "jest": "^29.0.0",
    "@types/node": "^18.0.0"
  }
}

tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

test.spec.ts

test.spec.ts

import { ProperLabsSDK } from '../src';
import { ethers } from 'ethers';

describe('ProperLabsSDK', () => {
  let sdk: ProperLabsSDK;

  beforeEach(() => {
    sdk = new ProperLabsSDK({
      apiKey: process.env.API_KEY,
      network: 'mainnet'
    });
  });

  it('should deploy smart contract', async () => {
    const contract = await sdk.deployContract({
      bytecode: '0x...',
      abi: [],
    });

    expect(contract.address).toBeDefined();
    expect(ethers.isAddress(contract.address)).toBe(true);
  });
});

🔤 Inline Code Examples

In your documentation, you can use inline code to reference functions like deployContract() or variables like const web3Provider. You can also show keyboard shortcuts like Ctrl + C or file paths like /src/components/Web3Provider.tsx.

💻 Terminal/Console Output

Terminal

$ npm install @proper-labs/sdk

added 47 packages, and audited 152 packages in 3s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$ proper-labs init my-web3-app

🚀 Initializing Proper Labs Web3 Application...
✅ Project structure created
✅ Dependencies installed
✅ Smart contracts configured
✅ AI models connected

🎉 Your Web3 app is ready!

Next steps:
  cd my-web3-app
  npm run dev

Visit http://localhost:3000 to see your app

📝 Code Annotations

interface BlockchainConfig {
  // Network configuration
  network: 'mainnet' | 'testnet' | 'localhost'; // [!code highlight]

  // RPC endpoint URL
  rpcUrl: string; // [!code focus]

  // Contract addresses
  contracts: {
    token: string;    // ERC20 token contract
    dao: string;      // DAO governance contract
    staking: string;  // Staking rewards contract // [!code ++]
    // vault: string; // Deprecated, use staking // [!code --]
  };

  // Optional: Custom gas settings
  gasOptions?: {
    maxFeePerGas?: bigint;
    maxPriorityFeePerGas?: bigint;
  };
}

🎯 Live Code Examples

https://playground.proper-labs.io

Live Editor

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    .button {
      padding: 10px 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
    }
    .output {
      margin-top: 20px;
      padding: 15px;
      background: #f5f5f5;
      border-radius: 6px;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Proper Labs Interactive Demo</h2>
    <button class="button" onclick="connectWallet()">
      Connect Wallet
    </button>
    <div class="output" id="output">
      Click the button to simulate wallet connection
    </div>
  </div>

  <script>
    function connectWallet() {
      const output = document.getElementById('output');
      output.innerHTML = `
        <strong>✅ Wallet Connected!</strong><br>
        Address: 0x742d...8963<br>
        Network: Ethereum Mainnet<br>
        Balance: 2.45 ETH
      `;
    }
  </script>
</body>
</html>

Result

Loading...

📚 Documentation Comments

/**
 * ProperLabsSDK - Main SDK class for interacting with Proper Labs platform
 *
 * @example
 * ```typescript
 * const sdk = new ProperLabsSDK({
 *   apiKey: 'your-api-key',
 *   network: 'mainnet'
 * });
 *
 * const contract = await sdk.deployContract({
 *   bytecode: contractBytecode,
 *   abi: contractABI
 * });
 * ```
 *
 * @class ProperLabsSDK
 * @param {SDKConfig} config - Configuration object
 * @param {string} config.apiKey - API key for authentication
 * @param {Network} config.network - Target blockchain network
 * @returns {ProperLabsSDK} SDK instance
 */
export class ProperLabsSDK {
  /**
   * Deploys a smart contract to the blockchain
   *
   * @method deployContract
   * @param {DeployOptions} options - Deployment options
   * @returns {Promise<Contract>} Deployed contract instance
   * @throws {Error} If deployment fails
   */
  async deployContract(options: DeployOptions): Promise<Contract> {
    // Implementation
  }
}

🏗️ Project Structure View

Project Structure

proper-labs-web3-app/
├── 📁 src/
│   ├── 📁 components/
│   │   ├── Web3Provider.tsx
│   │   ├── ConnectButton.tsx
│   │   └── TransactionModal.tsx
│   ├── 📁 contracts/
│   │   ├── Token.sol
│   │   ├── DAO.sol
│   │   └── artifacts/
│   ├── 📁 hooks/
│   │   ├── useWeb3.ts
│   │   ├── useContract.ts
│   │   └── useBalance.ts
│   ├── 📁 utils/
│   │   ├── blockchain.ts
│   │   ├── constants.ts
│   │   └── formatters.ts
│   └── 📄 index.ts
├── 📁 tests/
│   └── sdk.test.ts
├── 📄 package.json
├── 📄 tsconfig.json
└── 📄 README.md

🔗 Code Linking

You can link to specific files and lines in your repository:

• View the full implementation: src/sdk/index.ts
• See the smart contract: contracts/Token.sol#L42-L67
• Check the test suite: tests/integration.test.ts

---

Code Documentation Best Practices

• Use syntax highlighting for all code blocks
• Add line numbers for reference in explanations
• Highlight important lines to draw attention
• Show diffs for code changes and updates
• Include multiple file examples with tabs
• Add live examples where possible
• Document with JSDoc comments for APIs
• Provide project structure views for context