Highlight-treeview.js

Treeview syntax highlighting based on highlight.js. Demo

How it works

There are a few different directory tree structures automatically generated by OSs such as windows and linux(-based) systems using both ASCII and extended characters. With that in mind, highlight-treeview.js provides one class including language definition: treeview to handle specified workdir trees.

Using the highlight-treeview is simple. After linking the library along with one of the styles highlight.js provides, we just add treeview.css and highlight-treeview.pack.js as follows:

<link rel="stylesheet" href="/path/to/styles/default.css">
<link rel="stylesheet" href="/path/to/styles/treeview.css">
<script src="/path/to/highlight.pack.js"></script>
<script src="/path/to/highlight-treeview.pack.js"></script>

And then we call initHighlightingOnLoad (See more about how it works in the Getting Started section):

...
<script>hljs.initHighlightingOnLoad();</script>

Examples

This section shows the following four trees along with their new highlighted views.

Example 1 (Extended Characters - Linux):

<pre><code class="treeview">root
├── photos
|   ├── camp.gif
|   ├── festival.png
|   └── balloon.jpg
├── videos
|   ├── car-video.avi
|   ├── dance.mp4
|   ├── dance01.mpg
|   └── another video.divx
├── documents
|   ├── jsfile.js
|   ├── powerpoint.ppt
|   ├── chapter-01.asc
|   ├── archive-db.zip
|   └── configuration.conf
└── etc.
</code></pre>

Result (example 1):

Example 2 (ASCII - Linux):

<pre><code class="treeview">root
|-- photos
|   |-- camp.gif
|   |-- festival.png
|   `-- balloon.jpg
|-- videos
|   |-- car-video.avi
|   |-- dance.mp4
|   |-- dance01.mpg
|   |-- another video.divx
|   `-- school videos
|       `-- firstday.flv
|-- documents
|   |-- jsfile.js
|   |-- powerpoint.ppt
|   |-- chapter-01.asc
|   |-- archive-db.zip
|   |-- .gitignore
|   |-- README
|   `-- configuration.conf
`-- etc.
</code></pre>

Result (example 2):

Example 3 (ASCII - Windows):

<pre><code class="treeview">root
+---photos
|       camp.gif
|       festival.png
|       balloon.jpg
+---videos
|   |   car-video.avi
|   |   dance.mp4
|   |   dance01.mpg
|   |   another video.divx
|   \---school.videos
|           firstday.flv
+---documents
|       jsfile.js
|       powerpoint.ppt
|       chapter-01.asc
|       archive-db.zip
|       configuration.conf
|       README
\---etc.
</code></pre>

Result (example 3):

Example 4 (Extended Characters - Windows):

<pre><code class="treeview">root
├───photos
│       camp.gif
│       festival.png
│       balloon.jpg
├───videos
│   │   car-video.avi
│   │   dance.mp4
│   │   dance01.mpg
│   │   another video.divx
│   └───school videos
│           firstday.flv
├───documents
│       jsfile.js
│       powerpoint.ppt
│       chapter-01.asc
│       archive-db.zip
│       configuration.conf
└───etc.
</code></pre>

Result (example 4):