阿超 > codeFlask

codeFlask

2021-12-23

前端

猝然死去本无甚苦痛，长期累死倒真难以忍受。——佚名

codeFlask是一个在线代码编辑器：

image-20211223220912373
官方文档：https://kazzkiq.github.io/CodeFlask/

github：https://github.com/kazzkiq/CodeFlask

代码也很简单：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="https://unpkg.com/codeflask/build/codeflask.min.js"></script>
	</head>
	<body>
		<div id="editor"></div>
		<script type="application/javascript">
			const editorElem = document.getElementById('editor');
			const flask = new CodeFlask(editorElem, {
				language: 'js',
				lineNumbers: true,
				styleParent: this.shadowRoot
			});
			flask.addLanguage('JavaScript', Prism.languages['JavaScript']);
			flask.onUpdate((code) => {
				// do something with code here.
				// this will trigger whenever the code
				// in the editor changes.
				console.log(code)
			});
			// flask.updateCode('哈哈');
			// This will also trigger .onUpdate()
			flask.updateCode(`<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
	<page>
	</page>
</html>`);

			const currentCode = flask.getCode();
			console.log({
				currentCode
			})
		</script>
	</body>
</html>

这里page本来应该是body，但由于HbuilderX自带的LiveReload会把我的</body>替换掉，所以我就换成page了，如果不是用HbuilderX运行自动刷新，则不用担心这个问题