内容目录
编辑器介绍
DIY：在线代码编辑器目前支持以下代码类型：
默认(HTML/CSS/JS)
此时有四个主要的窗口，它们分别是：HTML(左上)、JS(左下)、CSS(右上)、预览窗口(右下)。
请直接编写HTML、CSS、JS代码的正文内容，无需写<html>、<style>、<script>等标签，编辑器会在运行代码时自动加上。HTML请直接写<body>标签内的代码内容，编辑器会自动添加外部的内容。
HTML混合(单页)
只留一个编辑窗口，用于混合编写HTML、CSS、JS代码，编辑器不会添加任何额外的代码(通过左侧面板引入的CSS或JS文件除外)。左侧为编辑窗口，右侧为预览窗口。
PHP
用于编辑PHP代码。
Java
用于编辑Java代码。
C#
用于编辑C#代码。
C++
用于编辑C++代码。
C
用于编辑C语言代码。
SQL
用于编辑SQL代码。
以后可能会增加更多其他语言的代码。
快捷键
以下为DIY代码编辑器的主要快捷键设置：
| 快捷键 | 功能描述 |
|---|---|
| Alt + / | 自动补全代码(自动提示)，支持HTML、CSS、JS、SQL。 |
| F11 | 全屏显示当前光标所在的编辑器，再次按键可取消全屏。 |
| Esc | 取消全屏显示。 |
| Ctrl + Z | 撤销上次操作。 |
| Alt + Y | 重做(恢复)上次撤销的操作。 |
| Ctrl + J | 跳转到匹配的另一半标签，并高亮选中。 |
| Ctrl + Shift + / | 为选中代码添加多行注释(支持HTML、CSS、JS)。 |
| Ctrl + Shift + \ | 为选中代码取消多行注释。 |
| Ctrl + Shift + F | 格式化选中的代码。如果未选中，格式化所有代码。 |
| Shift + Tab | 自动缩进排版选中的代码 |
| Tab | 插入一个缩进(制表符"\t") |
| Ctrl + 上 | 移动光标到代码的开头 |
| Ctrl + 下 | 移动光标到代码的末尾 |
| Alt + 左 | 移动光标到当前行开头 |
| Alt + 右 | 移动光标到当前行末尾 |
| Ctrl + 左 | 移动光标到左侧词组前(词组就是由明确的符号间隔开的其中一个文本字符串) |
| Ctrl + 右 | 移动光标到右侧词组后 |
这里以编辑器在JS中的自动补全功能为例，在JS编辑器中输入document后，按下快捷键Alt+/，即可看到如下自动补全提示信息。
更多细节体验
此外，编辑器还做了许多友好体验的操作。
括号配对
如下图所示，将光标位于括号(大括号、中括号、小括号均可)旁边时，编辑器会自动标注匹配的另一半括号。
自动关闭符号
当输入一个括号或引号的开始部分时，编辑器会自动补全符号的结束部分，并将光标放在符号中，以便于快速输入。
伸缩代码
同样如上图所示，点击行号旁边的三角，可以展开或收缩对应的代码块。
高亮显示当前行
如上图所示，编辑器会高亮显示光标所在行(浅蓝色背景)。
自动关闭标签
当输入一个html标签的开始标记时，编辑器会自动补全标签的结束标记。并将光标放在标签主体中，以便于用户快速输入。
0 条评论
撰写评论