原生js手撸乞丐版 vs code

请添加图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>手搓vs code</title>
		<link rel="stylesheet"
			href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css" />
		<style>
			body {
				margin: 0;
			}

			.editer {
				display: flex;
			}

			.directory {
				width: 300px;
				height: 100vh;
				overflow: auto;
				background-color: #252424;
				color: #ffffff;
			}

			.directory .open-btn {
				width: 100%;
				height: 36px;
			}

			.directory .files div {
				margin: 10px 25px;
			}

			.directory .files details {
				margin: 10px 5px;
			}

			.content {
				margin: 0;
				width: -webkit-fill-available;
				height: 100vh;
				overflow: auto;
				background-color: #313131;
			}

			.content .code {
				margin: 0;
				/* width: 100%; */
				/* height: 100%; */
				padding: 0;
				overflow: auto;
				border: none;
				background-color: #313131;
				color: #ffffff;
			}
		</style>
	</head>
	<body>
		<div class="editer">
			<div class="directory">
				<button class="open-btn" onclick="selectedFile()">打开</button>
				<div class="files"></div>
			</div>
			<pre class="content">
				<code class="code language-javaScript"></code>
			</pre>
		</div>



		<script>
			async function selectedFile() {
				try {
					const directories = await showDirectoryPicker()
					// console.log(directories);
					const files = await handleDirectory(directories)
					// console.log(files);

					const filesDOM = document.querySelector(".files");
					renderDirectoryTag(files, filesDOM)
				} catch (e) {
					console.log("您拒绝了访问目录, 授权打开目录才能导入文件");
				}
			};

			// 处理目录资源
			async function handleDirectory(data) {
				// 直接返回句柄
				if (data.kind === "file") {
					return data;
				}
				// 递归处理
				data.children = [];
				for await (const iterator of data.entries()) {
					// console.log(iterator);
					data.children.push(await handleDirectory(iterator[1]))
				}
				return data;
			};

			// 渲染 html
			function renderDirectoryTag(files, filesDOM) {
				// console.log(files, filesDOM);
				for (const index in files.children) {
					const file = files.children[index];
					// console.log(index, file);
					let details;
					if (file.children?.length > 0) {
						details = document.createElement("details")
						details.innerHTML = `<summary>${file.name}</summary>`;
						filesDOM.appendChild(details)
						renderDirectoryTag(file, details)
					} else {
						details = document.createElement("div")
						details.innerHTML = `<span>${file.name}</span>`;
						details.addEventListener('click', ()=>{
							readerFile(file)
						}, true)
					}
					filesDOM.appendChild(details)
				}
			}
			// 读取文件
			async function readerFile(file) {
				// console.log(file);
				const files = await file.getFile()
				// console.log(files);
				const reader = new FileReader();
				reader.readAsText(files, 'utf-8')
				reader.onload = (e) => {
					// console.log(e);
					const codeDOM = document.querySelector(".code");
					codeDOM.innerHTML = e.target.result;
					hljs.highlightBlock();
				}
			}
		</script>

		<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
		<script>
			hljs.highlightAll();
		</script>
	</body>
</html>
javascript
#js #javascript #vs code
原生js手撸乞丐版 vs code
https://github.com/chergn/chergn.github.io/4ff28abca8d5/
作者
全易
发布于
2024年3月28日
许可协议