代码高亮是程序员的刚需，不管是在笔记类，论坛类，博客类web网站中，都对代码高亮提出要求，
不高亮的代码阅读体验很差，codeMirror是一个前端代码高亮库，使用方便。
CodeMirror 是一款在线的支持语法高亮的代码编辑器。
测试账号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>codemirror demo</title>
<!-- 核心css文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css"
integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--引入css主题文件，用以支持主题-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/dracula.min.css"
integrity="sha512-gFMl3u9d0xt3WR8ZeW05MWm3yZ+ZfgsBVXLSOiFz2xeVrZ8Neg0+V1kkRIo9LikyA/T9HuS91kDfc2XWse0K0A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
/* 设置字体大小 */
.CodeMirror {
font-size: 16px;
}
</style>
</head>
<body>
<!-- 编辑器节点 -->
<textarea id="code-editor"></textarea>
<!-- 核心js文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"
integrity="sha512-sSWQXoxIkE0G4/xqLngx5C53oOZCgFRxWE79CvMX2X0IKx14W3j9Dpz/2MpRh58xb2W/h+Y4WAHJQA0qMMuxJg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- javascript 语法高亮 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/javascript/javascript.min.js"
integrity="sha512-Cbz+kvn+l5pi5HfXsEB/FYgZVKjGIhOgYNBwj4W2IHP2y8r3AdyDCQRnEUqIQ+6aJjygKPTyaNT2eIihaykJlw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
let code = `
function getUser(){
let user = {
name: "Tom",
age: 18
}
return user;
}
console.log("hello");
`;
var editor = CodeMirror.fromTextArea(
document.querySelector("#code-editor"),
{
lineNumbers: true, //显示行号
theme: "dracula", //设置主题
mode: "javascript", // 实现javascript代码高亮
}
);
editor.setValue(code); //给代码框赋值
// 监听事件
editor.on("change", function (editor, change) {
// console.log(editor, change);
console.log(editor.getValue()); // 获取代码框的值
});
</script>
</body>
</html>
-
评论信息
默认排序 测试账号