markdown-markup-enhancements.source.js

/**
* markdown-markup-enhancements.source.js
* AMD Package Definition
* requires MooTools Core as written
*/
define(function() {
        /**
        * Markdown is easy but limited
        * this function supports the add-on attribute construct: <!--[attribute:value][...]--> and 
        * will be applied to the resulting element accordingly
        * example:
        *    ### <!--[class:centered-text orange-text darken-3]-->my content here
        *    becomes: <h3 class="centered-text orange-text darken-3">my content here</h3>
        *    ![alt text](/path/to/my-img.png "My Title") <!--[class:center-align]-->
        *    becomes: <p class="center-align"><img title="My Title" alt="alt text" src="/path/to/my-img.png"></p>
        *    in this case the construct must come right behind (just after) the img markdown
        */
        var reOutr = /<!--(.*?)-->/, reInnr = /(\[(.*?)\])/g, reTokn = /([^\[].+[^\]])/g;
        
        return {
            apply: function(selector, context) {
                var elems;
                
                if (! selector && ! context) {
                    selector = '.article *:not(div)';
                } else if (! selector) {
                    selector = '*:not(div)';
                }
                
                context = document.getElement(context || 'body');
                
                elems = context ? context.getElements(selector) : $$(selector);
                
                elems && elems.forEach(function(elem) {
                        var innr = elem.innerHTML.match(reOutr);
                        
                        if (innr && innr.length > 1) {
                            var innrs = innr[1].match(reInnr);
                            
                            if (innrs && innrs.length) {
                                for (var token, bits, i=0; i<innrs.length; i++) {
                                    token = innrs[i].match(reTokn);
                                    bits = token[0].split(':');
                                    if (bits[0] == 'tag') {
                                        elem = new Element(bits[0]).replaces(elem);
                                    } else {
                                        elem.set(bits[0], bits[1]);
                                    }
                                }
                            }
                            
                            elem.set('html', elem.innerHTML.replace(reOutr, ''));
                        }
                })
            }
        };
});

Markdown is easy but limited

This function supports the add-on attribute construct: <!--[attribute:value][...]--> and will be applied to the selector'ed element(s) accordingly

example:

<!--[class:centered-text orange-text darken-3]-->my content here
becomes: <h3 class="centered-text orange-text darken-3">my content here</h3>
![alt text](/path/to/my-img.png "My Title") <!--[class:center-align]-->
becomes: <p class="center-align"><img title="My Title" alt="alt text" src="/path/to/my-img.png"></p>
in this case the construct must come right behind (just after) the img markdown