当前博客:能不能封装CodeMirror

68 次浏览【转载需注明来源】

博客作者:【三角函数】

个性签名:寒窗苦读十年一朝凤舞九天

代码高亮是程序员的刚需,不管是在笔记类,论坛类,博客类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>

能不能封装CodeMirror