> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsnippets.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Syntax Highlighting
> Switch between different syntax formats for your snippets
## Overview
One of Snippets AI's most powerful features is its intelligent syntax highlighting and format switching. Whether you're working with JavaScript code, Markdown documentation, SQL queries, or AI prompts, Snippets AI automatically detects and highlights your content with the appropriate syntax-and lets you switch between formats instantly.
This guide shows you how to leverage syntax formatting to make your snippets more readable, organized, and powerful.
## Why Syntax Highlighting Matters
Proper syntax highlighting transforms how you work with snippets:
* **Better Readability**: Color-coded syntax makes code and prompts easier to scan and understand
* **Error Prevention**: Syntax highlighting helps you spot typos and mistakes before you use a snippet
* **Context Switching**: Quickly switch between formats as you work across different tools
* **Professional Organization**: Keep your snippet library clean and properly formatted
* **Team Consistency**: Ensure everyone on your team uses the same formatting standards
## Supported Syntax Formats
Snippets AI supports a wide range of syntax formats:
* **Programming Languages**: JavaScript, TypeScript, Python, Java, Go, Rust, Ruby, PHP, C++, C#, Swift, Kotlin
* **Web Technologies**: HTML, CSS, SCSS, JSON, XML, YAML
* **Database**: SQL, PostgreSQL, MongoDB
* **Markup**: Markdown, MDX, LaTeX
* **Shell**: Bash, Zsh, PowerShell
* **AI Prompts**: Specialized formatting for LLM prompts
* **Plain Text**: No syntax highlighting for general notes
## How It Works
### Step-by-Step Guide
#### 1. **Create or Open a Snippet**
Start with any snippet in your workspace-whether it's a new one or an existing snippet you want to format.
#### 2. **Choose Your Syntax Format**
Look for the syntax selector in the snippet editor (typically in the top-right corner or toolbar). Click it to see all available syntax formats.
The dropdown includes:
* A search bar to quickly find your desired format
* Recently used formats at the top
* All available syntax types organized by category
#### 3. **Switch Formats in Real-Time**
As shown in the video, you can switch between syntax formats instantly:
```javascript theme={null}
// Your snippet in JavaScript format
const fetchData = async () => {
const response = await fetch('/api/data');
return response.json();
};
```
↓ Switch to Python ↓
```python theme={null}
# Same snippet in Python format
async def fetch_data():
response = await fetch('/api/data')
return response.json()
```
The syntax highlighting updates immediately, helping you visualize how your snippet looks in different contexts.
#### 4. **Auto-Detection**
Snippets AI is smart enough to detect the syntax format automatically in most cases:
* Paste SQL code → Auto-detected as SQL
* Paste a markdown document → Auto-detected as Markdown
* Paste a JSON object → Auto-detected as JSON
You can always override the auto-detection by manually selecting a format.
#### 5. **Save with Format**
When you save a snippet, the chosen syntax format is stored with it. This means:
* The snippet always displays with the correct highlighting
* Team members see the same formatting
* API calls return the format information
* Exports maintain the proper syntax
## Practical Use Cases
### For Developers
**Debugging Workflows**
```javascript theme={null}
// Save debugging snippets with proper JS syntax
console.log('Debug point reached:', {
userId,
timestamp: Date.now(),
});
```
**SQL Queries**
```sql theme={null}
-- Store database queries with SQL highlighting
SELECT u.name, u.email, o.order_date
FROM users u
JOIN orders o ON u.id = o.user_id
WHERE o.status = 'completed'
ORDER BY o.order_date DESC;
```
**Configuration Files**
```yaml theme={null}
# Save config snippets with YAML syntax
services:
web:
image: nginx:latest
ports:
- '80:80'
```
### For AI Engineers & Prompt Engineers
**Structured Prompts**
Switch between plain text and Markdown for complex prompts:
```markdown theme={null}
# AI Agent Instructions
## Context
You are a helpful assistant specialized in technical documentation.
## Task
- Review the provided code
- Suggest improvements
- Explain any security concerns
## Output Format
Provide a numbered list of actionable recommendations.
```
**Multi-Language Examples**
Store the same prompt logic in different programming languages:
```python theme={null}
# Python version
def process_data(input_list):
return [x * 2 for x in input_list if x > 0]
```
```javascript theme={null}
// JavaScript version
function processData(inputList) {
return inputList.filter((x) => x > 0).map((x) => x * 2);
}
```
### For Product & Operations Teams
**API Documentation Snippets**
```json theme={null}
{
"endpoint": "/api/users",
"method": "POST",
"body": {
"name": "John Doe",
"email": "john@example.com"
}
}
```
**Shell Commands**
```bash theme={null}
# Deployment commands
docker build -t myapp:latest .
docker push myapp:latest
kubectl apply -f deployment.yaml
```
## Advanced Features
### Format-Specific Tools
Different syntax formats unlock different features:
* **Code Formats**: Line numbers, collapsible functions, variable highlighting
* **Markdown**: Live preview, heading navigation, link validation
* **JSON**: Auto-formatting, structure validation, collapsible objects
* **SQL**: Query formatting, keyword highlighting, table detection
### Copy with Syntax
When you copy a snippet to your clipboard, the syntax format is preserved:
1. Copy snippet from Snippets AI
2. Paste into your IDE or editor
3. Syntax highlighting carries over (in compatible editors)
## Best Practices
**Choose the Right Format**: Always select the syntax format that matches how
you'll use the snippet. This ensures proper highlighting and formatting when
you expand it.
**Use Markdown for Documentation**: For snippets that include instructions,
use Markdown to add headers, lists, and formatting that renders beautifully.
**Test Format Switching**: If you maintain the same snippet in multiple
languages (e.g., for API examples), save separate variations and use tags to
link them.
**Leverage Auto-Detection**: Let Snippets AI detect the format first, then
adjust if needed. This saves time and ensures consistency.
## Working with the API
Syntax formats are fully accessible via the API, enabling automation:
```javascript theme={null}
// Create a snippet with specific syntax
const response = await fetch('https://api.getsnippets.ai/v1/snippets', {
method: 'POST',
headers: {
Authorization: 'Bearer YOUR_API_KEY',
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'Database Query',
content: 'SELECT * FROM users WHERE active = true;',
syntax: 'sql',
folder_id: 'your-folder-id',
}),
});
```
This allows you to:
* Programmatically create snippets with proper formatting
* Bulk update syntax formats across your library
* Export snippets in specific formats for documentation
* Build custom syntax highlighting in your own tools
## Format Comparison
Here's the same snippet in different formats to show how syntax switching helps:
**As JavaScript:**
```javascript theme={null}
const user = {
name: 'Alice',
role: 'Engineer',
active: true,
};
```
**As JSON:**
```json theme={null}
{
"name": "Alice",
"role": "Engineer",
"active": true
}
```
**As Python:**
```python theme={null}
user = {
"name": "Alice",
"role": "Engineer",
"active": True
}
```
Each format highlights differently, helping you understand the context at a glance.
## Next Steps
Now that you understand syntax highlighting:
1. Review your existing snippets and assign appropriate syntax formats
2. Experiment with switching formats to see which works best for your workflow
3. Create snippet templates with pre-set syntax for common use cases
4. Share formatted snippets with your team to maintain consistency
Learn how to store multimedia content in Snippets AI
See how to programmatically create snippets with syntax formatting