Directory structure highlighting

I created a new syntax file for highlighting plain-text directory structure diagrams, like this:

|-- app
|   |-- controllers
|   |-- models
|   `-- views

It’s extremely simple, just a single small regex to highlight commonly used symbols for this purpose:

Prism.languages.folders = {
    // Just highlight symbols used to denote folder structure
    keyword: /^([-|+`\s]+)/gm
};

Is this something you think others might want? I can give you a pull request very easily if you think so, I just wasn’t sure if anyone other than me cares :p

[kbjr]

A little more mature example, this adds classnames based on file extension, so you can highlight different types of files differently:

Prism.languages.folders = {
    // Highlight symbols used to denote folder structure
    'punctuation': /^([-|+`\s]+)/gm,

    // Highlight the individual file names
    'keyword':  /([a-zA-Z0-9._].+)/g
};

Prism.hooks.add('wrap', function(env) {
    // Add classnames for file extensions
    if (env.language === 'folders' && env.type === 'keyword') {
        var parts = env.content.split('.');
        while (parts.length > 1) {
            parts.shift();
            // Ex. 'foo.min.js' would become '<span class="token keyword ext-min-js ext-js">foo.min.js</span>'
            env.classes.push('ext-' + parts.join('-'));
        }
    }
});

[Golmote]

@LeaVerou He meant why is it an external project. But we now have included this feature as a plugin in #2265! 🎉