如何在Prism.js中正确渲染目录结构(树形视图) _树形视图

本文概述

1.下载棱镜树视图
2.准备标记
获取目录树结构

< !-- 1. Include Prism.js library --> < script src="http://www.srcmini.com/prism.js"> < /script> < link href="http://www.srcmini.com/prism.css" rel="stylesheet" type="text/css"> < !-- 2. Include Prism Treeview Plugin --> < script src="http://www.srcmini.com/prism-treeview.js"> < /script> < link href="http://www.srcmini.com/prism-treeview.css" rel="stylesheet" type="text/css">

有关此插件的更多信息, 请不要忘记在此处访问Github上的官方存储库。
2.准备标记与Prism上的每个代码段一样, 代码需要用pre元素内的HTML实体进行包装和编码, 该pre元素还包含带有类language的代码节点-和后缀, 用于表示内部的代码的编程语言。块。幸运的是, 没有名为treeview的编程语言, 因此可以通过将类定义为language-treeview, 在代码块中简单地启用该插件：

< pre> < code class="language-treeview"> root_folder/|-- a first folder/||-- holidays.mov||-- javascript-file.js|`-- some_picture.jpg|-- documents/||-- spreadsheet.xls||-- manual.pdf||-- document.docx|`-- presentation.ppt|`-- test|-- empty_folder/|-- going deeper/||-- going deeper/||`-- going deeper/||`-- going deeper/||`-- .secret_file||-- style.css|`-- index.html|-- music and movies/||-- great-song.mp3||-- S01E02.new.episode.avi||-- S01E02.new.episode.nfo|`-- track 1.cda|-- .gitignore|-- .htaccess|-- .npmignore|-- archive 1.zip|-- archive 2.tar.gz|-- logo.svg`-- README.md< /code> < /pre>

使用Prism.js渲染标记, 你将在页面上获得以下元素：

文章图片
定制显然取决于你, 可以根据需要修改pyramid-treeview.css文件。在我们的案例中, 我们将该库包含在我们的网站上, 并修改了base64图标的填充：

root_folder/|-- a first folder/||-- holidays.mov||-- javascript-file.js|`-- some_picture.jpg|-- documents/||-- spreadsheet.xls||-- manual.pdf||-- document.docx|`-- presentation.ppt|`-- test|-- empty_folder/|-- going deeper/||-- going deeper/||`-- going deeper/||`-- going deeper/||`-- .secret_file||-- style.css|`-- index.html|-- music and movies/||-- great-song.mp3||-- S01E02.new.episode.avi||-- S01E02.new.episode.nfo|`-- track 1.cda|-- .gitignore|-- .htaccess|-- .npmignore|-- archive 1.zip|-- archive 2.tar.gz|-- logo.svg`-- README.md

你也可以使用以下方框图字符来表示树：─│└├

< pre> < code class="language-treeview"> root_folder/├── a first folder/|├── holidays.mov|├── javascript-file.js|└── some_picture.jpg├── documents/|├── spreadsheet.xls|├── manual.pdf|├── document.docx|└── presentation.ppt└── etc.< /code> < /pre>

获取目录树结构通常, 我们懒得手动编写插件所需的结构以表示目录结构。这就是为什么存在tree linux命令(以及在Windows中)的原因。只要你位于目录内, 就可以打印当前所在目录的结构。在Windows中将是：