在线编辑器 CodeMirror

如何优雅的在网页显示代码 如果开发在线编辑器

引入资源:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/javascript/javascript.min.js"></script><textarea id="codeText"></textarea>
    let editor = CodeMirror.fromTextArea(document.getElementById('codeText'), {mode: 'javascript',theme: 'default', // 设置主题,可选lineNumbers: true,lineWrapping: true, //缩进//mode(模式):指定编辑器的语言模式,例如 'javascript'、'htmlmixed' 等。它决定了编辑器的语法高亮和代码提示等功能。//theme(主题):指定编辑器的外观主题,例如 'default'、'monokai' 等。它定义了编辑器的颜色和样式。//lineNumbers(行号):一个布尔值,指示是否显示行号。设置为 true 将在编辑器左侧显示行号。//readOnly(只读):一个布尔值,指示编辑器是否为只读模式。设置为 true 将禁止用户编辑内容。//indentUnit(缩进单位):一个整数,指定每次缩进的空格数。//smartIndent(智能缩进):一个布尔值,指示是否启用智能缩进功能,根据上下文自动确定缩进级别。//tabSize(制表符大小):一个整数,指定制表符的宽度。//extraKeys(额外按键):一个对象,用于定义额外的按键绑定。可以设置自定义的按键快捷键和对应的操作。});

editor.setValue(code) 可以设置显示的代码
editor.getValue() 可以获取代码 当你拿到代码之后就可以通过创建script标签的方式插入到元素里了。

接下来看效果图:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/607.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣经典150题第三十题:长度最小的子数组

目录 力扣经典150题解析之三十&#xff1a;长度最小的子数组1. 介绍2. 问题描述3. 示例4. 解题思路方法一&#xff1a;滑动窗口 5. 算法实现6. 复杂度分析7. 测试与验证测试用例设计测试结果分析 8. 进阶9. 总结10. 参考文献感谢阅读 力扣经典150题解析之三十&#xff1a;长度最…

Web前端 Javascript笔记6

BOM 前面的笔记讲的都是DOM&#xff08;文档对象模型&#xff09;&#xff0c;DOM几乎被所有浏览器支持&#xff0c;是DOM的作用为操作HTML文档的重要手段。利用DOM可以对HTML文档中的所有元素&#xff0c;节点进行获取与访问&#xff0c;对标签属性与样式进行设置。 下面是一…

8.Vue2.x 数据监视—watch

文章目录 姓名案例watch实现 姓名案例watch实现 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>姓名案例—watch实现</title><script type"text/javascript" src"../js/vu…

OpenHarmony鸿蒙南向开发案例:【智能窗户通风设备】

样例简介 本文档介绍了安全厨房案例中的相关智能窗户通风设备&#xff0c;本安全厨房案例利用轻量级软总线能力&#xff0c;将两块欧智通V200Z-R/BES2600开发板模拟的智能窗户通风设备和燃气告警设备组合成。当燃气数值告警时&#xff0c;无需其它操作&#xff0c;直接通知软总…

j解决:shiro版本导致静态资源中文名称无法访问

项目场景&#xff1a; 项目使用的springbootshiro&#xff0c;静态资源是直接使用的springboot的ResourceHandlerRegistry来进行配置访问的&#xff0c;没有使用Nginx&#xff0c;Apache等 原因分析&#xff1a; 在做文件预览时发现&#xff0c;中文名称资源无法访问。多次断…

python influx基本操作

连接influx client InfluxDBClient(influx_ip, influx_port, influx_db, , databaseinflux_db)数据样式 [{"time": "2021-12-24T01:18:49Z","abdomina_conn_state": 0,"ap_mac": "05e4608c3200","arrhythmia_type&q…

Targeted influence maximization in competitive social networks

abstract 利用口碑效应的广告对于推销产品是相当有效的。在过去的十年中&#xff0c;人们对营销中的影响力最大化问题进行了深入的研究。影响力最大化问题旨在将社交网络中的一小群人识别为种子&#xff0c;最终他们将引发网络中最大的影响力传播或产品采用。在网络营销的实际场…

C++ 继承(一)

一、继承的概念 继承是面向对象编程中的一个重要概念&#xff0c;它指的是一个类&#xff08;子类&#xff09;可以从另一个类&#xff08;父类&#xff09;继承属性和方法。子类继承父类的属性和方法后&#xff0c;可以直接使用这些属性和方法&#xff0c;同时也可以在子类中…

SpringBoot中全局异常捕获与参数校验的优雅实现

一&#xff0c;为什么要用全局异常处理&#xff1f; 在日常开发中&#xff0c;为了不抛出异常堆栈信息给前端页面&#xff0c;每次编写Controller层代码都要尽可能的catch住所有service层、dao层等异常&#xff0c;代码耦合性较高&#xff0c;且不美观&#xff0c;不利于后期维…

DLT 直接线性变换

DLT 直接线性变换 对于单应变换 x i ′ H x i x_i^{\prime}Hx_i xi′​Hxi​&#xff0c;易知两图中对应的特征点&#xff0c;如何找出所需要的 H H H​&#xff0c;为了解决这个问题&#xff0c;可以采用DLT算法 原理 其中采用Least Squares Error去拟合 其中目标是获得最佳…

【办公类-22-05】20240419 UIBOT填写“PATHS课程”的《SSBS校园行为问卷》

背景需求&#xff1a; 每年都有一个PATHS课程的“家长问卷调查”和“教师问卷调查”需要填写 作为教师&#xff0c;每次要对全班所有的孩子进行评价&#xff0c;每位孩子64题&#xff01; 反复点题目&#xff0c;感觉非常累&#xff0c;工作操作就是两位老师&#xff0c;每人做…

Golang | Leetcode Golang题解之第25题K个一组翻转链表

题目&#xff1a; 题解&#xff1a; func reverseKGroup(head *ListNode, k int) *ListNode {hair : &ListNode{Next: head}pre : hairfor head ! nil {tail : prefor i : 0; i < k; i {tail tail.Nextif tail nil {return hair.Next}}nex : tail.Nexthead, tail my…

U盘秒变0字节?别慌,数据恢复有妙招!

在日常的工作和生活中&#xff0c;U盘已成为我们不可或缺的数据存储工具。然而&#xff0c;有时候我们可能会遇到一个令人头疼的问题&#xff1a;原本存有重要文件的U盘&#xff0c;突然间容量显示为0字节。这意味着U盘中的数据全部丢失&#xff0c;无法读取。那么&#xff0c;…

hackthebox - Redeemer

2024.4.19 TASK 1 Which TCP port is open on the machine? 6379 TASK 2 Which service is running on the port that is open on the machine? redis TASK 3 What type of database is Redis? Choose from the following options: (i) In-memory Database, (ii) Traditiona…

UltraScale+的10G/25G Ethernet Subsystem IP核使用

文章目录 前言一、设计框图1.1、xxv_ethernet_01.2、xxv_ethernet_0_sharedlogic_wrapper1.3、xxv_ethernet_0_clocking_wrapper1.4、xxv_ethernet_0_common_wrapper 二、IP核配置三、仿真四、上板测速 前言 前面我们学习了很多基于XILINX 7系列的高速接口使用&#xff0c;本文…

组合预测 | Matlab实现ICEEMDAN-SMA-SVM基于改进完备集合经验模态分解-黏菌优化算法-支持向量机的时间序列预测

组合预测 | Matlab实现ICEEMDAN-SMA-SVM基于改进完备集合经验模态分解-黏菌优化算法-支持向量机的时间序列预测 目录 组合预测 | Matlab实现ICEEMDAN-SMA-SVM基于改进完备集合经验模态分解-黏菌优化算法-支持向量机的时间序列预测预测效果基本介绍程序设计参考资料预测效果 基本…

爬取微博评论数据

# -*- coding: utf-8 -*- import requests #用于发送请求并且拿到源代码 from bs4 import BeautifulSoup #用于解析数据 1.找到数据源地址并且分析链接 2.发送请求并且拿到数据 3.在拿到的数据中解析出需要的数据 4.存储数据 headers { "User-Agent": "…

Go微服务: go-micro集成链路追踪jaeger

关于链路追踪jeager的原理 参考: https://blog.csdn.net/Tyro_java/article/details/137754812 核心代码演示 1 ) 概述 这里接前文结构框架&#xff1a;https://blog.csdn.net/Tyro_java/article/details/137753232 2 &#xff09;核心代码&#xff1a;common/jaeger.go p…

C++中string的用法总结+底层剖析

前言&#xff1a;在C语言中&#xff0c;我们经常使用字符串进行一系列操作&#xff0c;经常使用的函数如下&#xff1a;增删改查 &#xff08;自己造轮子&#xff09;&#xff0c;C中设计出string容器&#xff0c;STL库中为我们提供了以上函数&#xff0c;所以我们使用string容…

华为OD-C卷-密码解密[100分]Python3+C语言-90%

题目描述 给定一段“密文”字符串 s,其中字符都是经过“密码本”映射的,现需要将“密文”解密并输出。 映射的规则(a ~ i)分别用(1 ~ 9)表示;(j ~ z)分别用("10*" ~ "26*")表示。 约束:映射始终唯一。 输入描述 “密文”字符串 输出描述 …