写codemirror踩坑之主题色

最新推荐文章于 2024-04-29 16:58:42 发布
最新推荐文章于 2024-04-29 16:58:42 发布
阅读量1.1k 收藏 1
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49914438/article/details/130061563
版权
文章讲述了在Codemirror中，从monokai主题切换到base16-light主题时遇到的一半颜色显示问题。原因是缺少对应主题的样式代码引用。解决方案是导入codemirror/theme/base16-light.css来修复颜色显示异常。
摘要由CSDN通过智能技术生成

  本来的codemirror用的主题色是monokai，如图1所示。但是现在项目要求使用base16-light。最终的展示结果如图s所示。

                                                                              图1

                                                           图s

   原来的是写死的主题我修改了封装的代码，然后使用主题传参的方式，但是有一个很奇怪的问题就是就是主题色只有一半，如下所示。代码段的颜色也不对。

 【原因】

    缺少引用对用主题色的样式代码,添加对应的主题样式代码即可

import 'codemirror/theme/base16-light.css' // 主题

林依子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CodeMirror和美化的日晒主题
CSS 初学者指南
06-25 1298
这是Google Code Prettify （ 在此源中找到 ）的。 .prettyprint { color: #839496; background-color: #002b36; } .prettyprint .pln { color: inherit; } .prettyprint .str, .prettyprint .lit, .prettyprint .atv...
Angular Material应用及CodeMirror踩坑指南
魔仙佩奇
04-23 664
Material 组件库 在项目中安装Material组件库时，按以下步骤： 1. npm i @angular/material @angular/cdk @angular/animations 2. 在全局style.scss文件中，引入material主题样式 @import '@angular/material/prebuilt-themes/indigo-pink.css'; @import '@angular/material/prebuilt-themes/purple-gree.
codemirror主题效果概览
夕山雨的博客
05-29 2万+
codemirror是目前最流行的在线编辑器，本文主要是罗列codemirror提供的所有主题效果，如果你需要使用codemirror制作一个在线编辑器，可以参考本文选择一个喜欢的主题。 本文使用的目标对象是vue，其他语言或框架也是类似的。为了减小纵向篇幅，这里使用了三个codemirror，分别展示template、script和style的效果。 1. 3024-day 2. 3024-night 3. abcdef 4. ambiance-mobile 5. ambiance 6. ayu
codemirror-themes:CodeMirror 的主题生成器
06-10
codemirror-主题 实时生成 CodeMirror 语法高亮主题的界面！ 特征 默认配置 阿尔法支持 多语言演示 演示 CodeMirror 编辑器
vue代码编辑器vue-codemirror的简单使用更改样式和切换主题等
02-13 7403
可以查看官网演示：vue-codemirror | Homepage支持的语言mode：CodeMirror: Language Modes 支持的主题样式：CodeMirror: Theme Demo 开始安装和使用： 基础使用 注册全局组件 注册局部组件 使用组件 实现的效果： 编辑器默认高度是300px，如果想更改高度和字体大小：添加样式 更改主题的时候，需要先引入相应的主题样式:然后再更改主题：实际效果：
codemirror的theme更改，vue深度监听
qq_36390975的博客
09-23 853
【代码】codemirror的theme更改，vue深度监听。
CodeMirror基本使用及实现关键词高亮、自定义主题
热门推荐
smk108的博客
01-19 3万+
CodeMirror是一款在线的支持语法高亮的代码编辑器，现在已有封装的react版本（react-codemirror）可以直接使用。Codemirror资源文件中，lib下是放的是核心库和核心css，mode下放的是各种支持语言的语法定义，theme目录下是支持的主题样式。 使用codemirror实现在线代码编辑器主要包括的功能是： 1、实现自动提示 2、 关键词高亮与自定义theme...
vue-codemirror6+vue3的基础使用（行高、json字符串、黑暗主题、自定义主题）
weixin_42463849的博客
06-10 8693
vue3的组合式组合式 API方式使用vue-codemirror6，主要实现json字符串显示，自定义主题、暗黑主题设置
codemirror下载包
02-02
**codemirror下载包** ** Codemirror** 是一个开源的、功能强大的代码编辑器组件，它可以在网页上实现各种编程语言的语法高亮、自动完成、错误检测等功能。这款编辑器广泛应用于在线编程环境、代码示例展示、教育...
vue-codemirror代码编辑器使用心得和踩坑
bsefef的博客
03-02 5174
最近工作中需要优化下之前的网页端代码编辑器。我作为后端开发，虽然做这个不专业，但也只能硬着头皮上啊，大量查阅资料，还是优化了一些内容的，在这里分享一下。如果有写的不对的地方，也请大家体谅下，毕竟纯手打很累的哈哈。 参考手册： vue-codemirror github 地址：https://github.com/surmon-china/vue-codemirror codemirror 中文文档：https://olindk.gitbooks.io/codemirror/content/configura
codemirror-inject:将 CodeMirror 注入包含基本和主题 CSS 的页面
06-15
代码镜像注入 将 CodeMirror 注入包含基本和主题 CSS 的页面 用法 var codemirror = require ( 'codemirror-inject' ) ; var el = document . getElementById ( 'editor' ) ; // loads the base styling for codemirror and mounts an instance in the given el var editor = codemirror ( el , { mode : 'javascript' , // will load the `javascript` syntax mode theme : 'monokai' // will load the `monokai` theme } ) ; 执照 麻省理工学院
自用的IDEA-theme主题两套黑色白色各一套
05-09
自己自用的IDEA主题两套，一套黑色主题，一套白色主题！
在vue项目中使用codemirror插件实现代码编辑器功能
10-16
在`<script>`部分，我们需要导入`codemirror`相关的模块，以及设置编辑器的模式、主题和其他配置项。例如，这里我们选择了SQL模式，但你可以根据实际需求选择其他语言模式： ```javascript import "codemirror/...
codemirror 提示方法自定义及方法参数添加背景色
xujing_06的博客
06-17 3911
html <sr-codemirror class="codemirror" :codemirror-Option="cmOption" :codemirror-Model="cmModel" @codemirrorChange="changeText" :codemirrorPlaceholder="'请输入'" ></sr-codemirror>
CodeMirror使用： 编写一个在线编辑HTML、JS、CSS文件，网页的模板页面-初实现
伊甸园的博客
04-09 3474
CodeMirror 是一个强大的基于浏览器的文本编辑器组件，主要用于网页中创建可编辑的源代码区域，特别适用于编写和展示程序代码。它支持多种编程语言的语法高亮、代码折叠、自动补全、查找替换等多种高级编辑特性。
前端插件库之vue3使用vue-codemirror插件
m0_54883970的博客
07-31 5792
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。支持代码编辑区,满足白天/黑夜主题切换,满足c++/python语言切换。新手作品,暂时记录,如有改进或增加,以后会更新。...
react中CodeMirror （代码编辑器）
Qing416439079的博客
02-27 3804
react 中使用CodeMirror（代码编辑器 代码块）
Vue进阶（幺捌肆）：CodeMirror 应用小结_codemirror 禁止编辑
2401_84411522的博客
04-29 435
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-1NDTxR67-1714381105037)]
React中CodeMirror插件的使用及封装
qq_45799465的博客
07-25 1万+
关于 CodeMirror 插件的引入、解释、使用、及封装。
codemirror是否可以浅色
最新发布
07-25
CodeMirror 是一款功能丰富的文本编辑器库，支持多种语言语法高亮显示，并提供了一系列自定义选项，包括主题颜色。确实，CodeMirror 支持浅色背景的主题。 在使用 CodeMirror 的过程中，用户可以通过 CSS 来调整编辑器的颜色方案，包括背景色、字体颜色等。为了获得浅色主题的效果，开发者需要配置合适的色彩组合。通常情况下，这涉及到更改 `.CodeMirror` 或者 `#CodeMirror` 类的 CSS 样式属性。 例如，在应用了浅色主题的情况下，CSS 可能会像这样： ```css .CodeMirror { background-color: #f8f8f2; /* 浅灰色背景 */ color: #454749; /* 深灰色字体 */ } ``` 或者，如果使用的是某种预设的浅色主题，如 Light.css，你只需引入相应的样式文件并在 HTML 中引用即可。Light.css 等主题库通常包含专门针对 CodeMirror 编辑器定制的样式，允许轻松地将特定的视觉风格应用到编辑器上。 通过这种方式，你可以根据需求调整 CodeMirror 的外观，使其适应各种不同的工作环境和偏好，而不仅仅是深色模式。这样既可以提高用户的舒适度，也可以增强编辑体验的整体美观性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值