This highlight.js extensions renders filetrees instead of code. Input formats are:
npm install highlightjs-treeviewThis highlight.js extensions renders filetrees instead of code. Input formats are:
* AsciiTree
* Tabs-based indented trees
* Hash-based indented trees
This extenions uses by default the material-icons-theme by PKief that can also be used in VSCode.
* Displayes icons of folders, files and dotfiles by their type or name
* Provides highlight.js css and js files
* default theme (which provides a predefined set of icon mappings)
* minimal theme (only basic file and folder icons)
* CSS files contains all icons as base64 encoded data-urls
* Create your own theme by using a configurable generator to create your own css file and highligh.js language definition.
``javascript
var hljs = require('highlight.js/lib/core')
hljs.registerLanguage('treeview', require('highlightjs-treeview/dist/js/treeview-default'))
// or
hljs.registerLanguage('treeview', require('highlightjs-treeview/dist/js/treeview-minimal'))
`
Simply include the css file into you CSS file.
`css
@import "highlightjs-treeview/dist/css/treeview-default.css";
/ or /
@import "highlightjs-treeview/dist/css/treeview-minimal.css";
`
This package comes with a generator that can be used to create your own theme.
`javascript
const treeViewerAssetsGenerator = require('highlightjs-treeview/generator')
treeViewerAssetsGenerator.generateTreeViewAssets({
outputCSS: ${src}/css/vendor/treeview.css, // required${src}/js/vendor/treeview.js
outputJS: , // required${src}/img/treeview/
outputImagesDir: , // optional`
config: {
configName: 'default', // required
},
})
You can define
Default Theme Configuration:
`json`
{
"options": {
"showFolderExpanded": true,
"inheritFileNames": false,
"inheritFolderNames": false,
"inheritFileExtensions": false
},
"defaults": {
"file": "file",
"folder": "folder",
"folderExpanded": "folder-open"
},
"fileNames": {
".editorconfig": "editorconfig",
".eslintrc": "eslint",
".gitignore": "git",
".gitlab-ci.yml": "gitlab",
".nvmrc": "nodejs",
".stylelintrc": "stylelint",
"bun.lockb": "bun",
"LICENSE.md": "certificate",
"LICENSE": "certificate",
"package-lock.json": "nodejs",
"package.json": "nodejs"
},
"fileExtensions": {
"ad": "asciidoc",
"adoc": "asciidoc",
"cjs": "javascript",
"css": "css",
"hbs": "handlebars",
"js": "javascript",
"json": "json",
"jsx": "javascript",
"md": "markdown",
"mjs": "javascript",
"svg": "svg",
"yml": "yaml"
},
"folderNames": {
".vscode": "folder-vscode-open",
"css": "folder-css-open",
"dist": "folder-dist-open",
"docs": "folder-docs-open",
"helpers": "folder-helper-open",
"images": "folder-images-open",
"img": "folder-images-open",
"js": "folder-javascript-open",
"layout": "folder-layout-open",
"layouts": "folder-layout-open",
"lib": "folder-lib-open",
"partials": "folder-include-open",
"vendor": "folder-lib-open"
}
}
Minimal Configuration:
`json`
{
"options": {
"showFolderExpanded": true,
"inheritFileNames": false,
"inheritFolderNames": false,
"inheritFileExtensions": false
},
"defaults": {
"file": "file",
"folder": "folder",
"folderExpanded": "folder-open"
},
"fileNames": {},
"fileExtensions": {},
"folderNames": {}
}
You can customize the treeview by using the generator and integrate it into your build pipeline.
* Create your own gulp task that generates the assets
* Generate directly into your css and js folder
`javascript
'use strict'
const treeViewerAssetsGenerator = require('highlightjs-treeview/generator')
module.exports = (src) => (done) => generateTreeViewAssets(src).then(done)
async function generateTreeViewAssets (src) {
try {
return treeViewerAssetsGenerator.generateTreeViewAssets({
outputCSS: ${src}/css/vendor/treeview.css,${src}/js/vendor/treeview.js
outputJS: ,${src}/img/treeview/
outputImagesDir: ,`
config: {
configName: 'default',
},
})
} catch (error) {
console.error('Error in generateTreeViewAssets:', error)
}
}
Add this line to src/js/vendor/highlightjs.bundle.js
`javascript
// add generated treeview language
hljs.registerLanguage('treeview', require('./treeview'))
// or use predefined
hljs.registerLanguage('treeview', require('highlightjs-treeview/dist/js/treeview-default'))
/ or /
hljs.registerLanguage('treeview', require('highlightjs-treeview/dist/js/treeview-minimal'))
`
Add this line to src/css/site.css
`css
/ use generated css /
@import "vendor/treeview.css";
/ or used predefined /
@import "highlightjs-treeview/dist/css/treeview-default.css";
/ or /
@import "highlightjs-treeview/dist/css/treeview-minimal.css";
``
Icons are extracted from the material-icons-theme.
A great source for icons for folders and files.