Directory structure highlighting

[kbjr]

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]

I actually just had a thought, this could also be expanded to do things like highlight names of different types of files (such as directories, as opposed to regular files).

[LeaVerou]

Hi there!

I think this is not very useful as it is, but it could be turned into something very useful if you are willing to work more on it. For example, you could add icons for file types (with a CSS ::before pseudo), convert the dashes into lines etc. Then it could be used to make really pretty dir listings!

[kbjr]

That is kind of what I was implying by my comment, that it could be expanded on to be more useful. As I said, I wrote threw this together because I am trying to implement directory listings like this in a project I'm working on; I will likely keep expanding on it as I work on my project, and I will keep you informed.

[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]

The thread is a year old, but I found it funny, so I followed kbjr's path and did this : https://github.com/Golmote/prism-treeview

(I don't think this should be included in Prism, but it was fun to do)

[mAAdhaTTah]

@Golmote That's neat. How do you generate the dir structure text? Does treework?

[uranusjr]

I think you may need to specify ASCII encoding to get the syntax (tree --charset=ascii). Wish this would work with UTF-8 box-drawing characters (─│└├) too. This looks awesome.

[Golmote]

@mAAdhaTTah Actually, I just followed the syntax given by kbjr in his first comment. ^^ But if there is something official, I'd be glad to add support for it.
EDIT : After a quick research, yes, it looks like the syntax used by tree (http://mama.indstate.edu/users/ice/tree/), except for the [dir] part I added to make the distinction between files and folders...

@uranusjr Sounds fun, I'll see what I can do. :)
EDIT : Now it does.

[kbjr]

... nice ... :)

[uranusjr]

(Edit) I saw that this is added already. You rock! 👍

[mAAdhaTTah]

Does your version require the [dir] part or can we rely on tree entirely? I might include this in a project I'm working on, as it could be really useful for writing tutorials.

[Golmote]

Currently it requires the [dir] part to display the icon of a folder. Without it, the entry will be considered to be a file.

This is needed to make the distinction between an empty folder and a file without known extension.

As far as I can tell, tree only makes the color different for folders. There is no symbol I could rely on...

[kbjr]

Actually, the -F flag will cause tree to output symbols based on file type

From the man page:

-F
Append a '/' for directories, a '=' for socket files, a '*' for executable files and a '|' for FIFO's, as per ls -F

[Golmote]

Seems good to me. Now it will identify directories based on the trailing slash. The other chars appended by -F are stripped.

[loganfranken]

This is awesome @kbjr and @Golmote!

It doesn't look like there are plans to bring this into the core Prism, right? If not, we could probably close this issue,

[Golmote]

You're right.

[muescha]

is there any reason why it is not in core? i think it's a very common need to show file structures in code blocks

[LeaVerou]

Hi @muescha,
We generally try to keep the core very small. Is there a reason you need this in the core? With the bundler on the website, there isn't really much difference.

[Golmote]

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