codeFlask

阿超

发布于 2022-08-21 10:56:47

2330

发布于 2022-08-21 10:56:47

文章被收录于专栏：快乐阿超快乐阿超

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

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

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

代码也很简单：

<!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运行自动刷新，则不用担心这个问题

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-12-23，如有侵权请联系 cloudcommunity@tencent.com 删除

github