This post demonstrates how to use external JavaScript and CSS files for more complex interactive elements. This approach is better for:

• Reusable components across multiple posts
• Larger, more complex code
• Keeping your markdown files clean and readable
• Better code organization and maintenance

Interactive Chart Example

Below is a bar chart powered by external JavaScript. The chart data is embedded in the HTML element:

How This Works

1. External JavaScript (assets/js/chart-demo.js) contains a reusable SimpleBarChart class
2. External CSS (assets/css/chart-demo.css) styles the chart components
3. Front matter loads these files only for this specific post:

custom_js: ["/assets/js/chart-demo.js"]
custom_css: ["/assets/css/chart-demo.css"]

1. HTML in markdown initializes the chart with data

Dynamic Chart Example

Here’s a chart with interactive controls:

Benefits of External Files

• Reusability: Use the same chart component in multiple posts
• Maintainability: Update the chart library in one place
• Clean Markdown: Keep your content focused on writing
• Performance: Browser can cache the JavaScript/CSS files
• Organization: Separate concerns (content vs. functionality)

Code Structure

assets/
├── js/
│   └── chart-demo.js      # Chart implementation
└── css/
    └── chart-demo.css     # Chart styles

_posts/
└── 2026-02-05-external-js-demo.md  # This post

Now you can create interactive, data-driven visualizations in your blog posts!