当前位置: 首页 > 中文手册 > DIY代码编辑器使用帮助

DIY代码编辑器使用帮助

编辑器介绍

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

18 1
我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1CodePlayer技术交流群1

帮朋友打一个硬广告:

P2P网贷系统(Java版本) 新年低价大促销,多年P2P技术积累,系统功能完善(可按需定制,可支持第三方存管、银行存管),架构稳定灵活、性能优异、二次开发快速简单。 另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。

外行看热闹,内行看门道。可以自信地认为,在系统设计上,比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构,货比三家,再决定是否购买。

也可推荐他人购买,一旦完全成交,推荐人可获得实际售价 10% 的返现。
有意向者,详情请 点击这里 联系,工作时间立即回复。