Split Article Shortcode: Practical Examples

This page demonstrates several practical examples of the split article shortcode in action. You can use these examples as inspiration for your own content.

Example 1: Code Comparison

The split-article shortcode can be used to compare different code implementations:

{{< split-article 
    left="### HTML Version\n```html\n<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col\">\n      <p>Content</p>\n    </div>\n  </div>\n</div>\n```" 
    right="### JSX Version\n```jsx\nfunction Container() {\n  return (\n    <div className=\"container\">\n      <div className=\"row\">\n        <div className=\"col\">\n          <p>Content</p>\n        </div>\n      </div>\n    </div>\n  );\n}\n```"
    leftPoint="Traditional HTML" 
    rightPoint="React JSX"
    note="Different syntaxes for describing the same UI component structure."
>}}

Example 2: Before and After

Perfect for showing transformations or changes:

{{< split-article 
    left="### Before Optimization\n```css\n.container {\n  background-color: #f5f5f5;\n  font-family: Arial, Helvetica, sans-serif;\n  color: #333333;\n  padding: 20px;\n  margin-bottom: 20px;\n  border-radius: 5px;\n}\n```" 
    right="### After Optimization\n```css\n:root {\n  --bg-color: #f5f5f5;\n  --text-color: #333;\n  --spacing: 20px;\n}\n\n.container {\n  background-color: var(--bg-color);\n  font-family: Arial, sans-serif;\n  color: var(--text-color);\n  padding: var(--spacing);\n  margin-bottom: var(--spacing);\n  border-radius: 5px;\n}\n```"
    leftPoint="Original CSS" 
    rightPoint="Optimized CSS"
    note="Using CSS variables improves maintainability and reduces repetition."
>}}

Example 3: Pros and Cons

Great for comparing advantages and disadvantages:

{{< split-article 
    left="### Advantages\n- Faster page loads\n- Better SEO performance\n- Lower hosting costs\n- Improved security\n- No database maintenance" 
    right="### Disadvantages\n- Limited dynamic features\n- Build process required\n- Content editing less intuitive\n- No real-time updates\n- More complex setup"
    leftPoint="Static Site Pros" 
    rightPoint="Static Site Cons"
    note="When choosing a static site generator, weigh these factors based on your project needs."
>}}

Example 4: Comparison with Vertical Layout

For sequential or chronological content:

{{< split-article 
    left="### Phase 1: Research\nAt this stage, we gather requirements, analyze the market, and identify key user needs." 
    right="### Phase 2: Design\nCreate wireframes, mockups, and prototypes based on the research findings."
    leftPoint="Initial Phase" 
    rightPoint="Second Phase"
    note="A thorough research phase leads to more effective design solutions."
    direction="vertical"
>}}

Example 5: Translation Example

Useful for multilingual content presentation:

{{< split-article 
    left="### English\nWelcome to our website. We're glad you're here! Please explore our services and contact us if you have any questions." 
    right="### Español\n¡Bienvenido a nuestro sitio web. ¡Nos alegra que estés aquí! Explore nuestros servicios y contáctenos si tiene alguna pregunta."
    leftPoint="English" 
    rightPoint="Spanish"
    note="Providing multilingual content improves accessibility and expands your audience."
>}}

Example 6: Different Implementations

Compare alternative approaches:

{{< split-article 
    left="### Function-Based\n```javascript\nfunction calculateTotal(items) {\n  return items.reduce((sum, item) => sum + item.price, 0);\n}\n```" 
    right="### Class-Based\n```javascript\nclass Cart {\n  constructor(items) {\n    this.items = items;\n  }\n  \n  calculateTotal() {\n    return this.items.reduce((sum, item) => sum + item.price, 0);\n  }\n}\n```"
    leftPoint="Functional approach" 
    rightPoint="Object-oriented approach"
    note="Both approaches are valid but suit different programming paradigms."
>}}

Using the Examples

To use these examples in your own content:

1. Copy the shortcode section you want to use
2. Remove the triple backticks and shortcode escaping markers ({{< and >}})
3. Paste it into your Markdown file
4. Customize the content to match your needs

Remember that when including code blocks within the shortcode parameters, you need to escape any special characters (especially quotes) and use \n for line breaks.