浏览器1秒变身Python编辑器?!

浏览器不是用来浏览网页、观看网络视频的吗?难道还可以在浏览器里码代码吗?

没错!真的可以。

我们首先来看一下具体的效果。

上面这幅图中,我们发现在浏览器中可以输入Python代码,而且支持语法高亮和自动缩进功能。那么,这究竟是怎么实现的呢?

一开始的功能非常简单,根本没有语法高亮,也没有自动缩进,仅仅是将浏览器变成一个文本编辑器而已。

代码如下:

只需要将上面的代码复制粘贴到浏览器的地址栏,然后按回车,就可以让浏览器变成编辑器。是不是非常简单?

背后的原理并不高深,只是用到了DataURI格式而已。这行代码告诉浏览器渲染一个HTML页面,而这个页面具备一个H5属性:contenteditable。

请想尝试的朋友注意,这行代码只适用于Chrome等现代浏览器。如果你还在使用IE8等过时浏览器的话,是没有效果的。

下面这段代码,可以让编辑器在你一边打字时,一遍切换背景颜色:

笔记本样式下面这段代码可以将浏览器页面变成一个笔记本的样式,看上去很有感觉:

接下来,我们来看怎样将浏览器打造成Python编辑器。只需要在地址栏输入下面的代码即可:

事实上,我们只要简单修改一下上面的代码,就可以马上将浏览器变成其他语言的编辑器,包括Markdown、C/C++、Javscript、Java等几乎所有编程语言。你所要做的,只是将代码中的ace/mode/python,修改成ace/mode/相应的语言(如java)即可。

除了支持多种语言,它还支持更改页面主题!Eclipse、Github、Textmate等众多经典主题,统统支持!只需要将ace/theme/textmate中的textmate替换成你喜欢的主题即可,如monokai。

如果你习惯于用Markdown语法写作,你或许会希望直接在页面中查看渲染后的效果。只需要输入下面这行代码即可:

输入Markdown代码之后,然后按Ctrl+M或Command+M,就可以将代码转换成HTML。

而在前两个例子中,代码中实际用到了一个叫ace.js的文件,不知道大家注意到没有?据小编了解,Ace是一个用JavaScript编写的可嵌入式代码编辑器,据称和Sublime、Vim和TextMate等原生编辑的功能和性能相当。而且,它还可以非常容易滴嵌入到任意网页或JavaScript应用中。

而Ace也是一个叫Cloud9IDE的在线集成开发环境所使用的主要编辑器。具体效果请看下图:

程序员都是爱折腾的物种。有的开发者还是不满足于上面那种手动输入代码、将浏览器变成编辑器的方法,甚至是直接将真正的编辑器搬到了浏览器中运行。这就是我们最后要介绍的SlimText,下面是具体截图。

如截图所示,SlimText是一个真正的浏览器端的代码编辑器,以Chrome插件的形式存在,文件结构、文件搜索、文件保存等功能一应具有。它是一位名叫tylerlong的国人开发的,支持Windows、Linux和MacOSX等多个平台。

THE END
1.Python开发模式探索与实践mb6752706704235的技术博客模块化开发是 Python 社区强烈推荐的一种实践,它通过将代码划分为多个模块(通常是 Python 文件),每个模块负责特定的功能或业务领域,来实现代码的组织和复用。Python 的标准库和第三方库大多采用模块化设计,这使得开发者可以方便地引入和使用现有的功能。 https://blog.51cto.com/u_17177081/12798868
2.新手入门Python必读,拒绝走弯路!对于处理超大文件或数据流等资源密集型任务,生成器可以成为 Python 开发者的得力助手。生成器会根据需求惰性地产生数据,而不是一次性实现所有内容。 当你不需要一开始就获得全部结果集时,“惰性评估”风格非常有用。例如,处理来自百万记录文件的每一行,或读取无限的网络数据流。 https://blog.csdn.net/WANGWUSAN66/article/details/144341616
3.Python课程思维导图模板世界通用Python编辑器 快速执行验证模型 6、课程体系 1、《Python基础语法》 19节 >系统学习Python编写所需语法 >掌握Python结构和编写技巧 >用编程思维解决实际问题 1、我不是萌新 1、课堂教学 1、天下英雄出我辈 print()函数 变量 2、美国队长的洞察计划 https://www.processon.com/view/5e9fe7347d9c0869da9be720
4.Python编程快速上手2在了解程序的工作原理之后,你可以尝试重新创建程序,并按照书中“探索程序”部分给出的建议或自己的想法对程序加以修改。 值得一提的是,书中的大部分项目是用少于256行的代码实现的。无论是古老的数独游戏、元素周期表,还是科技感十足的诱饵标题生成器、DNA可视化,所有小项目都被设计成了独立的 Python 源文件,便于https://www.epubit.com/bookDetails?id=UB7d76c57b46edc
5.多人/终端文件共同编辑器的实现python版本文探讨多人在线文件编辑器的实现,主要借助PyQt5来进行图形化界面实现。借助消息中间件activemq来进行消息的订阅和转发,使用MQTT作为网络协议。 activemq原理:服务器端创建一个唯一订阅号,发送者可以向这个订阅号中发东西,然后接受者(即订阅了这个订阅号的人)都会收到这个订阅号发出来的消息。以此来完成消息的推送。服https://www.jianshu.com/p/6f5ddfd49b7f
6.命令文本编辑器vim工作原理及使用方法介绍Python开发资讯命令文本编辑器vim工作原理及使用方法介绍,vim 是一款功能强大的文本编辑器,其特色是使用命令进行编辑,完全脱离了鼠标的操作,可以对远程服务器的代码直接进行修改,这样操作起来更加快速和方便。 学习目标:能够说出vim的三种工作模式及vim对应复制和粘贴命令。 https://www.boxuegu.com/news/4878.html
7.史上最全计算机类编程资料大集合编译原理 函数式概念 计算机图形学 WEB服务器 版本控制 编辑器 NoSQL PostgreSQL MySQL 管理和监控 项目相关 设计模式 Web 大数据 编程艺术 其他 语言相关类 Android App AWK C/C++ C# Clojure CSS/HTML Dart Elixir Erlang Fortran Go Groovy Haskell IOS Java JavaScript LaTeX LISP Lua OCaml Perl PHP Prologhttps://www.imooc.com/article/30462
8.Python写一个简单的在线编辑器python这篇文章主要介绍了如何利用Python写一个简单的在线编辑器,主要通过pywebio程序,实现了Python的简陋在线编辑器,需要的小伙伴可以参考一下,希望对你有所帮助直接奔入主题看下面pywebio程序,实现了Python的简陋在线编辑器 1 2 3 4 5 6 7 8 9 10 11 from pywebio.input import * from pywebio.output importhttps://www.jb51.net/article/236502.htm
9.python是通用的编辑器,能够将程序编译成二进制代码再运行。刷刷题APP(shuashuati.com)是专业的大学生刷题搜题拍题答疑工具,刷刷题提供python是通用的编辑器,能够将程序编译成二进制代码再运行。A.正确B.错误的答案解析,刷刷题为用户提供专业的考试题库练习。一分钟将考试题Word文档/Excel文档/PDF文档转化为在线题库,制作自己的https://www.shuashuati.com/ti/a38efcabd50444b7b2af700be9b5b229.html
10.面向初学者的Python编辑器Mu面向初学者的Python编辑器Mu 评分: 今天小编就为大家分享一篇关于一个面向初学者的Python编辑器Mu,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧 python 编辑器 python mu 2020-09-20 上传 大小:272KB https://www.iteye.com/resource/weixin_38745003-12866781
11.python在线编辑器w3cschool此外,编辑器还提供了丰富的代码补全和自动缩进功能,大大减少了编码的时间和精力消耗。您只需专注于代码逻辑和实现,编辑器会为您处理繁琐的格式问题。 2. 多样化的代码演示功能 除了基本的代码编辑功能外,w3cschool的Python在线编辑器还提供了各种代码演示功能,帮助您更好地理解和学习Python。您可以通过点击运行按钮,立即https://www.python51.com/jc/122420.html
12.那些年我在CSDN追过的安全白帽大佬,respect【北京12.5号】无线前沿新技术与测试技术峰会一款可用于各种设计电路中的精密双向电流感应放大器 2019年7月,我来到了一个陌生的专业——网络空间安全专业。作为一个长期以Python数据挖掘和NLP方向为主的学生,突然换大方向,去从事系统安全和逆向分析的研究,还是挺难的,这两年的过程也极其艰辛。依稀记得,换专业当天我下https://www.eet-china.com/mp/a169261.html
13.推荐10款实用且颜值高的在线代码编辑器腾讯云开发者社区4、C语言在线运行 C语言在线运行是一款在线C语言代码编辑器,通过gcc、clang进行编译,速度快,很实用。 在线地址:http://c.jsrun.net/ 5、菜鸟工具 菜鸟工具是基于 Python3.x,可以实现在线编译 Python 代码,当然 Python2、Java、Go、Ruby等语言也支持切换。 https://cloud.tencent.com/developer/article/2356844
14.LINUX高级运维进阶图谱11 VIM编辑器 编辑模式 i当前行 o启一个新行输入 保存欧式,输入:然后wq保存退出,q!是不保存退出 [[ 第一行 ]] 最后一行 G 最后一行 gg 第一行 /word 搜索word这个字符 dd 删除所在行 12 脚本 脚本声明 #!/bin/bash # ! /usr/bin/python https://developer.aliyun.com/article/789803
15.Python2在线工具菜鸟工具该工具基于 Python2.7.x,可以实现在线编译 Python 代码……..https://c.runoob.com/compile/6/
16.Python在线编辑器Python 在线编辑器自动补全 运行Run 点此进入 [在线例程] 使用说明: 目前是测试版本,很多功能还未完善,比如不支持 input、文件读写、网络请求,不能 import 部分模块 “自动补全”可以在你输入 for/if/else/while/def/class 等关键字后使用,自动添加部分代码,并标记出需要补全位置#TODO# 当代码中存在需要补全的https://crossincode.com/oj/wechat/
17.Python在线编辑器xxxxxxxxxx 7 1 importturtle 2 t=turtle.Turtle() 3 t.shape('turtle') 4 t.forward(100) 5 6 print("欢迎,编程大师!") 7 ?x >>CommandLine(SunDec15202414:02:45GMT+0800(ChinaStandardTime) >>> ?https://gotomake.scratch3.fun/python/
18.基于python的计算器系统的设计与实现.docx免费在线预览全文 西南财经大学学士学位毕业论文基于python的计算器系统的设计与实现 Design and Implementation of a Calculator System based on Python 目录 TOC \o 1-3 \h \u 32765 目录 2 6037 摘要 3 20722 关键词 4 20824 第一章 绪论 4 994 1.1 研究背景 4 25990 1.2 研究目的 6 22407 1.3 研究内https://max.book118.com/html/2023/1031/8020023026006002.shtm
19.福昕网站地图福昕PDF编辑器个人版是一款永久免费试用中文版的PDF编辑器,作为专业全能的PDF编辑软件工具,帮您轻松搞定pdf怎么编辑,合并pdf文件,pdf怎么转换成Word,pdf添加水印且保护PDF文档安全等各种pdf编辑难题,简单好用易上手的PDF编辑器软件是学习和办公首选.https://www.foxitsoftware.cn/pdfbianji/sitemap.html