codemirror

SwitchHosts 简介 SwitchHosts 是一个用于快速切换 hosts 的开源免费的小工具，基于 Electron 开发，同时使用了 React、Ant Design 以及 CodeMirror 等框架/库，支持跨平台(Windows、Linux、Mac); 我最初使用 SwitchHosts 是在很多年前的 Windows 平台下，那个时候 SwitchHosts 是基于 Python 写的，界面比较丑，好在使用方便，丑点也无所谓；经历几年的发展， SwitchHosts 变得越来越好看，功能也丰富了不少： gitHub 开源地址 gitHub 下载地址 百度网盘下载地址 SwitchHosts 主要功能： 快速切换 hosts hosts 文件语法高亮 远程 hosts 方案 图标快速切换 Linux 下 SwitchHosts 安装使用 Windows 平台和 Mac 平台都能傻瓜式安装使用，使用也没多大的难处。这里主要说一下Ubuntu下使用 SwitchHosts 的安装配置： 解压并移动到自己指定的目录下： unzip SwitchHosts-linux-x64_v3.3.9.5343.zip mv SwitchHosts!-linux-x64 ~/software/switchHosts 进入目录，执行 SwitchHosts 启动命令即可启动: cd

年底了，总结下今年用到的一些有意思的《js轮子》（只是大概列出些比较有意思的库，每个标题都是超链接，可点击自行查阅） 希望能对您有用！ 如有意思的 轮子 可以在评论列出一起讨论下 color ==功能==：JavaScript库，用于不可变的颜色转换和对CSS颜色字符串的支持。 npm install color var color = Color('#7743CE').alpha(0.5).lighten(0.5); console.log(color.hsl().string()); // 'hsla(262, 59%, 81%, 0.5)' console.log(color.cmyk().round().array()); // [ 16, 25, 0, 8, 0.5 ] console.log(color.ansi256().object()); // { ansi256: 183, alpha: 0.5 } uuidjs ==功能==：UUID.js-JavaScript的RFC兼容UUID生成器 // Create a version 4 (random number-based) UUID object var objV4 = UUID.genV4(); // Create a version 1 (time-based) UUID object var objV1

“ 你也许不了解electron，但你应该了解或使用过atom、vscode、xmin zend，没错他们所使用的开发技术就是electon，通过前端技术开发桌面应用程序，刚开始接触electron时，考虑最多的是性能问题，不过作为一个vscode、xmin zen重度使用者的我来说，基本上对其性能的担心减少了很多，并且发现了基于vue框架构造electron应用程序的样板代码框架，更加方便了前段开发者，集成elementui进行布局以及使用现成的组件，减少了开发者编写css样式和js，提高了开发效率。相对于使用c#，c++开发桌面应用程序，electron具有学习成本低，页面效果好的特点，朋友们，感觉动手吧，开发一个属于自己的桌面应用程序。关注微信公众号【菜鸟阿都】并回复：electron,可获得源码。 ” electron官网： http://www.electronjs.org/ 使用javascript，html，css构建跨平台的桌面应用程序 electron_vue官网链接： https://simulatedgreg.gitbooks.io/electron-vue/content/cn/ 作为一个半吊子前端程序的后端程序员的我来说，那还不赶快试一下，于是动手开发了一个数据库管理软件。 实现的功能： 对数据库连接信息进行缓存 通过点击左侧数据表，右侧会展示表数据

codemirror是目前最流行的在线编辑器插件，本文主要是罗列codemirror提供的所有主题效果，如果你需要使用codemirror制作一个在线编辑器，可以参考本文选择一个喜欢的主题。 本文使用的目标对象是vue，其他语言或框架也是类似的。为了减小纵向篇幅，这里使用了三个codemirror，分别展示template、script和style的效果。 1. 3024-day 2. 3024-night 3. abcdef 4. ambiance-mobile 5. ambiance 6. ayu-dark 7. ayu-mirage 8. base16-dark 9. base16-light 10. bespin 11. blackboard 12. cobalt 13. colorforth 14. darcula 15. dracula 16. duotone-dark 17. duotone-light 18. eclipse 19. elegant 20. erlang-dark 21. gruvbox-dark 22. hopscotch 23. icecoder 24. idea 25. isotope 26. lesser-dark 27. liquibyte 28. lucario 29. material-darker 30. material-ocean

这是我自己做的一个左边点击对应的标题，右边显示相应代码的一个功能。代码显示这里用的是vue-codemirror插件。 第一种用法： 1、安装：npm install vue-codemirror --save 2、在main.js中引入 import VueCodeMirror from 'vue-codemirror' import 'codemirror/lib/codemirror.css' Vue.use(VueCodeMirror) 3、在组件中使用 import { codemirror } from 'vue-codemirror' import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！ require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！ 在组件中声明： components:{ codemirror }, html代码写法： <codemirror ref="mycode" :value="curCode" :options="cmOptions" class="code"> </codemirror> data中cmOptions的配置

2017年的时候用过codemirror,当时用的是jQuery库、codemirror、beautify插件。主要实现代码的编辑功能、插入一些变量功能、beautify插件主要用来格式化代码，实现代码美化效果。不过这两年做项目都是用vue了，需要用到代码编辑器，于是我又找到了代码编辑器vue-codemirror，感觉组件再变，其原理、底层还是没多大变化，用vu e-codemirror,codemirror的方法，配置参数都是通用的，今天我就来分享一下我今天研究的vue-codemirror用法及一些坑的填法。我需要声明一点是我们项目用到的是框架ant-design-vue,所以弹窗我也直接拿来用了，有不懂的童鞋，可以参考 www.antdv.com/components/… 。 1. 需要实现codemirror编辑器功能，主要是json数据的编辑 codemirror基本的编辑代码功能 插入变量功能 codemirror验证功能：主要验证代码格式，语法等，给出相应的提示 代码格式化（由于主要是json数据，所以暂时没引用其他组件，如果需要建议引用 js-beautify ，因为查资料发现codemirror在新的版本中已经去掉autoFormatRange方法） 大致如下图： 2. 写功能前需要安装的一些组件及用法简单说明，vue的就不说了，就光说这个编辑器需要的 2.1