Welcome to an exciting update to our markdown components! We've enhanced our technical writing capabilities with a suite of new, interactive components that make your content more engaging and easier to understand.

Our new code blocks come with syntax highlighting, line numbers, and a copy button:

1def check_security(url, payload):
2    # Validate input parameters
3    if not is_valid_url(url):
4        raise ValueError("Invalid URL provided")
5    
6    response = requests.post(url, json=payload)
7    return response.json()

We've added different types of blockquotes for various content types:

Images now support lightbox view, captions, and lazy loading:

For security-focused content, we've added specialized alert components:

To use these components in your MDX files, first import them:

1import { 
2  CodeBlock,
3  BlockQuote,
4  EnhancedImage,
5  SecurityAlert,
6  TableOfContents 
7} from '@/components/mdx';
8
9// Then use them in your MDX content
10<CodeBlock language="python">
11  your code here
12</CodeBlock>

• language: Programming language for syntax highlighting
• showLineNumbers: Boolean to show/hide line numbers
• enableCopy: Boolean to show/hide copy button
• highlightLines: Array or string of lines to highlight
• theme: Override the default theme

• type: 'info' | 'warning' | 'security' | 'tip'
• title: Optional title for the blockquote
• icon: Boolean to show/hide icon
• collapsible: Boolean to make content collapsible

• src: Image source URL
• alt: Alternative text
• caption: Optional image caption
• lazy: Boolean for lazy loading
• blur: Optional blur data URL
• lightbox: Boolean to enable lightbox view

• severity: 'critical' | 'high' | 'medium' | 'low'
• cve: Optional CVE identifier
• cvss: Optional CVSS score
• mitigation: String or component with mitigation steps

1. Use appropriate components for different types of content
2. Keep code blocks focused and well-commented
3. Provide meaningful alt text for images
4. Include security context when using SecurityAlert
5. Structure content with clear headings for TableOfContents

These enhanced markdown components make technical writing more engaging and accessible. They provide a better reading experience while maintaining good performance and accessibility standards.

We've added these new components to further enhance the technical writing experience:

This component allows you to display code before and after a change, with a slider to compare them:

1function calculateTotal(items) {
2  let total = 0;
3  for (let i = 0; i < items.length; i++) {
4    total += items[i].price;
5  }
6  return total;
7}

1function calculateTotal(items) {
2  return items
3    .map(item => item.price)
4    .reduce((total, price) => total + price, 0);
5}

Test what you've learned with interactive questions:

Web Application Security

Web Protocol Fundamentals

Advanced Vulnerabilities

Visualize processes and architectures with interactive diagrams:

Embed YouTube videos with customizable options: