您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2014年09月12日 09:19

原创 DIY代码编辑器使用帮助

62 次浏览 读完需要≈ 10 分钟

内容目录

编辑器介绍

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+/,即可看到如下自动补全提示信息。

codemirror-editor-usage-demo.png

更多细节体验

此外,编辑器还做了许多友好体验的操作。

括号配对

如下图所示,将光标位于括号(大括号、中括号、小括号均可)旁边时,编辑器会自动标注匹配的另一半括号。

自动关闭符号

当输入一个括号或引号的开始部分时,编辑器会自动补全符号的结束部分,并将光标放在符号中,以便于快速输入。

codemirror-editor-usage-demo1.png

伸缩代码

同样如上图所示,点击行号旁边的三角,可以展开或收缩对应的代码块。

高亮显示当前行

如上图所示,编辑器会高亮显示光标所在行(浅蓝色背景)。

自动关闭标签

当输入一个html标签的开始标记时,编辑器会自动补全标签的结束标记。并将光标放在标签主体中,以便于用户快速输入。

codemirror-editor-usage-demo2.png

  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论