Code Blocks

ArchDoc supports syntax-highlighted code blocks for over 100 programming languages.

Creating a Code Block

Using the Toolbar

1. Place your cursor where you want the code block
2. Click the Code Block button ({ }) in the toolbar
3. Type or paste your code
4. Select the language from the dropdown

Using Markdown Syntax

Type three backticks followed by the language name:

```javascript
function hello() {
  console.log("Hello, world!");
}
```

Using Keyboard Shortcut

• Windows/Linux: Ctrl + Alt + C
• Mac: Cmd + Alt + C

Language Support

ArchDoc supports syntax highlighting for many languages, including:

Popular Languages

Web Technologies

Shell/Scripts

Data/Config

Other

Examples

JavaScript

const greeting = (name) => {
  return `Hello, ${name}!`;
};

console.log(greeting("World"));

Python

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

print([fibonacci(i) for i in range(10)])

TypeScript

interface User {
  id: string;
  name: string;
  email: string;
}

async function getUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

SQL

SELECT 
  u.name,
  COUNT(d.id) as document_count
FROM users u
LEFT JOIN documents d ON d.created_by_id = u.id
WHERE u.company_id = 'company-123'
GROUP BY u.id
ORDER BY document_count DESC;

Shell

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

JSON

{
  "name": "scribe",
  "version": "1.0.0",
  "dependencies": {
    "next": "^15.0.0",
    "react": "^19.0.0"
  }
}

Inline Code

For short code references within text, use inline code:

Use the useState hook for state management.

Toolbar: Click the </> button Shortcut: Ctrl/Cmd + E Markdown: `code`

Best Practices

Choose the Right Language

• Always specify the language for syntax highlighting
• Use the correct identifier from the table above
• Default to text if unsure

Keep Code Readable

• Use proper indentation
• Add comments for complex code
• Break long lines when possible

Provide Context

• Explain what the code does before the block
• Note any dependencies or requirements
• Include expected output if relevant

Use for Actual Code

• Code blocks are for executable or meaningful code
• Use inline code for names/references
• Don't overuse for regular text

Copying Code

Users can easily copy code from blocks:

1. Hover over the code block
2. Click the Copy button that appears
3. Code is copied to clipboard