We've all been there. You're writing an article, and there's some super-whammo-dyne CSS or JS you want to add to the article, but TinyMCE ain't having it (I live in Texas, where that's proper English). So you jump through a billion hoops to install another plugin to let you do something that seems like it should be trivial like add a JS or CSS to a particular article. You don't need it for the whole site, just that one page - but making that happen is like pulling teeth!
Fields - XMLForm to the Rescue
Over the years I've come up with a dozen different ways to do this. System - Head Tag is probably the most elaborate one I created, but there are many others - like Sourcerer. Tools that achieve this very specific goal, in extremely cumbersome ways. I'll admit - Head Tag is kind of weird to use - not particularly friendly to those who aren't developers.
I created 2 XMLForm packages to accommodate this very simple request, and I use them all the time myself.
Where do I use it? Well, anywhere you see highlighted code. I'm including HighlightJS scripts and CSS to do that. It's 2 JS files and 1 CSS file. The 2nd JS is a simple domcontentloaded script to kick off the party.
JavaScript XMLForm
It simply creates a field where you can enter a path to your javascript file to be included in the article (wherever you can use custom fields). Need to add more than one? Set the XMLForm Multiple field to "true" and you're all set.
StyleSheet XMLForm
It's the same as the javascript field - exactly the same. Path to your CSS, more than one set Multiple to true. It couldn't be any easier.
For the Visual Learners
When creating your CSS/JS fields, just set the correct path to the javascript and/or stylesheet XML files, set Load Template to True, and decide if you want multiple. If you set Multiple to true, be sure to set the max number of items. I always set it to 99 and forget it.
