首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    微软十大最受欢迎开源软件库,最高Star数量13万

    主要的编程语言:Python (100%) Stars:19.9k Watching:237 Forks:668 描述:Cascadia 是一种有趣的新编码字体,与 Windows Terminal 捆绑在一起...请注意,这个仓库不包含代码编辑器的源代码,它只包含将所有东西打包在一起的脚本,并提供 monaco-editor npm 模块。...仓库地址:monaco-editor(https://github.com/microsoft/monaco-editor) 7:ML-For-Beginners 主要平台:Jupyter Notebook...microsoft/playwright) 5:Web-Dev-For-Beginners 主要编程语言:JavaScript (78.5%) Stars:48.2k Watching:2.4k Forks:7k...Windows Terminal Windows Terminal Preview Windows console host(Windows 控制台主机) 两个项目之间共享的组件 ColorTool 展示如何使用

    2K20

    手把手教你实现在Monaco Editor中使用VSCode主题

    基本使用 先看一下Monaco Editor的基本使用,首先安装: npm install monaco-editor 然后引入: import * as monaco from 'monaco-editor...如果遇到报错或者语法提示不生效,那么可能需要配置一下worker文件的路径,可以参考官方示例browser-esm-webpack。...其实在VSCode里语法高亮使用的是TextMate,而在Monaco Editor里使用的是Monarch,两者压根不是一个东西,为什么Monaco Editor不使用TextMate,而是要开发一个新的东西呢...,因为所有内置语言都被去除了嘛,比如我们要使用js语言的话: monaco.languages.register({id: 'javascript'}) 这种方法虽然可以完美解决该问题,但是很大的一个副作用是语法提示不生效了...,效果如下: 最佳实践 VSCode主题除了代码主题外,一般还包含编辑器其他部分的主题,比如标题栏、状态栏、侧边栏、按钮等等,所以我们也可以在页面应用这些样式,达到整个页面的主题也能随编辑器代码主题一起切换的效果

    4.1K41

    一文打透前端研发需要了解的DSL

    甚至流行的前端框架,如 React、Vue、Angular 等,也可以看作是一种 DSL,它们都是用来构建 Web 应用的框架,它们的语法和语义都是针对 Web 应用的。...实际案例在实际的研发中,我们会在特定的领域遇到一些特定的问题,如果使用通用编程语言来解决这些问题,可能会比较繁琐。这时,我们可以使用 DSL 来解决这些问题,提高我们的开发效率。...你可以通过定义自己的语言支持来让 Monaco Editor 支持你的 DSL。以下是一个如何使用 Monaco Editor 来实现自定义语言支持的基本步骤:1....例如:monaco.languages.register({ id: "ct" });monaco.languages.setMonarchTokensProvider("ct", myDSL);monaco.editor.defineTheme... "ct",  theme: "ctTheme",});以上只是实现语法高亮的基本步骤,如果你还想实现代码自动补全和代码提示,你可能需要使用 monaco.languages.registerCompletionItemProvider

    4.3K21

    开发一个在线代码对比工具

    Monaco Editor Monaco Editor 是 VS Code 中使用的开源代码编辑器, 拥有代码高亮和代码自动补全的功能,并且内置了一个 Diff Editor。...马上掘金 使用 monaco-editor 创建一个简单的代码编辑器 使用 monaco-editor 创建一个简单的 Diff 编辑器 Monaco Editor 有 2 种加载方式,分别是 amd...马上掘金中使用的是 requirejs。 技术栈选择 我准备把常用的工具做成一个工具网站,所以我选择使用 next.js,并且可以使用 vercel 免费持续部署。...关于 Monaco Editor 在 next.js 中的配置,之前有介绍过,大家可以看这篇文章 《在 Next.js 中使用 Monaco Editor》。...代码对比编辑器 GitHub 代码 以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

    3.3K11

    Microi吾码低代码平台:前端源码的本地运行探索

    WebStorm,用于编写和调试代码 • Git:用于克隆代码库和版本控制,Git 也可以从 Git 官网下载安装 1.3 项目源码依赖 • 项目可能依赖于一些特定版本的库或框架,如 React、Vue、Angular...yarn,执行: yarn config set registry https://registry.npm.taobao.org • 依赖版本问题:有时候,项目依赖的某些包版本与当前环境不兼容。...devServer: { port: 8081, } 5.3 代码更新未生效 当你修改代码后,浏览器中的更新没有即时显示,可以尝试以下方法: • 清空浏览器缓存:浏览器有时会缓存旧的代码,导致新的修改不生效...DevTools)可以帮助你调试组件的状态和生命周期 7.总结 运行界面源码: 运行PC端vue2传统界面源码 在欢迎页打开Microi吾码开源版【/microi.vue2.pc/】文件夹 查看【/microi.vue2...@0.33.0@monaco-editor/esm/vs/basic-languages/_.contribution.js 解决: 将以下5个变量(在30多行代码左右)从LazyLanguageLoader

    27210

    单细胞转录组高级分析一:多样本合并与批次校正

    左边的图简单地把多个单细胞的数据合并在一起,不考虑去除批次效应,样本之间有明显的分离现象。右边的图是使用算法校正批次效应,不同的样本基本融和在一起了。...Seurat整合流程与原理 1、使用CCA分析将两个数据集降维到同一个低维空间,因为CCA降维之后的空间距离不是相似性而是相关性,所以相同类型与状态的细胞可以克服技术偏倚重叠在一起。...右图使用CCA降维,细胞之间的距离体现的是转录特征相关性,因此同类型且同状态的细胞可以跨越技术差异重叠在一起。...p1+p2+ plot_layout(guides = 'collect') ggsave("CellType/tSNE_celltype_Monaco.png", p1, width=7 ,height...=6) ggsave("CellType/UMAP_celltype_Monaco.png", p2, width=7 ,height=6) ggsave("CellType/celltype_Monaco.png

    38.8K2129

    借助 CodeBuddy,我见证了一款在线代码格式化神器的诞生

    我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接:腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴有时候,我们开发者真的需要一个既高颜值又实用的格式化工具来处理...它首先用 Vite 初始化了 Vue3 项目,并立即装好了我提到的 monaco-editor、@monaco-editor/loader 和 prettier。...特别让我印象深刻的是,Editor.vue 中 monaco-editor 的集成写得非常稳,加载逻辑简洁明确,还支持自动语言检测。...而在代码细节方面,它使用了异步 import 方式加载压缩工具,避免影响性能。还在主逻辑中设置了语言判断逻辑,自动调用正确的 prettier parser。...说实话,以往写工具类应用最痛苦的就是处理 UI、性能与功能之间的平衡,但 CodeBuddy 这次的实现让我彻底安心。

    10200

    盘点微软最受欢迎的10个GitHub项目,最高Star数量 13 万

    8:Monaco Editor 主要的编程语言:JavaScript (81.1%) Stars:29.3k Watching:505 Forks:2.8k 描述:Monaco Editor 是直接从...请注意,这个仓库不包含代码编辑器的源代码,它只包含将所有东西打包在一起的脚本,并提供 monaco-editor npm 模块。...5:Web-Dev-For-Beginners 主要编程语言:JavaScript (78.5%) Stars:48.2k Watching:2.4k Forks:7k 描述:微软提供的一个为期 12...Windows Terminal Windows Terminal Preview Windows console host(Windows 控制台主机) 两个项目之间共享的组件 ColorTool 展示如何使用...我们创建了一个高质量的技术交流群,与优秀的人在一起,自己也会优秀起来,赶紧点击加群,享受一起成长的快乐。

    1K30

    VS code 使用的代码编辑器

    前言 有时候我们会有在需要在网页中写代码或者改代码配置的需求,这个时候就需要用到代码编辑器,常规的代码编辑器有 CodeMirror 和 Monaco Editor, CodeMirror 使用的人比较多...Monaco Editor 介绍 Monaco Editor 是 VS code 使用的编辑器,支持丰富的代码格式,拥有良好的可扩展性,支持代码并排对比编辑器,并且友好的支持视觉障碍人士,拥有语音播报功能...editor 附带的所有语言都将包含在内,如果你觉得这样配置麻烦,可以使用 monaco-editor-webpack-plugin,通过只选择特定的语言或者只选择特定的编辑器特性,这样可以用来生成一个更小的编辑器包...在 react 中使用 目前社区已经封装了 @monaco-editor/react, 而且不需要使用 webpack (或 rollup/parcel/etc)配置文件/插件。...以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

    3.1K20

    如何写一个代码编辑器

    关注我公众号,前路漫漫,一起修行! 正题 当我们想做一个事情的时候,往往最难的不是做,而是不知道从哪做起,怎么做?我的每篇文章都会讲我是如何去一点点解决问题的,希望能够尽我的绵薄之力帮助有心之人。...思考,这种编辑器的功能一定是有开源库的,因为好多网站都使用过,那么顺着思路走,找到这个开源库的名字,我们就完成一半了。...接下来你应该知道怎么做了~ 动工 上面讲解的是我如何找工具的方法,我现在使用的不是 CodeMirror,但是我也是通过这种方法找到的。我接下来用 monacoEditor 来讲解我的做法。...加载 monaco 脚本 这是一段加载 monaco 的js。...更大家一起学习。 看别人十遍,不如自己动手写一遍,我的这些源码和文章都在这里,可以自己下载下来运行一下试试。

    1.9K31

    实现一个 Code Pen:(二)在 Next.js 中使用 Monaco Editor

    Monaco Editor 是 VS Code 中使用的开源代码编辑器, 拥有代码高亮和代码自动补全的功能,Monaco Editor 支持的语言有很多,所以使用的时候不需要将全部语言都支持,我们只需要按需加载需要支持的语言就可以了...默认会加载一个 editor.worker.js,这是一个基础功能文件,提供了所有语言通用的功能(例如已定义常量的代码补全提示),无论使用什么语言,monaco 都会去加载它。...我们可以使用 monaco-editor-webpack-plugin, 让 webpack 插件帮我们,自动引入。...关于 Monaco Editor 的配置请参考官网和Github 参考 闲谈 Monaco Editor-基本使用 以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得...,欢迎一起探索前端。

    2.8K20
    领券