首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用 Carbon 来分享高大代码片段

我在推特上关注了很多国外程序员大佬,包括一些著名框架官方团队,比如 Facebook React 开发团队,我经常能看到他们在推特中分享一些代码片段,是以图片方式出现,这些代码图片让我印象很深刻...,我之前也疑惑为什么会有这么高大分享方式,但是没有找到答案,直到今天我在刷 Github 时候,推给我一个热门库,随手点开来看了下,谁晓得无心插柳柳成荫,这样一个生成高大上代码片段第三方库就在我面前了...这是一段 JavaScript 代码,使用 carbon 分享出来一个片段,怎么样,以后是不是把这样代码放在博客或者推特上会很特别,也很美观易读呢?...) 直接在 carbon 编辑器中粘贴代码 定制化 当你把代码导入到 Carbon 后,你可以定制生成代码图片。...安装之后, 用carbon命令在 Carbon 中导入你当前 VS Code 文件 其他编辑器对应插件也可以在 Carbon github 文档中找到哦。

1.6K60
您找到你想要的搜索结果了吗?
是的
没有找到

掘金,5 个 NICE JavaScript 代码片段分享

这是我参与「掘金日新计划 · 8 月更文挑战」第20天,点击查看活动详情 ---- 减轻阅读负担,启发创作心智,轻松学习 JavaScript 技巧,日拱一卒,jym,冲~ 不知道哥几个在码掘金都走起来了没...,本篇带来 5 个 NICE JavaScript 代码片段分享,并附上码掘金地址。...我们最常常用到 document.createElement('div') 然后用 div.innerHTML 赋值可以将 html string 转成 dom;除此之外,还可以通过另外 3 种方式实现同样效果,代码如下...原因是:依西方习惯,每隔三位数加进一个逗号,也就是千位分隔符,以便更加容易认出数值。英语里没有“万”“亿”,只有“百万(million)”“十亿(billion)”,千位分隔符就是这么产生。。。...即:任何类型数据都会被深拷贝~ 看代码: const deepClone = (obj, map = new WeakMap()) => { if (obj instanceof Date) return

32050

一起来写 VS Code 插件:为你团队提供常用代码片段

其实我们可以开发一些常用代码片段(Snippets)供团队内部使用。当输入前缀时候就会触发智能提示。...最近 VS Code 发布了网页版 https://vscode.dev/ 当时上面的 snippets 在网页版中往往不支持,其实是上面的这些插件包含了其他一些非代码提示功能,如果是纯 snippets...开发 接下来就要开发团队内部 VS Code 插件了,打开 VS Code API 官网, 引入我们眼帘是 npm install -g yo generator-code 首先全局安装脚手架,安装完成后...创建代码片段 有一个网站可以帮助我们快速创建 code snippet https://snippet-generator.app/ 左边输入代码,右侧就会生成 snippet 模板,拷贝到项目中...创建 token 成功后你需要本地记下来,因为网站是不会帮你保存!!! 第四步 创建一个发布者 发布者是 visualstudio 代码市场扩展唯一身份标识。

57310

一起来写 VS Code 插件:为你团队提供常用代码片段

其实我们可以开发一些常用代码片段(Snippets)供团队内部使用。当输入前缀时候就会触发智能提示。...最近 VS Code 发布了网页版 https://vscode.dev/ 当时上面的 snippets 在网页版中往往不支持,其实是上面的这些插件包含了其他一些非代码提示功能,如果是纯 snippets...开发 接下来就要开发团队内部 VS Code 插件了,打开 VS Code API 官网, 引入我们眼帘是 npm install -g yo generator-code 首先全局安装脚手架,安装完成后...创建代码片段 有一个网站可以帮助我们快速创建 code snippet https://snippet-generator.app/ [image.png] 左边输入代码,右侧就会生成 snippet...[image.png] 创建 token 成功后你需要本地记下来,因为网站是不会帮你保存!!! 第四步 创建一个发布者 发布者是 visualstudio 代码市场扩展唯一身份标识。

1.1K30

一起来写 VS Code 插件:为你团队提供常用代码片段

其实我们可以开发一些常用代码片段(Snippets)供团队内部使用。当输入前缀时候就会触发智能提示。...最近 VS Code 发布了网页版 https://vscode.dev/ 当时上面的 snippets 在网页版中往往不支持,其实是上面的这些插件包含了其他一些非代码提示功能,如果是纯 snippets...开发 接下来就要开发团队内部 VS Code 插件了,打开 VS Code API 官网, 引入我们眼帘是 npm install -g yo generator-code 首先全局安装脚手架,安装完成后...创建代码片段 有一个网站可以帮助我们快速创建 code snippet https://snippet-generator.app/ 左边输入代码,右侧就会生成 snippet 模板,拷贝到项目中...创建 token 成功后你需要本地记下来,因为网站是不会帮你保存!!! 第四步 创建一个发布者 发布者是 visualstudio 代码市场扩展唯一身份标识。

43220

VS Code 折腾记 - (6) 基本配置快捷键定义代码片段录入(snippet)

前言 本来分成三篇来写,但是想了想没必要,大家都是聪明人。。。简单东西点一下就晓得了。复制代码 ---- 基本配置 ? 这里写图片描述 ?...直接在链接文章内搜索when Clause Contexts ---- 代码片段 进入代码片段自定义有两种方式: 【菜单栏->文件->首选项->用户代码片段】 全局命令【ctrl+shift + p...=> snippet】 VSCODE代码片段支持30多种编程语言,所以也免了代码片命名唯一和全局生效【所有文件】尴尬 这里就选择一个sass说下,内部有这么一段注释嗯 { /*...这里写图片描述 toRem: 只是一个单纯描述 prefix: 是触发snippet简写 body: 是展开代码片段 $1,$2表示占位符,用于用户展开代码片段所需要替换,也可以写成${1:label...}键值对方式 description : 用户你在输出snippet之前,方便自己识别的注释,而不用强行记忆那些简写 ---- 总结 VS Code编辑器项目很活跃,基本一个月到一个半月发布一个版本

77220

分享 16 个常用自定义表单组件样式代码片段

大家好,今天给大家分享 16个常用自定义表单组件样式代码片段上半部分,本文尽量用最简单CSS布局编写,对你有所启发,也许你有其他写法,期待你在评论区分享。...,一般我们需要进行美化,让其更适应当前设计,如下所示: 这里需要结合label 标签使用,将其包含在内,原生复选框默认隐藏,使用 :checked 属性,实现自定义复选框,代码如下(这里只是样式部分...如下图所示: 这里运用了 :not(:placeholder-shown) 两个伪类结合,:placeholder-shown 是专门用于确定元素是否显示占位符对象,示例代码如下,使用纯 CSS...IOS 版本有这样单选按钮组,用来切换和显示页面,示例如下图所示: 这里我们使用 radio 组件实现上述效果,示例代码如下: HTML部分 <div class="stv-radio-buttons-wrapper...,上述大部分组件都用到 :checked 伪类实现了个性化<em>的</em>表单组件,灵活使用,会实现意想不到<em>的</em>效果,下篇文章我将会分享下半部分,希望今天<em>的</em>分享,对你日常<em>的</em>业务有所帮助, 感谢你<em>的</em>阅读。

1.8K50

同一台电脑运行多个tomcat,环境变量以及文件内容更改相关配置(perfect)

1、配置运行tomcat 首先要配置javajdk环境,这个就不在写了 不懂去网上查查,这里主要介绍再jdk环境没配置好情况下 如何配置运行多个tomcat 2、第一个tomcat: 找到"我电脑..." 里面的环境变量 , 添加"CATALINA_HOME"=“E:\apache-tomcat-6.0.29” 这个时候第一个tomcat启动运行是没有问题 3、接着开始配置第二个tomcat: 增加环境变量...CATALINA_HOME2,值为新tomcat地址; 增加环境变量CATALINA_BASE2,值为新tomcat地址; 4、找到第二个tomcat中startup.bat文件,把里面的CATALINA_HOME...添加完之后端口是如下情况: ?...7、启动第二个tomcat,如果上面的配置没问题的话 这个时候是可以运行成功

1.5K31

基础渲染系列(三)多样化表现——组合纹理

编译器检测到重复代码并对其进行了优化。因此纹理仅采样一次。结果存储在寄存器中并重新使用。即使使用中间变量等,编译器也足够聪明,可以检测到此类代码重复。它将所有内容追溯到其原始输入。...OpenGLCore使用两个输出,如你所料,vs_TEXCOORD0和vs_TEXCOORD1。相反,Direct3D 11仅使用单个输出o1。...因此,将逻辑分开信息打包在单个四值输出数据结构中是可行。如果内插最终成为瓶颈的话,则使用较少输出寄存器可能会提高着色器性能。 手动打包输出常见原因是因为只有几个内插器可用。...实际,我们可以使用这些值在两个纹理之间进行线性插值。然后介于0和1之间值表示两个纹理之间混合。这使得平滑过渡成为可能。 这样纹理称为splat贴图。就像你将多个地形要素溅撒到画布一样。...(没有额外平铺和偏移控件) 现在,我们必须将采样器变量添加到我们着色器代码中。但是不必添加它们相应_ST变量。 ?

2.6K10

10 个你可能还不知道 VS Code 使用技巧

经常帮一些同学 One-on-One 地解决问题,在看部分同学使用 VS Code 时候,有些蹩脚,实际一些有用技巧能够提高我们日常工作效率。...NO.1 一、重构代码 VS Code 提供了一些快速重构代码操作,例如: 将一整段代码提取为函数:选择要提取代码片段,然后单击做成槽中灯泡查看可用重构操作。...代码片段可以被提取到一个新方法中,或者在不同范围内(当前闭包、当前函数内、当前类中、当前文件内)提取到一个新函数中。在提取重构期间,VS Code 会引导为该函数进行命名。 ?...转换导出方式:export const name 或者 export default。 ? 合并参数:将函数多个参数合并为单个对象参数: ?...用得多了经常会打开多个终端,这时候给终端命名可以提高终端定位效率。 ?

88110

我整理了这43个VS Code插件,Bug输出更快了

工作之余,我整理了这 40 多个 VS Code 插件,其中有一部分已经内置了,但不知道他们是用来干啥。...JetBrains IDE Keymap 用于 VS Code JetBrains IDE 键盘快捷键映射。 json2ts 将剪贴板中 JSON 转换为 TypeScript 接口。...Quokka.js Quokka 是一个调试工具,可以为您正在编写代码提供实时反馈。它能够预览变量函数和计算值结果。该扩展易于配置,对于使用 JSX 或 TypeScript 项目可直接使用。...TODO Highlight 突出显示 TODO,FIXME 代码注释。 Typescript React code snippets React & TypeScript 代码片段自动补全。...Vue 3 Snippets Vue.js 3 和 Vue.js 2 代码片段扩展。 wechat-snippet 微信小程序代码辅助,代码片段自动补全。

3.5K50

10 个你可能还不知道 VS Code 使用技巧

文末福利:618淘系前端实践小册 经常帮一些同学 One-on-One 地解决问题,在看部分同学使用 VS Code 时候,有些蹩脚,实际一些有用技巧能够提高我们日常工作效率。...NO.1 一、重构代码 VS Code 提供了一些快速重构代码操作,例如: 将一整段代码提取为函数:选择要提取代码片段,然后单击做成槽中灯泡查看可用重构操作。...代码片段可以被提取到一个新方法中,或者在不同范围内(当前闭包、当前函数内、当前类中、当前文件内)提取到一个新函数中。在提取重构期间,VS Code 会引导为该函数进行命名。 ?...转换导出方式:export const name 或者 export default。 ? 合并参数:将函数多个参数合并为单个对象参数: ?...用得多了经常会打开多个终端,这时候给终端命名可以提高终端定位效率。 ?

3.1K30

VS中调试LINQ(Lambda)

在 4 基础,对于IEnumerable,如果有多个条件,我们可以写在同一个Where()里,也可以拆开写在多个Where()里,不会影响效率,因为不会生成多个暂存结果集。...前2个框可以点开看看一些选择项,第3个框可以输入一些代码代码里可以使用变量/方法,会有智能提示。 注意:lambda表达式参数没有提示,需要手动输入参数名和参数属性/方法。...而不是单个Linq。...调试插件 —OzCode 特性讲解+破解工具和教程:https://blog.csdn.net/sky__god/article/details/86153982 LinqPad 这个软件很强大,可以执行代码片段...有4种方法: VS里使用【快速监视】 VS里使用断点设置里【操作】 使用OzCode 使用LinqPad VS里使用【快速监视】 首先在整个语句设置断点,当程序运行到该断点时,在集合对象右键->快速监视

4.6K30

2021 年 Python 程序员必备 VS code 插件!

VS Code在没有这个扩展情况下也会支持Python代码高亮显示。但还是推荐你安装Python这个扩展,Python是由微软自己开发,与VS Code是同一个创建者。...Notebooks:创建和编辑Jupyter Notebooks,添加和运行代码单元格,渲染图,通过变量浏览器可视化变量,使用data viewer可视化数据帧等等 环境:自动激活virtualenv...Python Snippets是一个 Ferhat Yalçın 开发内置代码片段扩展包,这个扩展包对任何开发人员来说非常有用,特别是对Python初学者,它包含许多内置代码片段,比如字符串、...这个小而方便工具可以让你有一个优秀用户界面和调试功能来测试你代码。我们都知道单元测试重要性,所以在IDE或代码编辑器拥有这样一个工具是很有必要。 ? 5、Python Preview ?...Python Preview是一个扩展,它为Python代码添加了可视化调试功能。它将调试代码转换为带有动画和图形元素交互式会话,以表示应用程序状态。

1.7K20

Webpack 实战系列一:正确使用 Sourcemap

nconsole.log(name)" ], "sourceRoot": "" } 各字段含义分别为: version:指代 sourcemap 版本,目前最新版本为 3 names:字符串数组,记录原始代码中出现变量名...1.2.2 VLQ 编码 参考:https://en.wikipedia.org/wiki/Variable-lengsth_quantity VLQ 本质是一种将整数数值转换为 Base64 编码算法...,它先将任意大整数转换为一系列六位字节码,再按 Base64 规则转换为一串可见字符。...但是,分组中只有中间 4 个字节用于表示数值,因此单个分组只能表达 「-15 ~ 15」 之间数值范围,对于超过这个范围整数需要组合多个分组共同表达同一数字,组合规则: 第一个分组最后一位为符号位...你也可以通过以下操作手动打开 Sourcemap: 2.1.8 小结 总结一下,Webpack devtool 值都是由以上七种关键字一个或多个组成,虽然提供了 27 种候选项,但逻辑都是由上述规则叠加而成

2.2K10

2019年腾讯PHP工程师面试题「建议收藏」

)、将Tokens转换成简单而有意义表达式、顺次执行Opcodes、将表达式编译成Opocdes B、将PHP代码转换为语言片段(Tokens)、将表达式编译成Opocdes、顺次执行Opcodes...、将Tokens转换成简单而有意义表达式 C、将PHP代码转换为语言片段(Tokens)、将Tokens转换成简单而有意义表达式、将表达式编译成Opocdes、顺次执行Opcodes D、将PHP...代码转换为语言片段(Tokens)、将表达式编译成Opocdes、将Tokens转换成简单而有意义表达式、顺次执行Opcodes 参考答案:C 答案解析: 正确答案为C 1.Scanning(Lexing...) ,将PHP代码转换为语言片段(Tokens) 2.Parsing, 将Tokens转换成简单而有意义表达式 3.Compilation, 将表达式编译成Opocdes 4.Execution...A、CSRF需要有JavaScript代码 B、CSRF攻击恶意代码位于第三方站点 C、过滤用户输入可以防止恶意代码注入到某个站点,但是它无阻止法恶意代码在第三方站点运行 D、CSRF符合同源策略

39420

2019年腾讯PHP工程师面试题

)、将Tokens转换成简单而有意义表达式、顺次执行Opcodes、将表达式编译成Opocdes B、将PHP代码转换为语言片段(Tokens)、将表达式编译成Opocdes、顺次执行Opcodes...、将Tokens转换成简单而有意义表达式 C、将PHP代码转换为语言片段(Tokens)、将Tokens转换成简单而有意义表达式、将表达式编译成Opocdes、顺次执行Opcodes D、将PHP...代码转换为语言片段(Tokens)、将表达式编译成Opocdes、将Tokens转换成简单而有意义表达式、顺次执行Opcodes 参考答案:C 答案解析: 正确答案为C 1.Scanning(Lexing...) ,将PHP代码转换为语言片段(Tokens) 2.Parsing, 将Tokens转换成简单而有意义表达式 3.Compilation, 将表达式编译成Opocdes 4.Execution...A、CSRF需要有JavaScript代码 B、CSRF攻击恶意代码位于第三方站点 C、过滤用户输入可以防止恶意代码注入到某个站点,但是它无阻止法恶意代码在第三方站点运行 D、CSRF符合同源策略

54710
领券